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 마크업 검증 서비스 사용
- 접근성 검사 도구 사용
- 다양한 브라우저에서 테스트
- 반응형 디자인 테스트
- 페이지 로딩 속도 테스트