HTML 본문의 핵심, body 태그

콘텐츠 목차

웹페이지의 본문을 품는 그릇, `<body>` 태그 완전정복

<body> 태그는 HTML 문서의 본문 내용을 감싸는 아주 핵심적인 태그입니다. 우리가 웹브라우저에서 보는 텍스트, 이미지, 버튼, 링크 등 모든 시각적 요소는 <body> 안에 있어야 화면에 표시됩니다.

이 태그는 <html> 태그 내부에서 <head>와 함께 등장하며, 실제 사용자에게 보여지는 영역은 <body> 부분이 담당하죠. 즉, 웹페이지의 얼굴과 같은 역할입니다.

<body> 태그는 반드시 <html> 안에서 <head> 다음에 위치해야 하며, 문서마다 단 한 번만 사용됩니다. 중복 사용은 문법 오류로 간주되고, 브라우저가 예측하여 렌더링할 수는 있지만 예상치 못한 결과를 낳을 수 있어요.

<!DOCTYPE html>
<html>
  <head>
    <title>페이지 제목</title>
  </head>
  <body>
    <h1>여기가 본문입니다</h1>
    <p>이곳에 모든 콘텐츠를 작성해요.</p>
  </body>
</html>

Tip 💡
하나의 문서에는 <body> 태그가 반드시 하나만 존재해야 하며, 그렇지 않으면 브라우저가 구조를 제대로 해석하지 못할 수 있어요.

<body> 안에는 거의 모든 콘텐츠 요소가 들어갑니다. 예를 들어 <div>, <p>, <h1>, <a>, <img>, <section>, <script> 등 구조적, 시각적, 기능적 태그들이 모두 이 안에서 동작합니다.

<body>
  <h1>환영합니다!</h1>
  <p>이 페이지는 HTML 구조를 설명합니다.</p>
  <img src="beaver.png" alt="비버 이미지">
</body>

CSS에서 body 선택자는 전체 문서에 스타일을 적용할 때 자주 사용됩니다. 글꼴, 배경색, 기본 마진 등을 설정해 전체적인 분위기를 결정할 수 있죠.

body {
  background-color: #fffbe6;
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  padding: 0;
}

Tip 💡
body 태그에 기본 스타일을 미리 지정해두면, 전체 페이지의 통일감 있는 디자인을 빠르게 만들 수 있어요.

자바스크립트는 보통 <body> 끝 부분에 작성되거나 연결됩니다. 이렇게 하면 문서의 콘텐츠가 먼저 로드되고, 그 후에 스크립트가 실행되어 성능에 유리하죠.

<body>
  ...
  <script src="main.js"></script>
</body>

<body> 태그는 단순한 태그처럼 보이지만, 실제로는 웹페이지 콘텐츠의 모든 것을 담아내는 그릇입니다. 제대로 구조를 짜고, 콘텐츠를 배치하고, 스타일을 입히는 과정 모두가 <body> 안에서 일어나죠.

이 태그의 역할을 명확히 이해하고 나면, 웹페이지 구성에 대한 전체적인 감각도 함께 자라게 됩니다. 앞으로 다양한 태그들을 배워가면서도, 모든 것이 <body> 안에서 펼쳐진다는 점을 꼭 기억해주세요.