03. @layer로 스타일시트 재정리하기

이번 편의 결과물: portfolio/css/의 기존 규칙이 @layer reset, tokens, base, components, utilities; 5개 레이어로 재배치된다 · 다루는 개념: @layer 선언 순서, unlayered 스타일이 항상 이기는 이유, 레이어 이름 설계

이 편에서 만드는 파일


web-practice/
├── portfolio/css/
│   ├── tokens.css     ~ 레이어 순서 선언 + tokens 레이어
│   └── styles.css     ~ reset·base·components·utilities 레이어
└── lessons/modern-css/03_cascade-layers-rebuild/    +
    ├── order-demo.html
    └── order-demo.css

개념 정리

@layer는 스타일시트를 이름 붙은 여러 층으로 나누는 규칙이다. @layer는 기존 캐스케이드 순서 위에 레이어 순서라는 우선순위를 하나 더 얹는다.

규칙	설명
레이어 순서가 명시도보다 우선한다	명시도가 낮아도 나중 레이어가 이긴다
레이어 순서는 등장 순서가 아니라 선언한 순서다	`@layer reset, tokens, base, components, utilities;`로 순서를 미리 고정한다
unlayered 스타일은 항상 모든 레이어를 이긴다	`@layer` 밖에 적은 규칙은 명시도와 무관하게 최우선이다. 외부 라이브러리 CSS를 레이어에 넣으면 내 커스텀 CSS가 항상 이긴다
같은 이름의 `@layer` 블록은 여러 파일에 나눠 적어도 하나로 합쳐진다	`tokens.css`, `styles.css`에 각각 `@layer base { ... }`를 적어도 같은 레이어로 병합된다

레이어 이름은 역할별로 5개로 나눈다.

레이어	담는 내용
`reset`	브라우저 기본값 제거(`box-sizing`, `margin`)
`tokens`	커스텀 속성(색·간격·타이포 변수)
`base`	기본 요소 스타일(`body`, `img`, `a`)
`components`	클래스 단위 컴포넌트
`utilities`	한 가지 스타일만 강제하는 예외용 클래스. 항상 마지막

순서 선언은 프로젝트에 한 번만 쓴다. tokens.css(가장 먼저 로드되는 파일) 맨 위에 적어, 이후 어떤 파일이 레이어 블록을 추가하든 순서가 고정되게 한다.

실습

1. tokens.css 수정


/* portfolio/css/tokens.css */
@layer reset, tokens, base, components, utilities;
 
@layer tokens {
  :root {
    --color-bg: #ffffff;
    --color-surface: #f6f7f9;
    --color-text: #1f2328;
    --color-text-muted: #59636e;
    --color-primary: #0969da;
    --color-primary-hover: #0550ae;
    --color-border: #d0d7de;
    --color-accent: #bf3989;
 
    --font-sans: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;
    --leading: 1.6;
 
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
 
    --container-max: 72rem;
    --radius: 0.5rem;
    --shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 4px 12px rgb(0 0 0 / 0.06);
    --header-height: 4rem;
  }
}

tokens.css가 styles.css보다 먼저 로드되므로, 순서 선언을 여기 맨 위에 둔다. styles.css에서 레이어 블록이 어떤 순서로 나오든 최종 우선순위는 이 문장을 따른다.

2. styles.css를 레이어로 재배치

기존 규칙을 그대로 옮기되, 역할별로 @layer 블록 안에 넣는다.


/* portfolio/css/styles.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}
 
@layer base {
  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-bg);
  }
 
  img {
    max-width: 100%;
    display: block;
  }
 
  a {
    color: var(--color-primary);
  }
}
 
@layer components {
  .site-header {
    position: sticky;
    top: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-6);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }
 
  .logo { font-size: var(--text-lg); font-weight: 700; }
  .site-nav { display: none; gap: var(--space-6); }
  .site-nav a[aria-current='page'] { color: var(--color-primary); font-weight: 700; }
 
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
  }
 
  #mobile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: fixed;
    inset: var(--header-height) var(--space-4) auto var(--space-4);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow);
  }
 
  @media (min-width: 1024px) {
    .site-nav { display: flex; }
    .menu-toggle { display: none; }
  }
 
  .hero { padding-block: var(--space-16); text-align: center; }
  .hero h1 { font-size: var(--text-3xl); }
  .hero p { color: var(--color-text-muted); font-size: var(--text-lg); }
  .hero > * { animation: hero-enter 600ms ease-out both; }
  .hero > *:nth-child(2) { animation-delay: 150ms; }
  .hero > *:nth-child(3) { animation-delay: 300ms; }
  .hero > *:nth-child(4) { animation-delay: 400ms; }
 
  @keyframes hero-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
 
  @media (prefers-reduced-motion: reduce) {
    .hero > * { animation: none; }
  }
 
  .button {
    display: inline-block;
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-6);
    font-weight: 700;
    background-color: var(--color-primary);
    color: #ffffff;
    border: 1px solid transparent;
    transition: background-color 200ms ease, border-color 200ms ease, transform 100ms ease;
  }
 
  .button:hover { background-color: var(--color-primary-hover); }
  .button-secondary { background-color: transparent; border-color: var(--color-border); color: var(--color-text); }
 
  .about { padding-block: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-8); }
  .about img { width: 12rem; border-radius: var(--radius); }
  .skills ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .skills li {
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius);
    font-size: var(--text-sm);
  }
 
  .career table { width: 100%; border-collapse: collapse; }
  .career th, .career td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }
  .career th { background: var(--color-surface); }
 
  .project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-12);
  }
  @media (min-width: 768px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
 
  .project-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .project-card img { aspect-ratio: 3 / 2; object-fit: cover; }
  .project-card h2 { font-size: var(--text-lg); padding-inline: var(--space-4); margin-top: var(--space-4); }
  .project-card p { padding-inline: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
  .project-card .tags { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-inline: var(--space-4); }
  .project-card .tags li {
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-xs);
  }
  .project-card button[data-open-project] { margin: var(--space-4); margin-top: auto; }
 
  #project-dialog {
    width: min(32rem, 90vw);
    border: none;
    border-radius: var(--radius);
    padding: var(--space-8);
    background: var(--color-bg);
    box-shadow: var(--shadow);
  }
  #project-dialog::backdrop { background: rgb(15 23 32 / 0.5); }
 
  .contact-form { display: flex; flex-direction: column; gap: var(--space-6); max-width: 32rem; }
  .field { display: flex; flex-direction: column; gap: var(--space-2); }
  .field label { font-size: var(--text-sm); font-weight: 700; }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgb(9 105 218 / 0.2);
  }
  .field input:invalid:not(:placeholder-shown) { border-color: var(--color-accent); }
  .field-checkbox { flex-direction: row; align-items: center; gap: var(--space-2); }
  .field .help { font-size: var(--text-xs); color: var(--color-text-muted); }
  .contact-form button[type='submit'] {
    height: 2.75rem;
    padding-inline: var(--space-6);
    border-radius: var(--radius);
    font-weight: 700;
    background: var(--color-primary);
    color: #ffffff;
    border: 1px solid transparent;
  }
 
  .faq details { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
  .faq summary { display: flex; justify-content: space-between; cursor: pointer; font-weight: 700; }
  .site-footer {
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}}
 
@layer utilities {
  .u-bg-accent {
    background: #bf3989;
  }
}

components보다 utilities가 나중 레이어라 버튼은 분홍색(u-bg-accent)으로 보인다. 첫 줄을 @layer utilities, components;로 바꿔 순서를 뒤집으면, 명시도는 그대로인데 버튼이 파란색(button)으로 바뀐다 — 레이어 순서가 명시도보다 먼저 판정된다는 뜻이다.

4. 확인

portfolio/의 세 페이지가 이전과 시각적으로 동일하다.
order-demo.html에서 레이어 선언 순서를 바꾸면 버튼 색이 바뀐다.
개발자 도구 Styles 패널에서 버튼을 선택하면 규칙 옆에 레이어 이름이 표시된다.

직접 해보기

order-demo.css에 reset 레이어를 추가해 button { all: unset; }을 넣는다. 순서를 reset, components, utilities로 두면 버튼이 어떻게 보이는지 확인한다.
portfolio/css/styles.css의 utilities 레이어에 .u-mt-0 { margin-top: 0; }를 추가하고 프로젝트 카드의 button[data-open-project]에 임시로 붙여, components의 margin-top: auto를 이기는지 확인한다(확인 후 제거한다).

정답 예시

reset이 가장 먼저라 all: unset이 먼저 적용되고, 이후 components의 배경·글자색이 다시 씌워진다.
u-mt-0를 button[data-open-project]에 붙이면 카드 아래쪽 여백이 사라진다. utilities가 나중 레이어라 명시도가 같아도 이긴다.

자주 하는 실수

증상	원인	고치는 법
레이어로 나눴는데 스타일이 안 먹는다	unlayered 규칙과 섞여 있다	unlayered는 항상 이긴다. 레이어 안으로 옮긴다
레이어 순서를 파일마다 다르게 선언했다	`tokens.css`, `styles.css`에 서로 다른 순서를 적었다	순서 선언은 한 번만 둔다
`@media`가 레이어 안에서 안 먹는다고 착각했다	실제로는 정상 동작한다	`@layer` 안 `@media`는 정상이다. 선택자 오타를 먼저 의심한다

확인 문제

문제 14지선다

같은 요소에 서로 다른 레이어의 규칙이 충돌할 때 우선순위를 결정하는 기준은?

명시도와 무관하게 나중 레이어가 이긴다두 레이어의 명시도를 합산해서 비교한다항상 먼저 선언된 레이어가 이긴다레이어는 우선순위에 영향을 주지 않는다

문제 24지선다

레이어에 속하지 않은(unlayered) 스타일의 우선순위는?

어떤 레이어의 규칙보다도 항상 이긴다가장 먼저 선언된 레이어와 동일하게 취급된다레이어 순서 선언이 없으면 무시된다명시도가 낮으면 레이어 규칙에 진다

문제 34지선다

tokens.css 맨 위에 @layer reset, tokens, base, components, utilities;를 미리 선언한 이유는?

가장 먼저 로드되는 파일에서 레이어 순서를 고정하기 위해레이어 이름을 한글로 번역하기 위해tokens.css 파일 크기를 줄이기 위해브라우저가 커스텀 속성을 더 빨리 읽게 하기 위해

참고 자료

MDN — @layer — 캐스케이드 레이어 문법과 unlayered 우선순위
MDN — CSS 캐스케이드 레이어 사용하기 — 레이어 순서 선언과 병합 규칙