HTML <body> 태그
예시
간단한 HTML 문서:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
<body>태그는 문서의 본문을 정의합니다 .
<body>요소에는 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같은 HTML 문서의 모든 내용이 포함됩니다 .
참고:<body>
HTML 문서에는 하나의 요소만 있을 수 있습니다 .
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <body> | Yes | Yes | Yes | Yes | Yes |
전역 속성
<body>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<body>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
문서에 배경 이미지 추가(CSS 사용):
<html>
<head>
<style>
body {
background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
예시
문서의 배경색 설정(CSS 사용):
<html>
<head>
<style>
body {
background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
예시
문서의 텍스트 색상 설정(CSS 사용):
<html>
<head>
<style>
body {
color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>This is some text.</p>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
</html>
예시
문서에서 방문하지 않은 링크의 색상 설정(CSS 사용):
<html>
<head>
<style>
a:link {
color:#0000FF;
}
</style>
</head>
<body>
<p><a
href="https://www.w3schools.com">W3Schools.com</a></p>
<p><a
href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
</body>
</html>
예시
문서의 활성 링크 색상 설정(CSS 사용):
<html>
<head>
<style>
a:active {
color:#00FF00;
}
</style>
</head>
<body>
<p><a
href="https://www.w3schools.com">W3Schools.com</a></p>
<p><a
href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
</body>
</html>
예시
문서에서 방문한 링크의 색상 설정(CSS 사용):
<html>
<head>
<style>
a:visited {
color:#FF0000;
}
</style>
</head>
<body>
<p><a
href="https://www.w3schools.com">W3Schools.com</a></p>
<p><a
href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
</body>
</html>
관련 페이지
HTML 튜토리얼: HTML 요소
HTML DOM 참조: 본문 개체
HTML DOM 참조: document.body 속성
기본 CSS 설정
대부분의 브라우저는 <body>다음 기본값으로 요소를 표시합니다.
예시
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}