Jay's Cookbook
Menu
  • Tags
  • Categories
  • Projects
Computer Science
OS
Network
Data Structure
Algorithm
Language
Code Architecture
Python
Javascript
Typescript
Java
Backend
Backend Theory
TypeORM
Node.js
NestJS
FastAPI
Frontend
HTML/CSS
React
Next.js
Data Engineering
DE Theory
MySQL
MongoDB
Elastic
Redis
Kafka
Spark
Airflow
AI
Basic
Pytorch
NLP
Computer Vision
Data Analytics
Statistics
Pandas
Matplotlib
DevOps
Git
Docker
Kubernetes
AWS
[HTML]: <body>에 들어가는 태그
frontend
HTML-CSS

[HTML]: <body>에 들어가는 태그

Jay Kim
Jay Kim 17 Dec 2023
[HTML]: <head>에 들어가는 태그 [CSS]: Intro

Table of Contents

  • HTML <body> 태그와 주요 요소 소개
    • 1. 텍스트 관련 태그
    • 2. 레이아웃 및 구조 태그
    • 3. 멀티미디어 태그
    • 4. 목록 태그
    • 5. 입력 및 폼 태그
    • 6. 링크 및 내비게이션 태그
    • 7. 테이블 태그
    • ✅ 정리

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> 태그에는 다양한 요소가 포함될 수 있으며, 주로 다음과 같은 카테고리로 나눌 수 있다.

  1. 텍스트 관련 태그 (<h1>, <p>, <strong> 등)
  2. 레이아웃 및 구조 태그 (<div>, <section>, <article> 등)
  3. 멀티미디어 태그 (<img>, <audio>, <video> 등)
  4. 목록 태그 (<ul>, <ol>, <li> 등)
  5. 입력 및 폼 태그 (<form>, <input>, <button> 등)
  6. 링크 및 내비게이션 태그 (<a>, <nav> 등)
  7. 테이블 태그 (<table>, <tr>, <td> 등)

이 태그들을 적절히 활용하면 의미 있고 체계적인 웹 페이지를 만들 수 있다. 🚀

[HTML]: <head>에 들어가는 태그 [CSS]: Intro

You may also like

See all HTML-CSS
01 Mar 2024 [CSS] Layout: 플렉스(flex)
frontend
HTML-CSS

[CSS] Layout: 플렉스(flex)

20 Feb 2024 [CSS]: 선택자(selector)
frontend
HTML-CSS

[CSS]: 선택자(selector)

17 Feb 2024 [CSS]: 함수(func)
frontend
HTML-CSS

[CSS]: 함수(func)

Jay Kim

Jay Kim

Web development, data engineering for human for the Earth. I share posts, free resources and inspiration.

Rest
Lifestyle
Hobby
Hobby
Hobby
Hobby
2025 © Jay's Cookbook. Crafted & Designed by Artem Sheludko.