SCSS로 Jekyll 블로그 스타일링 완전 정복

그러면 이 레이아웃에 스타일은 어떻게 입히냐 바로 css가 입혀줍니다. Jekyll은 SCSS를 기본 지원하므로 CSS보다 훨씬 효율적으로 스타일을 관리할 수 있습니다.

Jekyll의 SCSS 구조 이해하기

assets/css/style.scss 파일이 메인 스타일시트 역할을 하고, _sass/ 폴더의 부분 파일들을 임포트해서 사용합니다.

기본 폴더 구조

assets/
└── css/
    └── style.scss      # 메인 스타일시트
_sass/
├── _variables.scss     # 변수 정의
├── _base.scss          # 기본 스타일
├── _layout.scss        # 레이아웃 스타일
├── _header.scss        # 헤더 스타일
├── _sidebar.scss       # 사이드바 스타일
├── _posts.scss         # 포스트 스타일
└── _home.scss          # 홈페이지 스타일

메인 스타일시트 설정

---
# assets/css/style.scss
---

// 변수와 기본 설정을 먼저 임포트
@import "variables";
@import "base";

// 레이아웃별 스타일
@import "layout";
@import "header";
@import "sidebar";

// 페이지별 스타일
@import "home";
@import "posts";

// 반응형 스타일
@import "responsive";

파일 맨 위의 ---는 Jekyll이 이 파일을 처리하도록 하는 표시입니다. 이것이 없으면 SCSS 컴파일이 되지 않아요! 이거 지웠다가 엥? 하고 다시 붙여넣은지 몇번만에 알았습니다.

변수를 활용한 체계적인 스타일 관리

SCSS의 가장 큰 장점은 변수를 사용할 수 있다는 것입니다. 색상, 폰트, 간격 등을 변수로 정의하면 일관성 있는 디자인을 만들 수 있어요.

기본 변수 정의하기

// _sass/_variables.scss

// 색상 팔레트
$primary-color: #2c3e50;
$secondary-color: #3498db;
$accent-color: #e74c3c;
$background-color: #ffffff;
$text-color: #333333;
$light-gray: #f8f9fa;
$border-color: #e1e1e1;

// 폰트
$font-family-base: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI",
  sans-serif;
$font-family-code: "JetBrains Mono", "Monaco", "Courier New", monospace;

// 폰트 크기
$font-size-base: 16px;
$font-size-large: 18px;
$font-size-small: 14px;
$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
$font-size-h3: 1.5rem;

// 간격
$spacing-unit: 1rem;
$spacing-small: $spacing-unit * 0.5;
$spacing-large: $spacing-unit * 2;

// 레이아웃
$content-width: 1200px;
$sidebar-width: 300px;

// 브레이크포인트
$tablet: 768px;
$desktop: 1024px;
$widescreen: 1200px;

기본 스타일과 레이아웃 구성

기본 스타일 설정

// _sass/_base.scss

* {
  box-sizing: border-box;
}

html {
  font-size: $font-size-base;
  line-height: 1.6;
}

body {
  font-family: $font-family-base;
  color: $text-color;
  background-color: $background-color;
  margin: 0;
  padding: 0;
}

// 제목 스타일
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: $spacing-unit;
}

h1 {
  font-size: $font-size-h1;
}
h2 {
  font-size: $font-size-h2;
}
h3 {
  font-size: $font-size-h3;
}

메인 레이아웃 스타일

// _sass/_layout.scss

.site-container {
  max-width: $content-width;
  margin: 0 auto;
  padding: 0 $spacing-unit;
}

// 헤더 스타일
.site-header {
  background-color: $primary-color;
  color: white;
  padding: $spacing-unit 0;
...

// 메인 콘텐츠 영역
.page-content {
  min-height: calc(100vh - 200px);
  padding: $spacing-large 0;
}

// 푸터 스타일
.site-footer {
  background-color: $light-gray;
  border-top: 1px solid $border-color;
  padding: $spacing-large 0;
  text-align: center;
  color: darken($light-gray, 40%);
}

스타일 우선순위와 적용 규칙

Jekyll에서 스타일은 다음과 같은 우선순위를 갖습니다:

1. 전역 스타일 (_base.scss, _layout.scss)

모든 페이지에 공통으로 적용되는 기본 스타일입니다.

2. 레이아웃별 스타일 (_home.scss, _posts.scss)

특정 레이아웃을 사용하는 페이지에만 적용되는 스타일입니다.

3. 페이지별 개별 스타일

페이지 내에서 <style> 태그로 추가하는 스타일입니다.

반응형 디자인 구현

모바일 친화적인 블로그를 만들기 위해 반응형 스타일을 추가해보겠습니다:

// _sass/_responsive.scss

// 태블릿 이하
@media (max-width: $tablet) {
  .site-nav {
    flex-direction: column;
    gap: $spacing-unit;

    .nav-links {
      gap: $spacing-unit;
    }
  }

  .hero-section {
    padding: $spacing-large;

    .hero-title {
      font-size: 2rem;
    }
  }