글

필터 8개

Design

CSS Cascade Layers: 스타일 충돌을 명확하게 해결하는 방법

CSS Cascade Layers는 복잡한 스타일 시트에서 발생하는 우선순위 충돌 문제를 보다 체계적이고 명확하게 관리할 수 있는 강력한 도구입니다. `@layer` 규칙을 통해 스타일을 논리적인 그룹으로 나누고, 레이어 자체의 우선순위를 활용하여 `!important`나 과도한 명시도 없이도 스타일 충돌을 효과적으로 해결할 수 있습니다.

2026.09.17· 2분· 2· 0· 0

#css#cascade layers#스타일 충돌#레이어

Design

CSS :where()와 :is() 선택자로 중복 스타일 제거하기

CSS `:where()`와 `:is()` 선택자를 활용하여 중복 스타일을 효과적으로 제거하는 패턴을 알아봅니다. 이 글에서는 각 선택자의 특징, 중복 제거 코드 예제, 주의할 점 등을 다룹니다.

2026.09.04· 3분· 3· 0· 0

#css#선택자#스타일링#코드 중복

Design

:has() 선택자 — 부모 요소를 자식 상태로 스타일링하기

지금까지 CSS로 불가능했던 부모 선택자가 :has()로 가능해졌다. 실전에서 자주 쓰는 패턴 정리.

2026.09.02· 1분· 4· 0· 1

#css#has-selector#선택자

Design

scrollbar-gutter — 스크롤바 등장으로 인한 레이아웃 점프 방지

스크롤바 등장/사라짐으로 본문이 좌우로 점프하는 문제를 한 줄로 해결. 모달 열기 시 JS padding 보정 코드도 함께 사라집니다.

2026.06.08· 1분· 10· 0· 0

#css#scrollbar-gutter#layout-shift#modal

Design

@container 쿼리 — 컴포넌트 단위 반응형의 표준

viewport가 아닌 컨테이너 크기로 분기하는 표준. 사이드바·메인·그리드 어디에 놓여도 자기 크기에 맞게 적응하는 카드/위젯 패턴을 만듭니다.

2026.06.04· 1분· 10· 0· 0

#css#container-queries#responsive#components

Design

CSS Subgrid — 중첩 그리드 정렬 문제를 푸는 방법

카드 그리드에서 내부 항목이 카드 간 정렬되지 않는 문제를 추가 마크업 없이 해결합니다. row/column subgrid의 정확한 사용법과 폼 정렬 패턴.

2026.06.01· 1분· 9· 0· 0

#css#grid#subgrid#layout

Design

CSS light-dark() — 다크 모드를 한 줄로 표현하는 새 함수

한 속성에서 두 모드 색을 동시 표현. data-theme 중복 블록을 없애고 토큰을 한 줄로 비교 가능하게 만드는 표준 CSS 함수입니다.

2026.05.28· 1분· 5· 0· 0

#css#light-dark#dark-mode#color-scheme

Design

CSS color-mix() — 디자인 토큰을 동적으로 섞는 표준 함수

토큰 1개로 hover/disabled/soft 같은 변형을 SCSS 함수 없이 표준 CSS만으로 만듭니다. oklch 색공간으로 시각적으로 자연스러운 색 보간을 얻을 수 있습니다.

2026.05.25· 1분· 6· 0· 0

#css#color-mix#design-tokens#dark-mode

CSS Cascade Layers: 스타일 충돌을 명확하게 해결하는 방법

2026.09.17· 2분· 2· 0· 0

#css#cascade layers#스타일 충돌#레이어

CSS :where()와 :is() 선택자로 중복 스타일 제거하기

2026.09.04· 3분· 3· 0· 0

#css#선택자#스타일링#코드 중복