HTML5 핵심 태그의 사용법(텍스트 서식, 문단)

HTML 태그 종류와 사용법

제목 표시하기

HTML에서는 제목을 표시하기 위해 h1 부터 h6까지 까지의 태그를 사용합니다. 숫자가 작을수록 더 큰 제목을 의미합니다.

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

문단, 줄 바꿈

문단을 만들기 위해

태그를 사용하고, 줄 바꿈을 위해
태그를 사용합니다.

<p>이것은 문단입니다.</p>
<p>이것은 또 다른 문단입니다.<br>이것은 같은 문단 내에서의 줄 바꿈입니다.</p>

글자 굵게 표시하기

글자를 두껍게 표시하려면 태그를 사용하고, 강조를 위해 태그를 사용합니다.

<p><b>이 텍스트는 두껍게 표시됩니다.</b></p>
<p><strong>이 텍스트는 강조되어 두껍게 표시됩니다.</strong></p>

글자 기울림 표시하기

글자를 기울이려면 또는 태그를 사용합니다.

<p><em>이 텍스트는 기울임으로 표시됩니다.</em></p>
<p><i>이 텍스트도 기울임으로 표시됩니다.</i></p>

글자 밑줄 표시하기

글자에 밑줄을 추가하려면 태그를 사용합니다.

<p><u>이 텍스트에는 밑줄이 표시됩니다.</u></p>

글자 취소선 표시하기

글자에 취소선을 추가하려면 또는 태그를 사용합니다.

<p><s>이 텍스트에는 취소선이 표시됩니다.</s></p>
<p><del>이 텍스트에도 취소선이 표시됩니다.</del></p>

큰 글자 표시, 작은 글자 표시

글자를 크게 표시하려면

태그를, 작게 표시하려면 태그를 사용합니다.

<p><big>이 텍스트는 크게 표시됩니다.</big></p>
<p><small>이 텍스트는 작게 표시됩니다.</small></p>

위첨자, 아래 첨자

위첨자를 표시하려면 태그를, 아래 첨자를 표시하려면 태그를 사용합니다.

<p>이 텍스트는 <sup>위첨자</sup>입니다.</p>
<p>이 텍스트는 <sub>아래첨자</sub>입니다.</p>

형광펜 배경색 글자

형광펜으로 강조된 배경색을 추가하려면

태그를 사용합니다.

<p>이 텍스트는 <sup>위첨자</sup>입니다.</p>
<p>이 텍스트는 <sub>아래첨자</sub>입니다.</p>

수평선 넣기

수평선을 삽입하려면
태그를 사용합니다.

<hr>

목록 만들기

순서가 있는 목록은
태그를, 순서가 없는 목록은
태그를 사용합니다. 각 항목은- 태그를 사용하여 표시합니다.

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

링크 만들기

하이퍼링크를 만들려면 태그를 사용합니다.

<p><a href="https://www.example.com">이곳을 클릭하세요</a></p>

이미지 삽입

이미지를 삽입하려면
태그를 사용합니다. src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 이미지 설명을 추가합니다.

<img src="path/to/image.jpg" alt="이미지 설명">

테이블 만들기

테이블을 만들려면

태그를 사용합니다. 테이블 행은태그로, 테이블 헤더는
태그로, 테이블 데이터는태그로 표시합니다.

<table>
  <tr>
    <th>헤더 1</th>
    <th>헤더 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
</table>

블록 인용문

블록 인용문을 만들려면