반응형 웹 디자인 기초

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 웹 페이지</title>
    <link rel="stylesheet" href="css/style.css">
</head>

@media media-type and (media-feature) {
    /* 여기에 특정 조건이 충족될 때 적용될 CSS 규칙 작성 */
}

/* 기본 스타일 (모바일 우선, Mobile First) */
body {
    background-color: lightblue;
    color: #333;
    font-size: 16px;
}

.container {
    width: 95%;
    margin: 0 auto;
    padding: 10px;
    background-color: white;
}

/* 스크린 너비가 600px 이상일 때 적용되는 스타일 (태블릿) */
@media screen and (min-width: 600px) {
    body {
        background-color: lightgreen;
        font-size: 17px;
    }
    .container {
        width: 80%;
        padding: 20px;
    }
}

/* 스크린 너비가 1024px 이상일 때 적용되는 스타일 (데스크톱) */
@media screen and (min-width: 1024px) {
    body {
        background-color: lightcoral;
        font-size: 18px;
    }
    .container {
        width: 70%;
        max-width: 1000px;
        padding: 30px;
    }
}

/* 기본 스타일 (데스크톱 우선, Desktop First) */
body {
    background-color: lightcoral;
    font-size: 18px;
}

.container {
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
    background-color: white;
}

/* 스크린 너비가 1023px 이하일 때 적용되는 스타일 (태블릿) */
@media screen and (max-width: 1023px) {
    body {
        background-color: lightgreen;
        font-size: 17px;
    }
    .container {
        width: 80%;
        padding: 20px;
    }
}

/* 스크린 너비가 599px 이하일 때 적용되는 스타일 (모바일) */
@media screen and (max-width: 599px) {
    body {
        background-color: lightblue;
        font-size: 16px;
    }
    .container {
        width: 95%;
        padding: 10px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 화면 너비가 768px 이상 1024px 이하일 때 */
}
@media (min-height: 400px) and (orientation: landscape) {
    /* 높이가 400px 이상이고 가로 모드일 때 */
}

@media screen and (max-width: 600px), print {
    /* 화면 너비가 600px 이하이거나 인쇄할 때 */
}

@media not screen and (orientation: landscape) {
    /* 스크린 장치이면서 가로 모드인 조건 전체를 제외 */
}

img {
    max-width: 100%;
    height: auto; /* 이미지의 원본 비율 유지 */
    display: block; /* 가끔 인라인 요소로 인한 하단 여백 제거 */
}

<!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>미디어 쿼리는 <code>@media</code> 규칙을 사용하여 정의하며, <code>min-width</code>, <code>max-width</code>, <code>orientation</code> 등 다양한 미디어 기능을 조건으로 활용할 수 있습니다. 예를 들어, 모바일 화면에서는 내비게이션 메뉴를 숨기거나, 텍스트 크기를 조절하는 등의 변화를 줄 수 있습니다.</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; 2026 반응형 블로그. 모든 권리 보유.</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: #25303b; /* 회색 배경과 대비가 충분한 어두운 글자 */
    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: stretch; /* 항목을 내비게이션 폭만큼 늘려 링크가 너비 전체를 차지하게 함 */
        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; }
}