HTML에서 자주 사용되는 태그와 그 사용법

3.1 텍스트 작성하기

3.1.1 hn 태그

• 설명: hn 태그는 HTML에서 제목(Heading)을 정의할 때 사용됩니다. h1부터 h6까지 있으며, 숫자가 작을수록 더 큰 제목을 나타냅니다.
• 사용 시기: 웹 페이지에서 섹션의 제목이나 중요한 내용을 강조할 때 사용합니다.
• 예시:

  <h1>웹 페이지의 주요 제목</h1>
  <h2>섹션 제목</h2>

3.1.2 p 태그

• 설명: p 태그는 단락(Paragraph)을 정의하는 태그입니다.
• 사용 시기: 텍스트를 단락으로 구분할 때 사용합니다.
• 예시:

  <p>이것은 단락입니다.</p>

3.1.3 br 태그

• 설명: br 태그는 줄바꿈(Break)을 삽입하는 태그입니다.
• 사용 시기: 텍스트 내에서 줄을 바꿀 때 사용합니다.
• 예시:

  첫 번째 줄<br>두 번째 줄

3.1.4 blockquote 태그

• 설명: blockquote 태그는 긴 인용문을 표시할 때 사용됩니다.
• 사용 시기: 다른 문서나 출처에서 긴 문장을 인용할 때 사용합니다.
• 예시:

  <blockquote>여기에 긴 인용문을 넣습니다.</blockquote>

3.1.5 q 태그

• 설명: q 태그는 짧은 인용문을 표시할 때 사용됩니다.
• 사용 시기: 텍스트 내에서 짧은 인용문을 표시할 때 사용합니다.
• 예시:

  그는 "웹 개발은 재미있다"고 말했다.

3.1.6 ins와 del 태그

• 설명: ins는 삽입된 텍스트를, del은 삭제된 텍스트를 표시합니다.
• 사용 시기: 텍스트의 수정 내역을 보여줄 때 사용합니다.
• 예시:

  <del>이 문장은 삭제되었습니다.</del>
  <ins>이 문장은 추가되었습니다.</ins>

3.1.7 sub와 sup 태그

• 설명: sub 태그는 아래첨자(Subscript)를, sup 태그는 위첨자(Superscript)를 표시합니다.
• 사용 시기: 화학식이나 수학적 표현을 할 때 사용합니다.
• 예시:

  H<sub>2</sub>O (물의 화학식)
  x<sup>2</sup> + y<sup>2</sup> (수학적 표현)

3.2 그룹 짓기

3.2.1 div 태그

• 설명: div 태그는 블록 레벨 요소를 그룹화하는 데 사용됩니다.
• 사용 시기: 여러 요소를 묶어 스타일이나 레이아웃을 적용할 때 사용합니다.
• 예시:

  <div>
    <h1>제목</h1>
    <p>단락 내용</p>
  </div>

3.2.2 span 태그

• 설명: span 태그는 인라인 요소를 그룹화하는 데 사용됩니다.
• 사용 시기: 텍스트의 일부에 스타일을 적용할 때 사용합니다.
• 예시:

  <p>이 문장은 <span style="color: red;">빨간색</span>입니다.</p>

3.3 목록 만들기

3.3.1 ul 태그

• 설명: ul 태그는 순서가 없는 목록(Unordered List)을 만듭니다.
• 사용 시기: 항목에 순서가 필요 없는 목록을 만들 때 사용합니다.
• 예시:

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

3.3.2 ol 태그

• 설명: ol 태그는 순서가 있는 목록(Ordered List)을 만듭니다.
• 사용 시기: 항목에 순서가 필요한 목록을 만들 때 사용합니다.
• 예시:

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

3.3.3 dl 태그

• 설명: dl 태그는 정의 목록(Definition List)을 만듭니다. dt(정의 용어)와 dd(정의 설명)로 구성됩니다.
• 사용 시기: 용어와 그 정의를 나열할 때 사용합니다.
• 예시:

  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
  </dl>

3.4 링크와 이미지 넣기

3.4.1 a 태그

• 설명: a 태그는 하이퍼링크를 만듭니다.
• 사용 시기: 다른 페이지나 리소스로 이동할 때 사용합니다.
• 예시:

  <a href="https://example.com">여기를 클릭하세요</a>

3.4.2 img 태그

• 설명: img 태그는 이미지를 삽입하는 태그입니다.
• 사용 시기: 웹 페이지에 이미지를 삽입할 때 사용합니다.
• 예시:

  <img src="image.jpg" alt="설명 텍스트">

3.4.3 이미지 링크

• 설명: 이미지를 클릭하면 다른 페이지로 이동하는 링크를 만듭니다.
• 사용 시기: 이미지에 링크를 적용하고 싶을 때 사용합니다.
• 예시:

  <a href="https://example.com">
    <img src="image.jpg" alt="설명 텍스트">
  </a>

3.5 텍스트 강조하기

3.5.1 strong 태그

• 설명: strong 태그는 중요한 텍스트를 굵게 표시합니다.
• 사용 시기: 중요성을 강조하고 싶을 때 사용합니다.
• 예시:

  <p><strong>중요:</strong> 이 문장은 중요합니다.</p>

3.5.2 em 태그

• 설명: em 태그는 텍스트를 기울여 강조합니다.
• 사용 시기: 강조하고 싶은 텍스트에 사용합니다.
• 예시:

  <p>이 문장은 <em>강조</em>되었습니다.</p>

3.6 폼 구성하기

3.6.1 form 태그

• 설명: form 태그는 사용자 입력을 받을 수 있는 양식을 만듭니다.
• 사용 시기: 데이터를 서버로 전송할 때 사용합니다.
• 예시:

  <form action="/submit" method="post">
    <input type="text" name="name">
    <button type="submit">제출</button>
  </form>

3.6.2 input 태그

• 설명: input 태그는 사용자가 데이터를 입력할 수 있는 여러 유형의 입력 필드를 만듭니다.
• 사용 시기: 텍스트 입력, 라디오 버튼, 체크박스 등 다양한 입력 방식을 제공할 때 사용합니다.
• 예시:

  <input type="text" name="username">
  <input type="password" name="password">

3.6.3 label 태그

• 설명: label 태그는 입력 필드에 대한 설명을 제공합니다.
• **사용 시기

**: 폼 요소에 레이블을 연결할 때 사용합니다.

• 예시:

  <label for="username">사용자 이름:</label>
  <input type="text" id="username" name="username">

3.6.4 fieldset와 legend 태그

• 설명: fieldset 태그는 폼 요소 그룹을, legend 태그는 그룹의 제목을 정의합니다.
• 사용 시기: 폼을 논리적인 섹션으로 나눌 때 사용합니다.
• 예시:

  <fieldset>
    <legend>개인 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
  </fieldset>

3.6.5 textarea 태그

• 설명: textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 필드를 제공합니다.
• 사용 시기: 사용자가 긴 텍스트를 입력할 때 사용합니다.
• 예시:

  <textarea name="message" rows="4" cols="50"></textarea>

3.6.6 select, option, optgroup 태그

• 설명: select는 드롭다운 목록을, option은 목록의 항목을, optgroup은 항목 그룹을 만듭니다.
• 사용 시기: 선택 항목이 많은 경우 사용합니다.
• 예시:

  <select name="options">
    <optgroup label="그룹 1">
      <option value="1">옵션 1</option>
      <option value="2">옵션 2</option>
    </optgroup>
    <optgroup label="그룹 2">
      <option value="3">옵션 3</option>
    </optgroup>
  </select>

3.6.7 button 태그

• 설명: button 태그는 클릭할 수 있는 버튼을 만듭니다.
• 사용 시기: 폼 전송 또는 기타 액션을 트리거할 때 사용합니다.
• 예시:

  <button type="submit">제출</button>

3.6.8 폼 관련 태그에서 사용할 수 있는 추가 속성

• 설명: 폼 요소에서 사용할 수 있는 다양한 추가 속성(required, disabled 등)입니다.
• 사용 시기: 폼 요소의 동작을 제어할 때 사용합니다.
• 예시:

  <input type="text" name="email" required>

3.7 표 만들기

3.7.1 table 태그

• 설명: table 태그는 표를 만듭니다.
• 사용 시기: 데이터를 행과 열로 정리하여 표시할 때 사용합니다.
• 예시:

  <table>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
    <tr>
      <td>홍길동</td>
      <td>30</td>
    </tr>
  </table>

3.7.2 caption 태그

• 설명: caption 태그는 표의 제목을 정의합니다.
• 사용 시기: 표에 제목을 추가할 때 사용합니다.
• 예시:

  <table>
    <caption>사용자 목록</caption>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
    <tr>
      <td>홍길동</td>
      <td>30</td>
    </tr>
  </table>

3.7.3 tr 태그

• 설명: tr 태그는 표의 행(Row)을 정의합니다.
• 사용 시기: 표에서 새로운 행을 만들 때 사용합니다.
• 예시:

  <tr>
    <td>홍길동</td>
    <td>30</td>
  </tr>

3.7.4 th, td 태그

• 설명: th 태그는 표의 헤더 셀, td 태그는 표의 데이터 셀을 정의합니다.
• 사용 시기: 표의 헤더와 데이터를 각각 표시할 때 사용합니다.
• 예시:

  <th>이름</th>
  <td>홍길동</td>

3.7.5 rowspan과 colspan 속성

• 설명: rowspan은 셀을 여러 행에 걸쳐, colspan은 셀을 여러 열에 걸쳐 병합합니다.
• 사용 시기: 복잡한 표에서 셀을 병합할 때 사용합니다.
• 예시:

  <td rowspan="2">병합된 셀</td>

3.7.6 thead, tfoot, tbody 태그

• 설명: thead는 표의 헤더, tfoot은 표의 바닥, tbody는 표의 본문을 정의합니다.
• 사용 시기: 표의 구조를 명확하게 구분하고자 할 때 사용합니다.
• 예시:

  <table>
    <thead>
      <tr>
        <th>이름</th>
        <th>나이</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>홍길동</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>

3.7.7 col과 colgroup 태그

• 설명: col과 colgroup 태그는 표의 열(Column)에 대한 스타일이나 속성을 지정할 때 사용됩니다.
• 사용 시기: 열에 대해 공통 스타일을 적용할 때 사용합니다.
• 예시:

  <colgroup>
    <col style="background-color: lightgray;">
  </colgroup>

3.7.8 scope 속성

• 설명: scope 속성은 th 태그에서 사용되며, 헤더 셀이 어느 범위에 적용되는지를 정의합니다.
• 사용 시기: 접근성을 높이기 위해 사용합니다.
• 예시:

  <th scope="col">이름</th>

3.8 멀티미디어 설정하기

3.8.1 audio 태그

• 설명: audio 태그는 오디오 파일을 삽입하는 태그입니다.
• 사용 시기: 웹 페이지에 오디오 콘텐츠를 추가할 때 사용합니다.
• 예시:

  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>

3.8.2 video 태그

• 설명: video 태그는 비디오 파일을 삽입하는 태그입니다.
• 사용 시기: 웹 페이지에 비디오 콘텐츠를 추가할 때 사용합니다.
• 예시:

  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>

3.8.3 source 태그

• 설명: source 태그는 audio나 video 태그 내에서 미디어 파일의 여러 형식을 제공할 때 사용됩니다.
• 사용 시기: 다양한 형식의 미디어를 제공할 때 사용합니다.
• 예시:

  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
  </audio>

3.9 웹 페이지 구조를 설계하는 시맨틱 태그

3.9.1 header 태그

• 설명: header 태그는 문서나 섹션의 머리말을 정의합니다.
• 사용 시기: 페이지나 섹션의 헤더를 정의할 때 사용합니다.
• 예시:

  <header>
    <h1>웹 페이지 제목</h1>
  </header>

3.9.2 nav 태그

• 설명: nav 태그는 네비게이션 링크를 정의합니다.
• 사용 시기: 주요 탐색 링크를 그룹화할 때 사용합니다.
• 예시:

  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>

3.9.3 section 태그

• 설명: section 태그는 문서의 일반적인 섹션을 정의합니다.
• 사용 시기: 문서의 주요 부분을 논리적으로 나눌 때 사용합니다.
• 예시:

  <section>
    <h2>소개</h2>
    <p>이것은 소개 섹션입니다.</p>
  </section>

3.9.4 article 태그

• 설명: article 태그는 독립적으로 구분될 수 있는 콘텐츠를 정의합니다.
• 사용 시기: 블로그 글이나 뉴스 기사와 같이 독립적인 콘텐츠를 작성할 때 사용합니다.
• 예시:

  <article>
    <h2>블로그 글 제목</h2>
    <p>이것은 블로그 글 내용입니다.</p>
  </article>

3.9.5 aside 태그

• 설명: aside 태그는 본문 콘텐츠와는 다소 관련이 없는 추가 정보를 제공합니다.
• 사용 시기: 부가적인 정보나 사이드바를 제공할 때 사용합니다.
• 예시:

  <aside>
    <h2>관련 기사</h2>
    <p>이것은 관련 기사입니다.</p>
  </aside>

3.9.6 footer 태그

• 설명: footer 태그는 문서나 섹션의 바닥글을 정의합니다.
• 사용 시기: 저작권 정보나 연락처 정보 등을 제공할 때 사용합니다.
• 예시:

  <footer>
    <p>저작권 © 2024 모든 권리 보유.</p>
  </footer>

3.9.7 main 태그

• 설명: main 태그는 문서의 주요 콘텐츠를 정의합니다.
• 사용 시기: 페이지의 주된 내용을 표시할 때 사용합니다.
• 예시:

  <main>
    <h1>주요 콘텐츠</h1>
    <p>이것은 주요 콘텐츠입니다.</p>
  </main>

3.10 태그 종류에 상관없이 사용하는 글로벌 속성

• 설명: HTML 요소에 공통적으로 적용할 수 있는 속성들입니다. 예를 들어, class, id, style, title, data-* 속성 등이 있습니다.
• 사용 시기: 특정 태그에 구애받지 않고 공통적으로 스타일이나 식별자를 지정하고자 할 때 사용합니다.
• 예시:

  <p id="paragraph1" class="text-large" title="이것은 문단입니다.">문단 내용</p>