💡 퀵 접속: htm.kr/body

HTML5 Body 태그 사용법

1. Body 태그란?

Body 태그는 HTML 문서의 본문을 포함하는 컨테이너로, 웹 페이지에 표시되는 모든 콘텐츠(텍스트, 이미지, 링크 등)를 담고 있습니다.

2. 기본 구조

Body 태그의 기본 사용법

<body>
    <header>
        <h1>제목</h1>
        <nav>네비게이션</nav>
    </header>
    
    <main>
        <article>
            <h2>본문 제목</h2>
            <p>본문 내용</p>
        </article>
    </main>
    
    <footer>
        <p>푸터 내용</p>
    </footer>
</body>

3. Body 태그 내 주요 요소

태그 설명 사용 예시
header 페이지 상단 영역 <header>로고, 네비게이션</header>
main 주요 콘텐츠 영역 <main>본문 내용</main>
footer 페이지 하단 영역 <footer>저작권 정보</footer>
section 콘텐츠 섹션 <section>관련 콘텐츠 그룹</section>
article 독립적인 콘텐츠 <article>블로그 포스트</article>

4. 자주 사용되는 속성

<body onload="init()">
<body class="dark-theme">
<body id="main-content">
<body style="background-color: #f0f0f0;">

💡 주의사항

  • body 태그는 html 태그 내에 하나만 존재해야 합니다.
  • 시맨틱 태그를 적절히 사용하여 문서 구조를 명확히 합니다.
  • 접근성을 고려한 마크업을 사용합니다.
  • 불필요한 중첩을 피합니다.
  • 스크립트는 가능한 body 태그 끝에 배치합니다.

5. 시맨틱 구조 예제

<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>메인 제목</h1>
            <section>
                <h2>섹션 제목</h2>
                <p>섹션 내용</p>
            </section>
        </article>
    </main>

    <aside>
        <h3>사이드바</h3>
        <ul>
            <li>관련 링크 1</li>
            <li>관련 링크 2</li>
        </ul>
    </aside>

    <footer>
        <p>© 2024 웹사이트. All rights reserved.</p>
    </footer>
</body>

6. 성능 최적화 팁

  • 불필요한 div 태그 사용 최소화
  • 시맨틱 태그 적절히 활용
  • 이미지 최적화
  • CSS와 JavaScript 파일 최적화
  • 레이아웃 구조 단순화

7. 검증 및 테스트

Body 태그가 올바르게 구성되었는지 확인하는 방법:

  • W3C 마크업 검증 서비스 사용
  • 접근성 검사 도구 사용
  • 다양한 브라우저에서 테스트
  • 반응형 디자인 테스트
  • 페이지 로딩 속도 테스트