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>

💡 주의사항

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. 성능 최적화 팁

7. 검증 및 테스트

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