본문 바로가기
프론트엔드 입문 가이드/HTML 기초

[HTML 기초] 3. HTML 태그 - 텍스트 관련 태그(h1~h6, p, b, br, ol, ul, li, a)

zeo.y 2022. 3. 13. 18:18
반응형

1. 태그의 구조

기본적인 태그의 구조는 아래와 같습니다.

  • 앞부분을 열린 태그(Opening tag), 뒷부분을 닫힌 태그(Closing tag)가 하고 그 사이에 내용이 들어갑니다.
  • 열린 태그 안에 속성(Attribute) 값이 들어가는데 이를 활용해 태그를 효율적으로 활용할 수 있습니다.
  • 열린 태그와 닫힌 태그, 그 사이의 내용을 모두 포함한 것을 요소(Element)라고 합니다.

태그의 구조

참고) 요소를 구성하는 태그

사실 위의 그림은 요소의 구조라고 하는 것이 정확합니다. 요소는 웹 페이지를 구성하는 것으로, 요소를 구성하는 것 중 하나가 태그인 것이지요. 하지만 여기서는 태그를 사용하는 방식을 이해하기 위해 태그의 구조라고 소개했습니다. 요소에 대한 구체적인 내용이 궁금하다면 여기를 참고하세요.

 

 

2. 기초 태그  

제목 - header

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • 6단계로 제목을 나타낼 수 있으며 <h1>이 가장 높고 <h6>가 가장 낮음.
  <body>
    <h1>h1 태그</h1>
    <h2>h2 태그</h2>
    <h3>h3 태그</h3>
    <h4>h4 태그</h4>
    <h5>h5 태그</h5>
    <h6>h6 태그</h6>
  </body>

 

문단 - paragraph

  • <p>
  • 하나의 문단을 나타냄
  <body>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </p>
  </body>

 

강조 - bold

  • <b>
  • 글자 굵게 표시
  <body>
    <p>
      <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
      industry. ...
    </p>
  </body>

 

줄 바꿈 - break

  • <br>
  • 텍스트 안에서 줄 바꿈
  <body>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry.<br />
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, <br />
      when an unknown printer took a galley of type and scrambled it to make a
      type specimen book.<br />
    </p>
  </body>

 

리스트 - list

  • <li>
  • 리스트 목록을 나타내며, 반드시 <ol> 혹은 <ul> 태그 안에 위치해야 함

 

ordered list

  • <ol>
  • 정렬된 리스트

  <body>
    <ol>
      <li>구글</li>
      <li>네이버</li>
      <li>깃허브</li>
    </ol>
  </body>

 

unordered list

  • <ul>
  • 정렬되지 않은 리스트

  <body>
    <ul>
      <li>구글</li>
      <li>네이버</li>
      <li>깃허브</li>
    </ul>
  </body>

 

<ol>, <ul> 태그 속성 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol#%ED%8A%B9%EC%84%B1

 

 

링크 - anchor

  <body>
    <ul>
      <li>
        <a href="https://www.google.com/">구글</a>
      </li>
      <li>
        <a href="https://www.naver.com/">네이버</a>
      </li>
    </ul>
  </body>​

 

 

3. 정리

위에서 살펴본 태그들을 이용해 총정리 웹 사이트를 만들어 보겠습니다. 아래 두 가지 중 하나를 선택해 보세요.

  • 코드와 웹 페이지의 구조를 함께 보며 정리하는 시간 가지기
  • 웹 페이지의 이미지를 먼저 확인 후 똑같이 만들어 본 뒤 코드를 확인하기

 

참고) vscode로 코드 작성하는 법

더보기

1. 바탕화면 혹은 아무 곳에 작업할 폴더 하나 생성하기

2. vscode를 열어 생성한 폴더 열기 (File -> Open Folder)

3. 좌측 작업 창(아래 그림)에서 마우스 우 클릭 -> New File -> index.html 파일 하나 생성하기 

 

4. 코드 작성하기

5. 웹에서 확인하기 (윈도우 기준, alt + L -> O 누르면 라이브 서버 동작함)

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>HTML 태그에 대하여</h1>
    <h2>텍스트 관련 태그의 존재 파악</h2>
    <p>
      태그의 종류는 매우 많습니다. 그래서 처음부터 모든 태그를 외우려고 덤벼들면
      중간에 지쳐버릴지도 몰라요.
      <b
        >이런 태그가 있구나, 이 태그는 이런 동작을 하는구나, 이럴 때 이 태그를
        사용하는구나, 이 태그에 이런 속성도 있네</b
      >
      정도로 이해하고 태그들의 존재만 알아가도 성공입니다! <br />
      당장 외우는 것 보다 나중에 이것저것 직접 만들어볼 때 필요한 태그들을 찾아
      적용할 줄 아는 것이 훨씬 더 중요합니다.
    </p>

    <h2>추가적인 정보</h2>
    <p>
      MDN 사이트는 웹 개발을 하며 가장 많이 들어가 볼 사이트입니다.
      <a
        href="https://developer.mozilla.org/ko/docs/Web/HTML/Element"
        target="_blank"
        >여기</a
      >를 클릭해 HTML 태그들과 그 속성을 더 알아보세요. 내가 구현하고 싶은 것들
      대부분은 아마 이미 누군가가 속성으로 만들어 놓았을 가능성이 99%입니다. 즉,
      속성값만 잘 활용해도 태그를 엄청 효율적으로 쓸 수 있습니다!
    </p>

    <h2>오늘 배운 태그 리스트</h2>
    <ol type="i">
      <li>제목</li>
      <li>문단</li>
      <li>강조</li>
      <li>줄바꿈</li>
      <li>리스트</li>
      <li>링크</li>
    </ol>
  </body>
</html>
<!DOCTYPE html>

 

반응형

'프론트엔드 입문 가이드 > HTML 기초' 카테고리의 다른 글

[HTML 기초] 5. HTML 태그 - 폼 관련 태그(button, input, textarea, select, option, label, form)  (0) 2022.03.15
[HTML 기초] 4. HTML 태그 - 멀티미디어, 표 관련 태그 (img, video, audio, table, thead, tbody, tr, th, td, caption)  (0) 2022.03.14
[HTML 기초] 2. 환경 세팅 & HTML 구조 (feat. vscode 사용 꿀팁)  (0) 2022.03.12
[HTML 기초] 1. HTML이란?  (0) 2022.03.09
[HTML 기초] 0. 소개  (0) 2022.03.08

'프론트엔드 입문 가이드/HTML 기초' Related Articles

티스토리툴바