![[HTML]: <body>에 들어가는 태그](/images/htmlcss_logo.png){kind=logo}
Table of Contents
HTML <body> 태그와 주요 요소 소개
<body> 태그는 HTML 문서에서 사용자가 실제로 볼 수 있는 콘텐츠를 포함하는 부분이다. 웹 페이지의 구조를 구성하는 다양한 태그들이 여기에 포함된다. 이번 글에서는 <body> 태그 내부에서 자주 사용되는 태그들을 카테고리별로 살펴보자.
1. 텍스트 관련 태그
웹 페이지에서 문장을 표시할 때 사용하는 태그들이다.
| 태그 | 설명 |
|---|---|
<h1> ~ <h6> |
제목 태그 (숫자가 작을수록 중요도가 높음) |
<p> |
단락(문단)을 생성하는 태그 |
<span> |
인라인 텍스트를 그룹화할 때 사용 |
<strong> |
강조된 텍스트 (굵게 표시됨) |
<em> |
기울임꼴로 표시되는 강조 텍스트 |
✅ 예시
<h1>웹 개발을 배워보자</h1>
<p>HTML은 웹의 기초 언어입니다.</p>
<strong>중요한 내용</strong>을 강조할 수도 있습니다.
2. 레이아웃 및 구조 태그
페이지의 섹션을 나누고 레이아웃을 구성할 때 사용하는 태그들이다.
| 태그 | 설명 |
|---|---|
<div> |
블록 레벨 컨테이너 (레이아웃을 잡을 때 사용) |
<section> |
주제별 섹션을 정의 |
<article> |
독립적인 콘텐츠를 나타냄 (예: 블로그 글) |
<aside> |
사이드바 또는 부가 정보 표시 |
<header> |
문서 또는 섹션의 머리글 |
<footer> |
문서 또는 섹션의 바닥글 |
<nav> |
내비게이션 링크 그룹 |
✅ 예시
<header>
<h1>내 웹사이트</h1>
</header>
<nav>
<a href="#">홈</a> | <a href="#">소개</a>
</nav>
<section>
<article>
<h2>첫 번째 글</h2>
<p>이것은 기사 내용입니다.</p>
</article>
</section>
<footer>
<p>© 2025 My Website</p>
</footer>
3. 멀티미디어 태그
이미지, 오디오, 비디오 등의 멀티미디어 요소를 삽입할 때 사용된다.
| 태그 | 설명 |
|---|---|
<img> |
이미지를 삽입하는 태그 |
<audio> |
오디오 파일을 삽입하는 태그 |
<video> |
비디오 파일을 삽입하는 태그 |
✅ 예시
<img src="image.jpg" alt="예제 이미지">
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<video controls width="300">
<source src="video.mp4" type="video/mp4">
</video>
4. 목록 태그
항목을 나열할 때 사용하는 태그들이다.
| 태그 | 설명 |
|---|---|
<ul> |
순서 없는 리스트 (●, ○, ■) |
<ol> |
순서 있는 리스트 (1, 2, 3) |
<li> |
리스트 항목을 정의 |
✅ 예시
<ul>
<li>HTML 배우기</li>
<li>CSS 배우기</li>
<li>JavaScript 배우기</li>
</ul>
5. 입력 및 폼 태그
사용자로부터 데이터를 입력받을 때 사용하는 태그들이다.
| 태그 | 설명 |
|---|---|
<form> |
사용자 입력을 제출하는 폼 생성 |
<input> |
다양한 타입의 입력 필드 생성 |
<textarea> |
여러 줄 입력을 받는 필드 |
<button> |
버튼을 생성 |
<select> |
드롭다운 메뉴 생성 |
<option> |
<select> 안에서 선택 항목을 정의 |
✅ 예시
<form action="submit.php" method="POST">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<button type="submit">제출</button>
</form>
6. 링크 및 내비게이션 태그
웹 페이지 간 이동을 할 수 있도록 하는 태그들이다.
| 태그 | 설명 |
|---|---|
<a> |
다른 페이지로 이동하는 하이퍼링크 |
<nav> |
내비게이션 링크 그룹 |
✅ 예시
<a href="https://www.example.com">Example 사이트로 이동</a>
7. 테이블 태그
표 형태의 데이터를 정리할 때 사용하는 태그들이다.
| 태그 | 설명 |
|---|---|
<table> |
테이블을 생성 |
<tr> |
행을 생성 |
<td> |
데이터를 담는 셀 생성 |
<th> |
테이블 헤더 셀 생성 |
<thead> |
테이블의 머리글 영역 |
<tbody> |
테이블의 본문 영역 |
<tfoot> |
테이블의 바닥글 영역 |
✅ 예시
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>25</td>
</tr>
</tbody>
</table>
✅ 정리
HTML <body> 태그에는 다양한 요소가 포함될 수 있으며, 주로 다음과 같은 카테고리로 나눌 수 있다.
- 텍스트 관련 태그 (
<h1>,<p>,<strong>등) - 레이아웃 및 구조 태그 (
<div>,<section>,<article>등) - 멀티미디어 태그 (
<img>,<audio>,<video>등) - 목록 태그 (
<ul>,<ol>,<li>등) - 입력 및 폼 태그 (
<form>,<input>,<button>등) - 링크 및 내비게이션 태그 (
<a>,<nav>등) - 테이블 태그 (
<table>,<tr>,<td>등)
이 태그들을 적절히 활용하면 의미 있고 체계적인 웹 페이지를 만들 수 있다. 🚀