Sass로 반응형 블로그 헤더 만들기
Sass 변수·믹스인·부분 파일·BEM을 조합해 반응형 블로그 헤더를 구현하고 컴파일 결과를 확인합니다.
실습: Sass로 반응형 블로그 헤더 만들기
이전 장에서 학습한 아키텍처와 방법론, 그리고 이번 장에서 배운 Sass 기능을 활용하여 반응형 헤더 컴포넌트를 만들어 봅시다.
프로젝트 폴더 구조
sass_header.html
_variables.scss
_mixins.scss
_base.scss
_layout.scss
_header.scss
style.scss (메인 SCSS 파일)
style.css (컴파일될 파일)
sass_header.html 파일 작성<!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">
<div class="main-header__logo">
<a href="#">My Blog</a>
</div>
<nav class="main-header__nav main-nav">
<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>
<button class="main-nav__toggle">
<span></span>
<span></span>
<span></span>
</button>
</nav>
</header>
<main class="content-wrapper">
<h1>반응형 웹과 Sass의 조화</h1>
<p>이 페이지는 Sass를 이용하여 헤더를 만들었습니다. 화면 크기를 줄여보세요!</p>
<p>Sass의 변수, 중첩, 믹스인 등의 기능으로 더욱 효율적인 CSS 개발이 가능합니다.</p>
<div style="height: 1000px; background-color: #ecf0f1; padding: 20px;">
페이지 스크롤 영역
</div>
</main>
<footer>
<p>© 2025 Sass Practice.</p>
</footer>
</body>
</html>scss/style.scss 파일 작성 (메인 SCSS 파일)// style.scss (메인 파일)
// 1. 변수 정의
@import 'variables';
// 2. 믹스인 정의
@import 'mixins';
// 3. 기본 스타일 (Base)
@import 'base';
// 4. 레이아웃 스타일 (Layout)
@import 'layout';
// 5. 모듈/컴포넌트 스타일 (Header 모듈)
@import 'header';scss/_variables.scss 파일 작성// _variables.scss
$primary-color: #3498db;
$text-color: #333;
$bg-color: #f0f2f5;
$header-bg: #2c3e50;
$nav-link-color: white;
$nav-link-hover-color: #1abc9c; // 터쿼이즈
$mobile-breakpoint: 768px; // 모바일에서 태블릿으로 넘어가는 기준
$tablet-breakpoint: 1024px; // 태블릿에서 데스크톱으로 넘어가는 기준scss/_mixins.scss 파일 작성// _mixins.scss
@mixin desktop-only {
@media screen and (min-width: #{$tablet-breakpoint}) {
@content; // 이 믹스인이 사용되는 곳의 CSS 내용을 포함
}
}
@mixin tablet-and-up {
@media screen and (min-width: #{$mobile-breakpoint}) {
@content;
}
}
@mixin mobile-only {
@media screen and (max-width: #{$mobile-breakpoint - 1}) {
@content;
}
}
// Flexbox 중앙 정렬 믹스인
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}#{$변수이름}: 미디어 쿼리 등에서 변수 값을 문자열로 사용해야 할 때 (인터폴레이션) 사용합니다.
아래 다이어그램은 Sass 믹스인이 @content와 함께 반응형 CSS로 펼쳐지는 흐름을 정리한 것입니다.
scss/_base.scss 파일 작성// _base.scss
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: $bg-color;
color: $text-color;
line-height: 1.6;
}
a {
text-decoration: none;
color: $text-color;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}scss/_layout.scss 파일 작성// _layout.scss
.content-wrapper {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: $primary-color;
margin-bottom: 15px;
}
p {
margin-bottom: 10px;
}
footer {
text-align: center;
background-color: #ccc;
padding: 15px;
margin-top: 50px;
color: #555;
}scss/_header.scss 파일 작성 (BEM + Sass 기능)// _header.scss
.main-header {
background-color: $header-bg;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
&__logo { // .main-header__logo
a {
color: $nav-link-color;
font-size: 1.8em;
font-weight: bold;
transition: color 0.2s ease;
&:hover {
color: $nav-link-hover-color;
}
}
}
&__nav { // .main-header__nav (BEM 요소인 동시에 .main-nav 모듈의 시작)
.main-nav__list {
display: flex; // 기본은 가로 메뉴
gap: 25px;
.main-nav__item { // .main-nav__item
.main-nav__link { // .main-nav__link
color: $nav-link-color;
font-weight: 500;
padding: 8px 0;
transition: color 0.2s ease;
&:hover {
color: $nav-link-hover-color;
}
}
}
}
.main-nav__toggle { // .main-nav__toggle (모바일 햄버거 메뉴 버튼)
display: none; // 기본은 숨김
background: none;
border: none;
cursor: pointer;
padding: 10px;
span {
display: block;
width: 25px;
height: 3px;
background-color: $nav-link-color;
margin: 5px 0;
transition: all 0.3s ease;
}
}
}
// 모바일 사이즈 이하에서 내비게이션 변경
@include mobile-only { // 믹스인 사용
flex-direction: column; // 세로 정렬
align-items: flex-start;
padding: 10px 20px;
.main-header__logo {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.main-header__nav {
width: 100%;
text-align: center;
.main-nav__list {
flex-direction: column; // 메뉴 세로 정렬
width: 100%;
gap: 0;
// display: none; /* JavaScript로 토글될 예정 */
.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 {
padding: 12px 0;
width: 100%;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
}
}
.main-nav__toggle {
display: block; // 햄버거 메뉴 버튼 표시
position: absolute;
right: 20px;
top: 15px;
}
}
}
// 특정 조건에서 토글 메뉴 활성화 (JavaScript와 연동)
&.nav-active {
.main-header__nav {
.main-nav__list {
display: flex; // 모바일에서 숨겨진 메뉴를 보이도록
}
.main-nav__toggle {
span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
span:nth-child(2) { opacity: 0; }
span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
}
}
}- 주의: JavaScript로
.main-nav__list의display: none;을 토글하는 기능을 추가해야 모바일 햄버거 메뉴가 작동합니다. 이 예시에서는 CSS만으로 반응형 레이아웃 변화를 보여주는 데 중점을 둡니다.
Sass 컴파일 및 결과 확인
- 프로젝트 루트 폴더(
my-sass-project)에서 터미널/명령 프롬프트를 열고 다음 명령을 실행합니다.sass --watch scss/style.scss:css/style.css scss/style.scss및 관련 파일들을 저장할 때마다css/style.css파일이 자동으로 업데이트되는 것을 확인합니다.sass_header.html파일을 웹 브라우저에서 열어봅니다.- 브라우저 창의 너비를 조절해 보세요.
- 데스크톱/태블릿 크기에서는 내비게이션 메뉴가 가로로 보일 것입니다.
- 모바일 크기(
767px이하)에서는 헤더가 세로로 정렬되고, 내비게이션 메뉴가 사라지며 (현재 CSS 상으로는 보이지만, 실제로는 JavaScript로 숨김 처리), 햄버거 메뉴 버튼이 나타나는 것을 볼 수 있습니다.
이번 장에서는 CSS 전처리기(Preprocessor)가 반복 스타일, 변수, 중첩, 믹스인, 파일 분리를 어떻게 다루는지 학습했습니다.
특히 가장 널리 사용되는 Sass(SCSS 문법)를 중심으로 다음 핵심 기능을 정리했습니다.
$변수: 재사용 가능한 값을 정의하여 일관된 디자인과 손쉬운 스타일 변경을 가능하게 합니다.- 중첩 (
{}내부 선택자,&부모 참조): HTML 구조처럼 CSS 선택자를 중첩하여 작성하여 코드의 가독성을 높입니다. @mixin과@include: 반복적으로 사용되는 CSS 코드 블록을 함수처럼 정의하고 재사용하여 코드 중복을 줄입니다.@extend: 특정 선택자의 스타일을 다른 선택자에 상속시켜 코드 효율성을 높입니다.- 부분 파일 (
_파일.scss)과@import: CSS 파일을 모듈화하여 관리하고, 필요한 곳에서 불러와 체계적인 프로젝트 구조를 만듭니다. - 연산: 숫자 및 색상 값에 대한 다양한 연산을 통해 동적인 스타일을 생성합니다.
이러한 Sass의 기능들은 순수 CSS의 한계를 극복하고, 대규모 프로젝트에서 CSS를 더 체계적이고 효율적으로 작성할 수 있도록 돕습니다.
이제는 CSS 개발 워크플로우를 한 단계 더 발전시킬 준비가 되었습니다.
4장에서는 CSS 트랜지션과 애니메이션, 변수와 계산식, CSS 방법론, 전처리기를 다뤘습니다.
아래 다이어그램은 전처리기란 무엇이며 왜 필요한가?을 레이아웃 조건, 스타일 선언, 화면 확인 순서로 정리합니다.
Sass 입문을 마무리하며 변수, 중첩, 믹스인 적용 기준을 점검합니다.