💡 퀵 접속: htm.kr/div

HTML5 Div 태그 사용법

1. Div 태그란?

Div 태그는 HTML 문서에서 컨테이너 역할을 하는 블록 레벨 요소입니다. 다른 HTML 요소들을 그룹화하고, CSS를 사용하여 스타일링과 레이아웃을 구성하는데 사용됩니다.

2. 기본 구조

Div 태그의 기본 사용법

<div class="container">
    <div class="header">
        <h1>웹사이트 제목</h1>
    </div>
    
    <div class="content">
        <p>본문 내용</p>
    </div>
    
    <div class="footer">
        <p>푸터 내용</p>
    </div>
</div>

3. 자주 사용되는 속성

속성 설명 예시
class CSS 클래스 지정 <div class="container">
id 고유 식별자 <div id="main">
style 인라인 스타일 <div style="color: red;">

4. 실제 사용 예제

<!-- 기본 레이아웃 구조 -->
<div class="page-wrapper">
    <div class="header">
        <div class="logo">
            <img src="logo.png" alt="로고">
        </div>
        <div class="navigation">
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">서비스</a></li>
                <li><a href="#">연락처</a></li>
            </ul>
        </div>
    </div>
    
    <div class="main-content">
        <div class="sidebar">
            <h3>사이드바</h3>
            <ul>
                <li>메뉴 1</li>
                <li>메뉴 2</li>
            </ul>
        </div>
        
        <div class="content">
            <h2>본문 제목</h2>
            <p>본문 내용...</p>
        </div>
    </div>
    
    <div class="footer">
        <p>© 2024 웹사이트. All rights reserved.</p>
    </div>
</div>

💡 주의사항

  • div는 의미론적 가치가 없는 컨테이너입니다.
  • 가능한 시맨틱 태그를 우선 사용합니다.
  • 불필요한 div 중첩을 피합니다.
  • class와 id는 의미있게 명명합니다.
  • 접근성을 고려한 마크업을 사용합니다.

5. 스타일링 예제

<style>
    .page-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
    }
    
    .main-content {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 20px;
        margin: 20px 0;
    }
    
    .sidebar {
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 4px;
    }
    
    .content {
        background-color: white;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .footer {
        text-align: center;
        padding: 20px 0;
        border-top: 1px solid #ddd;
        color: #666;
    }
    
    /* 반응형 디자인 */
    @media (max-width: 768px) {
        .main-content {
            grid-template-columns: 1fr;
        }
    }
</style>

6. 성능 최적화 팁

  • 불필요한 div 중첩을 피합니다.
  • 시맨틱 태그를 적절히 사용합니다.
  • CSS 선택자를 효율적으로 사용합니다.
  • class와 id는 의미있게 명명합니다.
  • 접근성을 고려한 마크업을 사용합니다.

7. 검증 및 테스트

Div 태그가 올바르게 사용되었는지 확인하는 방법:

  • W3C 마크업 검증 서비스 사용
  • 시맨틱 태그 사용 검토
  • 다양한 브라우저에서 테스트
  • 반응형 디자인 테스트
  • 접근성 검사 도구 사용