T
css frontend web-design oklch container-queries modern-web

현대 CSS 기능 가이드: OKLCH, 컨테이너 쿼리 및 :has() 마스터하기

차세대 CSS를 탐구합니다. 현대적인 웹 디자인을 위한 OKLCH 색상 선택기, 컨테이너 쿼리, :has() 선택기, CSS 네스팅 및 @layer에 대한 전체 가이드입니다.

2026-04-12

현대 CSS 기능 가이드: OKLCH, 컨테이너 쿼리 및 :has() 마스터하기

CSS 환경은 그 어느 때보다 빠르게 진화하고 있습니다. 한때 복잡한 JavaScript나 프리프로세서가 필요했던 기능들이 이제 브라우저에서 기본적으로 지원되어 더 나은 성능과 개발자 경험을 제공합니다. 이 가이드에서는 가장 영향력 있는 현대 CSS 기능과 이러한 기능이 웹 구축 방식을 어떻게 변화시키고 있는지 살펴봅니다.

1. 차세대 색상: OKLCH 및 OKLAB

수십 년 동안 개발자들은 HEX, RGB 및 HSL을 사용해 왔습니다. 그러나 이러한 색상 공간에는 큰 결함이 있습니다. 바로 지각적으로 균일하지 않다는 것입니다. 예를 들어 HSL에서 "밝기" 값이 같은 두 색상이 인간의 눈에는 매우 다르게 보일 수 있습니다.

OKLCH 및 OKLAB

OKLCH(및 그 전신인 OKLAB)는 지각적으로 균일한 색상 공간을 사용하여 이 문제를 해결합니다.

  • L (Lightness): 인간에게 색상이 얼마나 밝게 보이는지.
  • C (Chroma): 색상의 강도 또는 "순도".
  • H (Hue): 색상 휠의 각도.

왜 사용해야 할까요?

  • 일관성: 색조를 변경해도 인지된 밝기는 변하지 않습니다.
  • 더 넓은 색역: sRGB보다 50% 더 많은 색상을 표현할 수 있는 Display-P3 색상(최신 Mac 및 iPhone에서 사용 가능)을 지원합니다.
  • 동적 테마: 프로그래밍 방식으로 접근 가능한 색상 팔레트를 생성하는 데 적합합니다.

2. 고급 레이아웃: 컨테이너 쿼리 및 서브그리드

컨테이너 쿼리 (@container)

수년 동안 우리는 뷰포트 크기에 따라 레이아웃을 변경하기 위해 미디어 쿼리에 의존해 왔습니다. 컨테이너 쿼리를 사용하면 부모 컨테이너의 크기에 따라 구성 요소의 레이아웃을 변경할 수 있습니다.

  • 사용 사례: 넓은 사이드바에 있을 때는 그리드로 표시되지만 좁은 메인 열에 있을 때는 리스트로 표시되는 "카드" 구성 요소.
  • 이점: 진정한 구성 요소 주도 설계. 구성 요소를 다양한 레이아웃에서 진정으로 이식 가능하게 만들 수 있습니다.

CSS 서브그리드 (Subgrid)

서브그리드를 사용하면 자식 요소가 부모에 정의된 그리드 트랙을 상속받을 수 있습니다.

  • 해결된 문제: 서로 다른 그리드 셀 간의 항목 정렬(예: 콘텐츠 길이에 관계없이 카드 헤더와 푸터를 정렬).

3. "가족" 선택기: :has() 및 :is()

:has() 선택기 (부모 선택기)

:has() 선택기는 종종 CSS의 "성배"라고 불립니다. 이 선택기를 사용하면 자식 또는 후속 요소를 기반으로 요소의 스타일을 지정할 수 있습니다.

  • 예시: card:has(img)는 이미지가 포함된 경우에만 카드의 스타일을 지정합니다.
  • 예시: form:has(input:invalid)는 오류가 있는 경우 전체 폼 배경의 스타일을 지정할 수 있습니다.

:is() 및 :where() 선택기

이러한 선택기를 사용하면 여러 선택기를 하나로 그룹화하여 반복을 줄이고 코드를 깔끔하게 유지할 수 있습니다.

  • header :is(h1, h2, h3) { color: red; }

4. 조직적인 힘: @layer 및 CSS 네스팅

캐스케이드 레이어 (@layer)

CSS가 성장함에 따라 명시도 충돌("z-index/명시도 전쟁")을 관리하기가 더 어려워집니다. @layer를 사용하면 CSS에 대한 명시적 우선순위 수준을 정의할 수 있습니다.

  • 이점: 선택기 명시도에 관계없이 "테마" 레이어가 항상 "기본" 레이어를 재정의하도록 보장할 수 있습니다.

네이티브 CSS 네스팅

더 이상 네스팅을 위해 Sass나 Less가 필요하지 않습니다! 이제 브라우저에서 다음과 같은 구문을 기본적으로 지원합니다.

.card {
  background: white;
  &:hover {
    background: grey;
  }
}

5. 시각적 전환 및 위치 지정

View Transitions API

모바일 앱 전환과 유사하게 페이지 간 이동이나 상태 변경 시 원활한 애니메이션을 가능하게 합니다.

앵커 위치 지정 (Anchor Positioning)

페이지의 "앵커" 요소(예: 페이지를 스크롤해도 버튼을 따라가는 툴팁이나 메뉴)를 기준으로 요소를 배치하는 새로운 방법입니다.

현대 CSS 이점 요약

기능 최적 용도 상태
OKLCH 현대적이고 접근 가능한 색상 팔레트 광범위한 지원
컨테이너 쿼리 진정한 반응형 구성 요소 주도 설계 광범위한 지원
:has() 상태/콘텐츠 기반 부모 스타일 지정 광범위한 지원
@layer 대규모 CSS 아키텍처 관리 광범위한 지원
네스팅 더 깔끔하고 체계적인 코드 광범위한 지원

결론

현대 CSS는 코드를 더 깔끔하고 빠르며 강력하게 만들고 있습니다. 색상을 위한 OKLCH와 레이아웃을 위한 컨테이너 쿼리와 같은 기능을 수용함으로써 더욱 접근하기 쉽고 유지 관리가 쉬운 웹사이트를 구축할 수 있습니다.

기존 HEX 색상을 현대적인 OKLCH로 변환하고 싶으신가요? 아니면 새로운 레이아웃을 만들고 계신가요? 곧 출시될 CSS 생성기 도구를 기대해 주세요! 그동안 색상 변환기를 사용하여 HEX, RGB 및 HSL 변환을 처리할 수 있습니다.

블로그로 돌아가기