HTML 태그 소개: 기본 HTML 태그 이해

제목 태그: <h1> ~ <h6>

• 문서 구획 제목을 나타내는 태그, Heading 태그라고 부름.
• h1 태그는 페이지 내에서 “한 번만” 사용되어야 하고, “구획의 순서”를 지켜야 한다.

<h1>메인 제목</h1>
<h2>서브 제목</h2>

---

문단 태그: <p>

• 하나의 문단을 나타내는 태그.
• 제목 태그와 함께 사용되기도 하고, 단독으로 사용되기도 한다.

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

---

글씨의 두께 조절: <b>, <strong>

• <b>: 의미를 가지지 않고, 단순히 굵은 글씨로 변경.
• <strong>: 굵은 글씨로 변경 후 “강조”의 의미를 부여.

<b>이것은 굵은 글씨입니다.</b>
<strong>이것은 중요한 굵은 글씨입니다.</strong>

---

글씨의 기울기 조절: <i>, <em>

• <i>: 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용.
• <em>: 기울임과 내용에 “강조”를 나타냄.

<i>기울어진 글씨입니다.</i>
<em>강조된 기울어진 글씨입니다.</em>

---

링크 태그: <a>

• 클릭하면 페이지를 이동할 수 있는 링크 요소.
• href 속성: 이동하고자 하는 파일 혹은 URL 지정.
• target 속성: 이동해야 할 링크의 타겟을 새 창(_blank), 현재 창(_self) 등으로 지정.

<a href="https://example.com" target="_blank">방문하기</a>

---

밑줄 태그: <u>

• 글씨에 밑줄을 넣음. 주로 주석을 가지는 단어임을 나타내는데 사용.
• CSS로 스타일링하여 “오타”를 나타내는 것 처럼 사용 가능.

<u>밑줄이 있는 글씨입니다.</u>

---

이미지 태그: <img>

• 문서 내에 이미지를 넣을 수 있는 태그.
• src: 이미지의 경로 지정.
• alt: 이미지 로딩에 문제가 발생했을 때 대체 텍스트 제공.

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

---

그룹화 태그: <figure>, <figcaption>

• 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있음.
• <figcaption>: 콘텐츠의 설명 혹은 범례 추가 가능.

<figure>
  <img src="image.jpg" alt="설명 텍스트">
  <figcaption>이미지에 대한 설명입니다.</figcaption>
</figure>

---

비디오 태그: <video>

• 문서 내에 영상을 첨부할 수 있음.
• src: 비디오 경로 지정.
• poster: 비디오 로드 전 보여질 포스터 이미지 설정.

<video src="movie.mp4" poster="poster.jpg" controls></video>

---

오디오 태그: <audio>

• 문서 내에 소리를 첨부할 수 있는 태그.
• src: 소리 경로 지정.
• controls: 재생/정지 버튼 등의 컨트롤러 표시.

<audio src="sound.mp3" controls></audio>

---

목록 태그: <ul>, <li>

• 정렬되지 않은 목록을 그림.
• <li>: 목록 항목 구성.

<ul>
  <li>목록 항목 1</li>
  <li>목록 항목 2</li>
</ul>

---

설명 목록 태그: <dl>, <dt>, <dd>

• 설명 목록을 나타내는 태그.
• <dt>: 설명할 단어 혹은 내용.
• <dd>: 설명 내용 작성.

<dl>
  <dt>용어</dt>
  <dd>용어에 대한 설명입니다.</dd>
</dl>

---

표 태그: <table>, <tr>, <td>, <thead>, <tfoot>, <caption>

• 표를 만들고 관리하는 태그.
• <tr>: 행 구분.
• <td>: 열 생성.
• <thead>, <tfoot>: 표의 헤더와 푸터 그룹화.
• <caption>: 표에 대한 설명 추가.

<table>
  <caption>표 설명</caption>
  <thead>
    <tr><th>헤더 1</th><th>헤더 2</th></tr>
  </thead>
  <tbody>
    <tr><td>데이터 1</td><td>데이터 2</td></tr>
  </tbody>
</table>

---

기타 폼 태그: <form>, <input>, <label>, <select>, <textarea>, <button>

• 사용자에게 정보를 입력 받거나 선택할 수 있게 함.
• <input>: 다양한 입력 유형 제공 (예: text, checkbox, radio).
• <textarea>: 여러 줄 입력 가능.
• <button>: 클릭 가능한 버튼, 다양한 유형 (reset, submit) 설정 가능.

<form action="/submit">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <textarea rows="4" cols="50">기본 텍스트</textarea>
  <button type="submit">제출</button>
</form>

---

알아두면 좋은 속성

• readonly, required, placeholder, disabled 등의 속성으로 입력 필드의 동작을 조절할 수 있음.

<input type="text" placeholder="이름을 입력하세요" required>