[HTML] HTML의 기본 태그: 제목(h), 문단(p), 리스트(ol, ul, dl, li)

 HTML의 기본 태그를 알아봅니다.

 

[ Contents ]

 

 

1. <h> 제목 태그

  <h1>jangThang</h1>
  <h2>jangThang</h2>
  <h3>jangThang</h3>
  <h4>jangThang</h4>
  <h5>jangThang</h5>
  <h6>jangThang</h6>

 제목 태그는 'Heading'의 약자로 h를 사용합니다. 중요도에 따라 h1 ~ h6까지 있으며, h1이 가장 큽니다. 주로 h1을 제목으로 사용하고, h2~h6은 부제목으로 사용합니다. 특히 <h1>은 페이지의 제목이므로, 꼭 1개만 사용해야 좋습니다. (웹 크롤러가 <h1>태그를 페이지의 제목으로 인식하고, 페이지의 주제 및 내용을 분류합니다.)

 세부적인 특징으로는 '굵게(bold)' 표시되며, h태그가 끝나면 자동으로 줄바꿈이 됩니다. 그리고 제목 하단에는 여백이 넉넉하게 주어집니다.

 

 

 

2. <p> 문단 태그

  <p>star가 되고나서 Tistory 입니다. 주소는 https://star7sss.tistory.com 입니다.</p>
  <p>주로 IT, 데이터 분석, AI 분야를 다루고 있습니다.</p>

 문단 태그는 'Paragraph'의 약자로 p를 사용합니다. 주로 줄글을 적을 때 이용합니다.

 

창 길이를 줄였을 때

 p태그 안에 있는 내용은 하나의 '문단'으로 구성되며, 창의 크기에 따라 자동으로 줄 수가 조정됩니다. 또한 p 태그가 끝나면 자동으로 줄바꿈이 됩니다.

 

 

 

3. 리스트 태그

1) <ol> 순서가 있는 리스트

  <ol>
    <li>닉네임: jangThang</li>
    <li>블로그: star가 되고나서</li>
  </ol>

 ol은 'Ordered list'의 약자로, 순서가 있는 리스트입니다. 리스트 항목은 <li> 태그로 추가하며, 자동으로 순서가 매겨집니다.

 

 

  <ol>
    <li>닉네임: jangThang
    <li>블로그: star가 되고나서
  </ol>

 <li> 태그의 경우, 굳이 </li>로 닫아주지 않아도 정상적으로 작동합니다. (다음 <li>를 태그를 만나면 이전 항목이 끝나고 새로운 항목이 시작되는 것을 의미하므로)

 하지만, 닫아주는 게 좋습니다.

 

태그 속성
<ol start="n">	n부터 항목번호가 시작
<ol type="1/a/A/I/i">	해당 스타일로 항목 번호가 매겨짐
<ol reversed>	항목 번호가 역순으로 매겨짐

 추가적인 태그 속성값은 위와 같습니다.

 

 

 

2) <ul> 순서가 없는 리스트

  <ul>
    <li>닉네임: jangThang
    <li>블로그: star가 되고나서
  </ul>

 ul은 'Unordered list'의 약자로, 순서가 없는 리스트를 의미합니다. 기본적으로 '동그라미 원'을 줄머리 기호로 제공합니다. 

 

 

type="circle"

  <ul type="circle">
    <li>닉네임: jangThang
    <li>블로그: star가 되고나서
  </ul>

 ul 태그는 type 속성값으로 줄머리 기호를 변경할 수 있습니다.

 

type="square"

 단, ul태그의 type 속성은 HTML5부터는 지원하지 않습니다. <ul style="list-style-type:square;>와 같이, css를 통해서 직접 지정해야 합니다.

 

 

  <ul>
    <li>닉네임: jangThang
    <ul>
      <li>블로그: star가 되고나서
        <ul>
          <li>주소: star7sss.tistory.com</li>
          <ul>
            <li>감사합니다.</li>
          </ul>
        </ul>
    </ul>
  </ul>

 ul 태그는 중첩으로 사용할 경우, 자동으로 글머리 기호를 변경합니다. [disc - circle - square] 순으로 단계가 설정되며, 그 아랫단계는 square 모양으로 고정됩니다.

 

 

 

3) <dl> 사전 리스트

  <dl>
    <dt>블로그 이름</dt>
    <dd>: star가 되고나서</dd>
    <dt>운영주</dt>
    <dd>: jangThang</dd>
  </dl>

<dt>태그 안에 '항목명'을 쓰고, <dd>태그에 항목에 대한 설명을 넣습니다.

 

 

dd 태그는 자동으로 들여쓰기가 되며, 항목당 2개 이상 사용할 수도 있습니다.