HTML의 기본 개념과 자주 사용하는 태그

HTML의 기본 개념과 자주 사용하는 태그

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 언어입니다. HTML은 다양한 태그와 속성을 사용하여 웹 페이지의 콘텐츠를 구성합니다. 이번 글에서는 HTML의 기본 개념과 자주 사용하는 태그에 대해 알아보겠습니다.

1. HTML 태그와 속성

HTML 문서는 다양한 태그로 구성되며, 각 태그는 요소(element)를 정의합니다. 태그는 보통 여는 태그와 닫는 태그로 구성되며, 그 사이에 콘텐츠가 들어갑니다.

<tagname>콘텐츠</tagname>

태그는 속성(attribute)을 가질 수 있으며, 속성은 태그에 추가 정보를 제공하거나 스타일을 적용하는 데 사용됩니다.

<tagname attribute="value">콘텐츠</tagname>

2. 자주 사용하는 텍스트 태그

다양한 텍스트 콘텐츠를 표현하기 위해 HTML은 여러 가지 텍스트 태그를 제공합니다. 다음은 자주 사용하는 텍스트 태그입니다:

• 제목 태그 (Heading Tags): 문서의 제목을 정의하는 데 사용됩니다. <h1>부터 <h6>까지 있으며, 숫자가 작을수록 더 중요한 제목을 의미합니다.

  <h1>가장 중요한 제목</h1>
  <h2>덜 중요한 제목</h2>
  <h3>그 다음으로 중요한 제목</h3>

• 본문 태그 (Paragraph Tag): 문단을 정의하는 데 사용됩니다.

  <p>이것은 본문입니다.</p>

• 줄바꿈 태그 (Break Tag): 줄을 바꿀 때 사용됩니다.

  <p>첫 번째 줄<br>두 번째 줄</p>

• 강조 태그 (Emphasis and Strong Tags): 텍스트를 강조할 때 사용됩니다. <strong> 태그는 중요성을, <em> 태그는 기울임을 나타냅니다.

  <p><strong>중요한 텍스트</strong>와 <em>강조된 텍스트</em></p>

• 취소선 태그 (Strikethrough Tag): 텍스트에 취소선을 그을 때 사용됩니다.

  <p><s>취소된 텍스트</s></p>

• 인용 태그 (Blockquote and Quote Tags): 인용문을 나타낼 때 사용됩니다. <blockquote>는 긴 인용문, <q>는 짧은 인용문을 의미합니다.

  <blockquote>이것은 긴 인용문입니다.</blockquote>
  <p>이것은 <q>짧은 인용문</q>입니다.</p>

• 첨자 태그 (Subscript and Superscript Tags): 텍스트를 아래 첨자나 위 첨자로 표시할 때 사용됩니다.

  <p>H<sub>2</sub>O는 물의 화학식입니다.</p>
  <p>E = mc<sup>2</sup>는 유명한 방정식입니다.</p>

• 수평선 태그 (Horizontal Rule Tag): 주제를 전환할 때 수평선을 표시합니다.

  <hr>

• 코드 태그 (Code Tag): 코드 조각을 나타낼 때 사용됩니다.

  <p>여기에는 <code>코드</code>가 포함되어 있습니다.</p>

3. 순서 있는 리스트와 순서 없는 리스트

HTML에서는 순서 있는 리스트와 순서 없는 리스트를 만들 수 있습니다.

• 순서 있는 리스트 (Ordered List): 순서가 중요한 리스트를 정의합니다. <ol> 태그 안에 <li> 태그를 사용하여 항목을 나열합니다.

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

• 순서 없는 리스트 (Unordered List): 순서가 중요하지 않은 리스트를 정의합니다. <ul> 태그 안에 <li> 태그를 사용하여 항목을 나열합니다.

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

4. 테이블 태그

HTML 테이블 태그는 데이터를 행과 열로 구성할 때 사용됩니다.

• 기본 테이블 태그:

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

• 테이블 구성 요소:

  • <table>: 테이블을 정의합니다.
  • <tr>: 행을 정의합니다.
  • <td>: 행에 들어가는 데이터를 정의합니다.
  • <th>: 행의 헤더를 정의합니다.
  • <thead>: 테이블의 제목 행을 정의합니다.
  • <tbody>: 테이블의 본문을 정의합니다.
  • <tfoot>: 테이블의 바닥글을 정의합니다.

5. URI 프래그먼트와 링크

URI 프래그먼트를 사용하면 페이지 내에서 특정 위치로 이동할 수 있습니다.

• URI 프래그먼트:

  <a href="#section1">섹션 1로 이동</a>
  <div id="section1">여기는 섹션 1입니다.</div>

• 링크 새 탭에서 열기:

  <a href="https://www.example.com" target="_blank">새 탭에서 열기</a>

• 링크 현재 탭에서 열기:

  <a href="https://www.example.com" target="_self">현재 탭에서 열기</a>

• 특정 탭에서 열기:

  <a href="https://www.example.com" target="customTab">특정 탭에서 열기</a>

6. 다양한 링크 동작

HTML 링크를 통해 다양한 동작을 수행할 수 있습니다.

• 이메일 보내기:

  <a href="mailto:test@example.com">메일 보내기</a>

• 전화 걸기:

  <a href="tel:+821012340123">전화 걸기</a>

7. 자주 사용하는 HTML 태그 정리

• 제목 태그: <h1> ~ <h6>
• 본문 태그: <p>
• 줄바꿈 태그: <br>
• 강조 태그: <strong>, <em>
• 취소선 태그: <s>
• 인용 태그: <blockquote>, <q>
• 첨자 태그: <sub>, <sup>
• 수평선 태그: <hr>
• 코드 태그: <pre>, <code>
• 리스트 태그: <ol>, <ul>, <li>
• 테이블 태그: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>
• 링크 태그: <a>

HTML의 기본 개념과 자주 사용하는 태그에 대해 알아보았습니다. 이러한 태그들을 이해하고 적절히 사용하면, 구조적이고 의미 있는 웹 페이지를 만들 수 있습니다. 다양한 HTML 태그를 활용하여 웹 페이지를 더욱 풍부하고 유용하게 만들어 보세요.