T
css architecture layers nesting design

현대 CSS 아키텍처: 레이어, 네스팅 및 @property 마스터하기

@layer, 네이티브 네스팅 및 @property를 사용한 타입 안전 변수로 확장 가능한 CSS 시스템을 구축하세요. CSS 아키텍처의 미래를 살펴보세요.

2026-04-12

현대 CSS 아키텍처: 레이어, 네스팅 및 @property 마스터하기

우리가 CSS를 구성하고 구축하는 방식이 근본적으로 변화하고 있습니다. 거대한 파일과 복잡한 명시도 해킹에서 벗어나 더 아키텍처적이고 속성 중심적인 접근 방식으로 이동하고 있습니다. @layer 및 @property와 같은 현대적인 기능을 통해 우리는 모든 프로그래밍 언어만큼 강력하고 확장 가능한 시스템을 구축할 수 있게 되었습니다.

이 가이드에서는 CSS 아키텍처를 더욱 예측 가능하고 전문적으로 만드는 기술을 살펴보겠습니다.

2. 네이티브 CSS 네스팅으로 깔끔한 코드 작성하기

이제 CSS를 중첩하기 위해 Sass나 Less와 같은 전처리기가 더 이상 필요하지 않습니다. 브라우저가 기본적으로 네스팅을 지원하게 되어 코드를 훨씬 더 읽기 쉽고 유지 관리하기 좋게 만들 수 있습니다.

구문 예제:

.card {
  padding: 20px;
  background: white;

  & .header {
    border-bottom: 1px solid #eee;
  }

  &:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
}

이를 통해 스타일을 논리적으로 그룹화하고 긴 클래스 이름의 반복을 줄일 수 있습니다.

3. @property를 이용한 변수 정의

CSS 사용자 정의 속성(--variable)은 훌륭하지만 "타입"이 부족합니다. 브라우저가 어떤 종류의 데이터인지 몰랐기 때문에 그라데이션이나 사용자 정의 속성에 애니메이션을 적용할 수 없었습니다.

@property(Houdini)를 사용하면 타입, 초기값 및 상속 여부를 가진 변수를 정의할 수 있습니다.

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

/* 이제 애니메이션이 가능합니다! */
.box {
  transition: --my-color 1s;
}

4. 도입 중인 기능: 앵커 포지셔닝 및 팝오버

현대 CSS는 일반적인 UI 패턴을 위한 고수준 API도 도입하고 있습니다.

앵커 포지셔닝(Anchor Positioning)

한 요소를 다른 요소에 상대적으로 배치하여 특정 위치에 "고정(anchoring)"할 수 있게 합니다. 툴팁, 메뉴 및 버튼이나 대상을 "따라다녀야" 하는 플로팅 UI의 새로운 표준입니다.

Popover API

모달, 툴팁 또는 메뉴와 같은 "최상위 레이어(top-layer)" 콘텐츠를 만드는 네이티브 방식입니다. z-index, 접근성 및 "라이트 디스미스(light dismiss)"(외부 클릭 시 닫기)를 자동으로 처리합니다.

<button popovertarget="my-menu">메뉴 열기</button>
<div id="my-menu" popover>...</div>

5. @counter-style로 리스트 맞춤 설정하기

사용자 정의 번호 체계가 필요하신가요? @counter-style을 사용하면 순서가 있는 리스트에 대해 자신만의 기호, 번호 체계 및 접미사를 정의할 수 있습니다.

아키텍처 도구 요약

기능 최적 용도 상태
@layer 전역 명시도 관리 광범위하게 지원
네스팅 깔끔하고 정리된 코드 광범위하게 지원
@property 타입 안전 변수, 애니메이션 Chrome, Safari
앵커 포지셔닝 툴팁, 메뉴 및 UI 도입 중
Popover API 네이티브의 접근성 높은 최상위 콘텐츠 광범위하게 지원

결론

현대적인 CSS 아키텍처는 제어와 예측 가능성에 관한 것입니다. @layer와 네스팅을 활용하면 확장하기 쉬운 CSS를 작성할 수 있습니다. @property를 사용하면 진정으로 동적이고 타입 안전한 컴포넌트를 만들 수 있습니다.

CSS를 현대화하고 싶으신가요? 당사의 CSS 네스팅 변환기를 확인해 보시고 곧 출시될 @layer 생성기와 CSS 변수 플레이그라운드도 기대해 주세요!

블로그로 돌아가기