HTML <body> 태그

정의와 사용법

<body> body 태그는 문서의 주체를 정의합니다.

HTML 문서의 메타데이터와 문서 정보는 head 요소에 포함되며, 문서의 내용은 body 요소에 포함됩니다.

body 요소는 항상 head 요소 뒤에 위치하며, html 요소의 두 번째 자식 요소입니다.

<body> 요소는 모든 HTML 문서의 내용을 포함합니다. 예를 들어, 제목, 문단, 이미지, 링크, 테이블, 목록 등.

주의:HTML 문서에서는 하나의 <body> 요소.

예제

간단하지만 완벽한 HTML 문서:

<!DOCTYPE html>
<html>
  <head>
    <title>문서 제목</title>
  </head>
  <body>
    <h1>이는 제목입니다</h1>
    <p>이는 문단입니다.</p>
  </body>
</html>

직접 시험해보세요

푸트:페이지 하단에 더 많은 예제가 제공됩니다。

전역 속성

<body> 태그는 이벤트 속성을 지원합니다 HTML에서의 전역 속성。

이벤트 속성

<body> 태그는 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음과 같은 기본값으로 표시합니다 <body> 요소:

body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}

직접 시험해보세요

더 많은 예제

예제 1

문서에 배경이미지를 추가합니다 (CSS를 사용하여):

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">codew3c.com에 방문하세요!</a></p>
</body>

직접 시험해보세요

예제 2

문서의 배경색상을 설정합니다 (CSS를 사용하여):

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">codew3c.com에 방문하세요!</a></p>
</body>

직접 시험해보세요

예제 3

문서의 텍스트 색상을 설정합니다 (CSS를 사용하여):

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>이는 일단 텍스트입니다.</p>
<p><a href="">codew3c.com에 방문하세요!</a></p>
</body>
</html>

직접 시험해보세요

예제 4

문서에서 방문하지 않은 링크의 색상을 설정합니다 (CSS 사용):

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML 강의</a></p>
</body>
</html>

직접 시험해보세요

예제 5

문서에서 활성 링크의 색상을 설정합니다 (CSS 사용):

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML 강의</a></p>
</body>
</html>

직접 시험해보세요

예제 6

문서에서 방문한 링크의 색상을 설정합니다 (CSS 사용):

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML 강의</a></p>
</body>
</html>

직접 시험해보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원