제목과 문단 만드는 방법 - h1, h2, h3, h4, h5, h6, p

제목 만드는 태그는 h1, h2, h3, h4, h5, h6, 문단을 만드는 태그는 p입니다.
2 min read

제목 (Heading)

제목은 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그로 만듭니다. 게시글과 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다. 제목과 하위 제목을 구분할 수 있어야 합니다.

올바른 순서로 제목을 작성하는 방법은 다음과 같습니다.

<h1>주제목</h1>
  <h2> 제목 </h2>
    <h3>부제목</h3>
      <h4>소제목</h4>
        <h5> ... </h5>
          <h6> ... </h6>

<h1> 태그는 게시글의 제목에 사용되었으므로 이 태그를 사용하지 마십시오. 한 페이지 에 두 개 이상의 <h1> 태그를 추가하지 않는 것이 좋습니다.

 

문단 (paragraph)

문단은 <p> 태그로 만듭니다. 문단과 문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면 <br> 태그를 이용합니다.

 

예제 1

제목과 문단이 있는 간단한 예제입니다. 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 글자 크기가 다릅니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>

 

예제 2

제목 레벨을 조정하여 구조를 바꿔보았습니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>

 

예제 3

문단 내에서 <br> 태그로 줄바꿈을 하는 예제입니다. 두 번째 문단에 문단 내 줄바꿈이 있습니다.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada</p>

<p>Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit. Aenean nec mollis nulla.<br>Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada</p>

 

기타 HTML 참조

You may like these posts

  • 표 만들 때 사용하는 태그 <table> : 표를 만듭니다. <tr> : 행을 만듭니다. <th> : 열의 제목이 들어가는 셀을 만듭니다. <td> : 내용이 들어가는 셀을 만듭니다. <thead>, <tbody>, …
  • 줄바꿈 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 <br> 태그를 이용합니다. 다음은 <br&g…
  • 표(table)에 제목이나 설명을 덧붙일 때 <caption> 태그를 사용하지만 <figcaption> 태그를 사용할 수도 있습니다. 두 가지 방법 모두 알아보겠습니다.   caption 먼저 <caption> 태그는 <t…
  • 사용자가 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다. 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름입니다. 공간을 최소한을 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다. 목차 select …
  • 목록에는 순서가 있는 목록(Ordered List), 순서가 필요하지 않은 목록(Unordered List), 설명 목록(Description List) 세 가지가 있습니다. 순서가 있는 목록(OL) 순서가 없는 목록(UL) 설명 목록(DL) 순서 있는 목록 순서가 필요한…
  • 인용 다른 블로그나 웹 사이트의 글을 인용할 경우, 인용임 나타내는 태그에는 <blockquote>와 <q>가 있습니다. <blockquote> 태그는 새로운 문단에서 인용하는 블록 요소이고, <q> 태그는 문단 안에서 인용할 때 사용하는 인라인 …

Post a Comment