728x90
728x90
반응형
HTML <body> 태그란?
<body> 태그는 HTML 문서의 본문(Body) 내용을 정의하는 태그입니다. 즉, 웹페이지에서 사용자가 실제로 보는 모든 콘텐츠(텍스트, 이미지, 링크, 비디오, 테이블 등) 가 <body> 태그 안에 포함됩니다.
주요 특징
- HTML 문서의 필수 요소
- <body> 태그는 모든 HTML 문서에서 반드시 포함되어야 합니다.
- <html> 태그 안에서 <head> 태그와 함께 사용됩니다.
- 브라우저에 표시되는 콘텐츠 포함
- <body> 내부에 작성된 모든 내용(텍스트, 이미지, 버튼, 폼 등)은 브라우저에서 렌더링됩니다.
- 반면 <head> 태그 내부의 내용(메타데이터, 스타일, 스크립트 등)은 직접적으로 표시되지 않습니다.
- CSS 및 JavaScript와 함께 사용 가능
- <body> 태그에는 style 속성을 사용하여 CSS를 직접 적용할 수 있습니다.
- JavaScript를 <body> 태그 안에 포함하여 동적 기능을 추가할 수도 있습니다.
기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML body 태그 예제</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML 문서의 본문입니다.</p>
</body>
</html>※ <body> 안의 내용만 브라우저에서 표시됩니다.
<body> 태그의 속성
| 속성 | 설명 |
| background | (구식 속성) 배경 이미지 설정 (CSS에서 background-image 사용 권장) |
| bgcolor | (구식 속성) 배경색 지정 (CSS에서 background-color 사용 권장) |
| text | (구식 속성) 본문 텍스트 색상 설정 (CSS에서 color 사용 권장) |
| link | (구식 속성) 하이퍼링크 색상 지정 (<a> 태그의 기본 색상) |
| vlink | (구식 속성) 방문한 링크의 색상 지정 |
| onload | 페이지가 로드될 때 실행할 JavaScript 이벤트 핸들러 |
| onunload | 페이지가 언로드(unload)될 때 실행할 JavaScript 이벤트 핸들러 |
background, bgcolor, text, link, vlink 속성은 HTML5에서 더 이상 사용하지 않음 (CSS로 대체).
CSS를 이용한 <body> 스타일링
💡 배경색 변경
<style>
body {
background-color: lightblue;
}
</style>
💡 배경 이미지 추가
<style>
body {
background-image: url("background.jpg");
background-size: cover;
}
</style>
💡 텍스트 스타일 변경
<style>
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
}
</style>
Javascript와 함께 사용
💡 onload 이벤트 활용 (페이지가 로드될 때 사용)
<body onload="alert('페이지가 로드되었습니다!')">페이지가 열릴 때 알림 창이 자동으로 표시됨.
💡 onunload 이벤트 활용 (페이지가 닫힐 때 사용)
<body onunload="alert('페이지를 떠나고 있습니다!')">사용자가 페이지를 닫거나 이동할 때 경고 메시지를 표시.
<body> 태그와 <head> 태그의 차이점
| 태그 | 설명 |
| <head> | 문서의 메타데이터를 포함 (CSS, JavaScript, SEO 관련 정보) |
| <body> | 브라우저에서 표시되는 모든 콘텐츠 포함 (텍스트, 이미지, 버튼 등) |
<html>
<head>
<title>문서 제목</title> <!-- 브라우저 탭에 표시 -->
</head>
<body>
<h1>웹페이지 내용</h1> <!-- 사용자가 보는 콘텐츠 -->
</body>
</html>- <head> 태그 내부의 내용은 브라우저에 직접 표시되지 않음.
- <body> 태그 내부의 내용만 화면에 출력됨.
728x90
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] br 태그 (줄바꿈) (15) | 2025.02.07 |
|---|---|
| [HTML] blockquote 태그 (긴 인용문) (148) | 2025.02.06 |
| [HTML] bdo 태그 (강제 문자 정렬) (72) | 2025.02.06 |
| [HTML] bdi 태그 (문자 정렬 문제 해결) (65) | 2025.02.05 |
| [HTML] base 태그 (상대 경로, 절대 경로) (110) | 2025.02.05 |