Sass로 반응형 블로그 헤더 만들기

mkdir web-dev-practice
cd web-dev-practice
npm init -y
npm install --save-dev sass

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass 반응형 헤더 실습</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="main-header">
        <a href="#" class="main-header__logo">My Blog</a>
        <nav class="main-nav" aria-label="주요 메뉴">
            <ul class="main-nav__list">
                <li class="main-nav__item"><a href="#" class="main-nav__link">홈</a></li>
                <li class="main-nav__item"><a href="#" class="main-nav__link">카테고리</a></li>
                <li class="main-nav__item"><a href="#" class="main-nav__link">글쓰기</a></li>
                <li class="main-nav__item"><a href="#" class="main-nav__link">마이페이지</a></li>
            </ul>
        </nav>
    </header>

    <main class="content-wrapper">
        <h1 class="page-title">반응형 웹과 Sass의 조화</h1>
        <p class="content-copy">이 페이지는 Sass를 이용하여 헤더를 만들었습니다. 화면 크기를 줄여보세요!</p>
        <p class="content-copy">변수, 얕은 중첩, 믹스인과 module로 역할과 의존성을 분명하게 관리할 수 있습니다.</p>
        <div class="content-demo">
            페이지 스크롤 영역
        </div>
    </main>
    <footer class="site-footer">
        <p>&copy; 2026 Sass Practice.</p>
    </footer>
</body>
</html>

// CSS를 출력하는 module만 순서대로 불러옵니다.
@use 'base';
@use 'layout';
@use 'header';

// _variables.scss

$primary-color: #3498db;
$text-color: #333;
$bg-color: #f0f2f5;
$surface-color: white;
$header-bg: #2c3e50;
$nav-link-color: white;
$nav-link-hover-color: #1abc9c; // 터쿼이즈

$mobile-breakpoint: 768px; // 767px 모바일 상한을 계산하는 기준값

// _mixins.scss

@use 'variables' as vars;

$mobile-max:
    vars.$mobile-breakpoint - 1px;

@mixin mobile-only {
    @media screen and
        (max-width: $mobile-max) {
        @content;
    }
}

// _base.scss

@use 'variables' as vars;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: vars.$bg-color;
    color: vars.$text-color;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

// _layout.scss

@use 'variables' as vars;

.content-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: vars.$surface-color;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-title {
    color: vars.$primary-color;
    margin-bottom: 15px;
}

.content-copy {
    margin-bottom: 10px;
}

.content-demo {
    min-height: 32rem;
    padding: 20px;
    background-color: vars.$bg-color;
}

.site-footer {
    text-align: center;
    background-color: #ccc;
    padding: 15px;
    margin-top: 50px;
    color: #555;
}

// _header.scss

@use 'variables' as vars;
@use 'mixins' as mix;

.main-header {
    background-color: vars.$header-bg;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.main-header__logo {
    color: vars.$nav-link-color;
    font-size: 1.8em;
    font-weight: bold;
    transition: color 0.2s ease;

    &:hover {
        color: vars.$nav-link-hover-color;
    }
}

.main-nav__list {
    display: flex;
    gap: 25px;
}

.main-nav__link {
    display: block;
    color: vars.$nav-link-color;
    font-weight: 500;
    padding: 8px 0;
    transition: color 0.2s ease, background-color 0.2s ease;

    &:hover {
        color: vars.$nav-link-hover-color;
    }
}

@include mix.mobile-only {
    .main-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 20px;
    }

    .main-header__logo {
        text-align: center;
    }

    .main-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .main-nav__item {
        border-top: 1px solid rgba(255, 255, 255, 0.1);

        &:last-child {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
    }

    .main-nav__link {
        width: 100%;
        padding: 12px 8px;
        text-align: center;

        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
}