반응형 웹 디자인 기초

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 블로그 레이아웃</title>
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    <div class="page-wrapper">
        <header class="header">
            <h1>반응형 블로그</h1>
            <p>모든 화면에서 읽기 쉬운 레이아웃</p>
        </header>

        <nav class="main-nav">
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">카테고리</a></li>
                <li><a href="#">연락처</a></li>
                <li><a href="#">로그인</a></li>
            </ul>
        </nav>

        <main class="main-content">
            <article class="blog-post">
                <h2>반응형 웹 디자인이란?</h2>

                <p>반응형 웹 디자인은 하나의 웹사이트가 다양한 기기(데스크톱, 태블릿, 스마트폰)에서 최적의 형태로 보여지도록 설계하는 기법입니다. 이는 사용자 경험을 향상시키고, 개발 및 유지보수 비용을 절감하는 효과가 있습니다.</p>
                <p>핵심 기술로는 유동적인 그리드 레이아웃, 유동적인 이미지 및 미디어, 그리고 미디어 쿼리가 있습니다. 특히 미디어 쿼리는 특정 화면 크기나 장치 특성에 따라 다른 CSS 스타일을 적용할 수 있게 해주는 핵심 도구입니다.</p>
                <h3>미디어 쿼리 활용법</h3>
                <p>미디어 쿼리는 `@media` 규칙을 사용하여 정의하며, `min-width`, `max-width`, `orientation` 등 다양한 미디어 기능을 조건으로 활용할 수 있습니다. 예를 들어, 모바일 화면에서는 내비게이션 메뉴를 숨기거나, 텍스트 크기를 조절하는 등의 변화를 줄 수 있습니다.</p>
            </article>

            <div class="related-posts">
                <h3>최신 글</h3>
                <ul>
                    <li><a href="#">Flexbox 완전 정복</a></li>
                    <li><a href="#">CSS Grid 심화 학습</a></li>
                    <li><a href="#">웹 접근성의 중요성</a></li>
                </ul>
            </div>
        </main>

        <aside class="sidebar">
            <h3>공지사항</h3>
            <p>이번 달 웹 개발 스터디는 매주 화요일 저녁 7시입니다.</p>
            <h3>인기 태그</h3>
            <div class="tags">
                <span>#CSS</span>
                <span>#HTML</span>
                <span>#JavaScript</span>
                <span>#WebDev</span>
                <span>#Frontend</span>
            </div>
        </aside>

        <footer class="footer">
            <p>&copy; 2025 반응형 블로그. 모든 권리 보유.</p>
        </footer>
    </div>
</body>
</html>

/* 뷰포트 메타 태그가 HTML에 설정되어 있는지 확인! */

/* 전역 스타일 및 초기 설정 (Mobile First) */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

.page-wrapper {
    display: grid; /* Grid 컨테이너 */
    gap: 15px; /* 기본 간격 */
    grid-template-columns: 1fr; /* 모바일: 모든 영역 한 줄로 */
    grid-template-areas:
        "header"
        "main-nav"
        "main-content"
        "sidebar"
        "footer";
    max-width: 100%;
    margin: 0 auto;
    padding: 10px; /* 기본 패딩 */
}

/* 공통 스타일 */
.page-wrapper > * {
    background-color: white;
    padding: 15px; /* 기본 패딩 */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 헤더 */
.header {
    grid-area: header;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px 15px;
}
.header h1 { font-size: 2em; margin-bottom: 5px; }
.header p { font-size: 0.9em; }

/* 내비게이션 */
.main-nav {
    grid-area: main-nav;
    background-color: #34495e;
    color: white;
}
.main-nav ul {
    list-style: none;
    display: flex; /* 메뉴 아이템들을 Flexbox로 가로 정렬 */
    flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
    justify-content: center; /* 가운데 정렬 */
    gap: 10px;
}
.main-nav li { margin: 0; }
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.main-nav a:hover {
    background-color: #4a6581;
}

/* 메인 콘텐츠 */
.main-content {
    grid-area: main-content;
}
.main-content h2 {
    color: #2980b9;
    margin-bottom: 10px;
    font-size: 1.6em;
}
.main-content h3 {
    color: #4a6581;
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 1.2em;
}
.main-content p {
    margin-bottom: 1em;
}
.blog-post img {
    max-width: 100%; /* 반응형 이미지 */
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
    border-radius: 5px;
}
.related-posts ul {
    list-style: none;
    margin-top: 10px;
}
.related-posts li a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
    color: #333;
    text-decoration: none;
}
.related-posts li:last-child a { border-bottom: none; }
.related-posts li a:hover { color: #2980b9; }

/* 사이드바 */
.sidebar {
    grid-area: sidebar;
    background-color: #ecf0f1;
}
.sidebar h3 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 1.2em;
}
.tags span {
    display: inline-block;
    background-color: #bdc3c7;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8em;
    margin: 5px 5px 0 0;
}

/* 푸터 */
.footer {
    grid-area: footer;
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 0.8em;
}

/* ----------------------------------------------------- */
/* 미디어 쿼리 시작 (태블릿 크기, min-width: 768px) */
/* ----------------------------------------------------- */
@media screen and (min-width: 768px) {
    .page-wrapper {
        grid-template-columns: 1fr 250px; /* 메인 1fr, 사이드바 250px */
        grid-template-areas:
            "header   header"
            "main-nav main-nav"
            "main-content sidebar" /* 메인 콘텐츠와 사이드바가 나란히 */
            "footer   footer";
        gap: 20px; /* 간격 늘림 */
        padding: 20px; /* 패딩 늘림 */
    }

    .header h1 { font-size: 2.5em; }
    .header p { font-size: 1em; }

    .main-nav ul {
        justify-content: flex-start; /* 왼쪽 정렬 */
        gap: 20px;
    }
    .main-nav a { padding: 10px 15px; }

    .main-content h2 { font-size: 2em; }
    .main-content h3 { font-size: 1.5em; }

    .sidebar h3 { font-size: 1.5em; }
    .tags span { font-size: 0.9em; }

    .footer { font-size: 0.9em; }
}

/* ----------------------------------------------------- */
/* 미디어 쿼리 시작 (데스크톱 크기, min-width: 1024px) */
/* ----------------------------------------------------- */
@media screen and (min-width: 1024px) {
    .page-wrapper {
        grid-template-columns: 200px 1fr 280px; /* 네비게이션 200px, 메인 가변, 사이드바 280px */
        grid-template-areas:
            "header   header   header"
            "main-nav main-content sidebar" /* 네비게이션, 메인, 사이드바 나란히 */
            "footer   footer   footer";
        max-width: 1400px; /* 최대 너비 더 넓게 */
        padding: 30px;
        gap: 30px;
    }

    /* 네비게이션은 세로로 */
    .main-nav {
        padding: 20px;
    }
    .main-nav ul {
        flex-direction: column; /* 세로 정렬 */
        align-items: flex-start; /* 왼쪽 정렬 */
        gap: 15px;
    }
    .main-nav a {
        width: 100%; /* 너비 전체 차지 */
        text-align: left;
        padding: 12px 15px;
        font-size: 1.1em;
    }

    .header h1 { font-size: 3em; }
    .header p { font-size: 1.1em; }

    .main-content h2 { font-size: 2.5em; }
    .main-content h3 { font-size: 1.8em; }
    .main-content p { font-size: 1.1em; }

    .sidebar h3 { font-size: 1.8em; }
    .tags span { font-size: 1em; }

    .footer { font-size: 1em; }
}