2024. 10. 13. 22:05ㆍFront-End의 모든것/HTML
안녕하세요 여러분!
이전시간의 head태그에 대해서 알아보았는데요,
오늘은 작업의 주된 본문을 담는 부분인
<Body> 태그에 대해서 알아보고자 합니다 !
퍼블리셔나 프론트엔드 개발자로서는 HTML작업시 주된 작업영역이 될 수 있죠
자 지금부터 body태그에 대해서 상세히 알아보시죠!
1️⃣ Body 태그란?
HTML의 <body> 태그는 웹 페이지의 본문(content)을 담는 요소로, 사용자가 브라우저에서 볼 수 있는 모든 콘텐츠가 이 안에 포함됩니다. 즉, 텍스트, 이미지, 비디오, 링크, 폼, 인터랙티브한 콘텐츠 등 대부분의 웹 페이지 요소들이 <body> 태그 안에 위치합니다.
2️⃣ 주요 특징
- 문서 구조: <body>는 HTML 문서에서 <html> 태그의 하위 요소로서, <head>와 나란히 HTML 문서의 큰 구조를 형성합니다.
- 시각적 콘텐츠 포함: HTML 문서의 시각적 콘텐츠는 모두 <body> 태그 내에 위치합니다.
- 브라우저 렌더링: 웹 페이지를 불러올 때, 브라우저는 <head>에 있는 메타데이터를 처리한 후, <body> 태그 안에 있는 내용을 렌더링하여 사용자에게 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이곳은 body 태그입니다.</p>
</body>
</html>
3️⃣ 주요 <body> 태그 내의 HTML 요소들
1. 텍스트 관련 태그
- <h1> ~ <h6>: 제목을 나타내는 태그로, <h1>이 가장 큰 제목이고 <h6>이 가장 작은 제목입니다.
- <p>: 단락(문단)을 나타냅니다. 일반 텍스트는 이 태그로 감쌉니다.
- <a>: 하이퍼링크를 나타내며, 다른 웹 페이지나 리소스로 연결할 수 있습니다.
<a href="https://www.example.com" target="_blank">Example</a>
- <span>: 인라인 요소로, 특정 텍스트를 구분하거나 스타일을 적용할 때 사용합니다.
- <div>: 블록 요소로, 섹션이나 그룹을 만들 때 사용합니다. 스타일이나 레이아웃 구성을 위한 컨테이너 역할을 자주 합니다.
2. 이미지 및 멀티미디어 태그
- <img>: 이미지를 삽입할 때 사용됩니다. src 속성으로 이미지의 경로를 지정합니다.
<img src="image.jpg" alt="이미지 설명">
- <video>: 비디오 콘텐츠를 삽입할 때 사용합니다. 다양한 속성을 통해 자동 재생, 반복 재생 등을 설정할 수 있습니다.
- <audio>: 오디오 파일을 삽입할 때 사용합니다.
3. 리스트 태그
- <ul>: 순서 없는 리스트를 나타냅니다. 목록 항목은 <li> 태그로 감쌉니다.
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
- <ol>: 순서 있는 리스트를 나타냅니다.
- <li>: 리스트 항목을 정의하는 태그입니다. <ul>이나 <ol> 안에 사용됩니다.
4. 폼 관련 태그
- <form>: 사용자의 입력을 서버로 전송하는 양식을 정의합니다.
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">제출</button>
</form>
- <input>: 사용자가 데이터를 입력할 수 있는 필드를 만듭니다. 텍스트, 비밀번호, 이메일 등 여러 가지 유형이 있습니다.
- <textarea>: 여러 줄의 텍스트 입력 필드를 제공합니다.
- <button>: 클릭할 수 있는 버튼을 정의합니다.
5. 테이블 태그
- <table>: 표를 정의합니다.
<table>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
</table>
- <tr>: 표의 행을 나타냅니다.
- <th>: 표의 헤더 셀을 정의합니다.
- <td>: 표의 데이터를 나타내는 셀입니다.
6. 섹션 및 아티클 태그
- <section>: 문서 내의 섹션을 정의하며, 주제별로 그룹화할 때 사용합니다.
- <article>: 독립적인 콘텐츠를 나타냅니다. 블로그 글, 뉴스 기사 등 개별 콘텐츠 블록을 표시할 때 사용됩니다.
- <aside>: 주요 콘텐츠와는 별도로 관련된 정보나 사이드바와 같은 보조 정보를 나타냅니다.
- <header>: 문서나 섹션의 헤더(머리말) 영역을 정의합니다.
- <footer>: 문서나 섹션의 푸터(바닥글)를 정의합니다.
웹 페이지에서 사용자와 상호작용하는 요소들이 대부분 <body> 태그 안에 들어갑니다
쉽게 말해 태그이름처럼 페이지의 몸통 역할을 하고있다고 보시면 이해하기 쉬울것같아요!
지금까지 body 태그에 대해서 간략하게 알아보았는데요,
태그의 종류는 주로 사용되는 것만 간략히 설명드린 부분이라,
위 내용 이외 혹은 작업 중 궁금하신부분이나
문의사항이 있으시면
`언제든지` 댓글로 남겨주시면
빠르고 정확한 정보로 답변드리겠습니다!
그럼 여기서 전 이만
'Front-End의 모든것 > HTML' 카테고리의 다른 글
| HTML 이란? - nav 태그에 대해서 -6 (1) | 2024.10.16 |
|---|---|
| HTML 이란? - header 태그에 대해서 -5 (1) | 2024.10.15 |
| HTML 이란? - footer 태그에 대해서 -4 (0) | 2024.10.14 |
| HTML 이란? - head 태그에 대해서 -2 (6) | 2024.10.12 |
| HTML 이란? - 기본 개념 및 구조 - 1 (7) | 2024.10.12 |