“아는 만큼 예뻐진다” 최신 CSS 기능 10가지

1996년에 등장한 CSS(Cascading Style Sheets)는 여전히 웹 개발 스택의 필수적인 부분으로 계속 발전하고 있다. 활발하게 사용되는 모든 언어가 그렇듯 CSS도 실제 환경에 대응해 새로운 기능을 끊임없이 내놓고 있다. 이처럼 빠른 발전 속도로 인해 CSS를 주로 다루는 개발자조차 새로운 기능을 놓치기 쉽다. 올해 CSS에 도입되는 가장 유용한 새로운 기능에 대해 알아보자. 
 

 

캐스케이드 레이어

캐스케이드 레이어(Cascade layers)는 CSS의 특수성과 상속이 작동하는 방식을 더욱 정교하게 다듬는다. 이해하기에는 다소 추상적이지만 CSS의 기본이기도 하다. 레이어는 일종의 논리적 공간으로, CSS 엔진이 캐스케이딩, 특수성 및 상속을 기반으로 요소에 적용할 스타일을 결정하는 데 사용하는 알고리즘에 삽입된다. 

레이어의 주요 사용 사례는 여러 스타일 소스를 손쉽게 하나의 프로젝트로 결합하도록 하는 것이다. 여러 CSS 소스 라이브러리를 내부적으로 충돌하지 않는 명명된 테마로 결합할 수 있으므로 여러 팀이 다채로운 대규모 CSS 코드베이스에서 협업하기가 한결 쉬워진다. 

추가된 주요 구문은 @layer 규칙 및 관련 프로그래밍 요소다. @layer로 선언된 스타일 집합 내에서는 모든 스타일이 함께 캐스케이딩된다. 소비 페이지에서 발생하는 충돌은 가져온 레이어의 순서에 따라 해결된다. 캐스케이드 레이어의 사양에는 다음과 같은 설명이 나온다.
 

저작자는 레이어를 만들어 요소 기본값, 타사 라이브러리, 테마, 구성요소, 재정의 및 기타 스타일 관련 사항을 나타낼 수 있으며, 각 레이어 내의 선택기나 특수성을 변경하거나 소스 순서에 의존하여 레이어 간 충돌을 해결하지 않고도 명시적인 방법으로 레이어 캐스케이드 순서를 다시 지정할 수 있다. 

예를 들어 @main 및 @library 두 개의 레이어 스타일을 정의할 수 있다. 이 둘을 가져오면 레이어 가져오기 순서에 따라 스타일의 우선순위가 결정된다. 캐스케이드 레이어는 주 레이어로 들어가서 스타일 수준에서 충돌을 해결할 필요 없이 레이어 수준에서 스타일 경합을 해결할 수 있게 해준다.  
 

비활성 속성 

현재 크롬, 엣지, 사파리를 포함한 대부분의 브라우저가 inert를 지원한다. 파이어폭스 112에는 향후 추가될 예정이다. inert 속성은 모든 요소에서 대화형이 아님을 나타내는 데 사용할 수 있는 전역 속성이다. 일반화된 disabled 속성과 비슷한 면이 있다. 실제로 inert는 컨트롤과 비슷한 버튼에 의해 적용되거나 상속될 때 동일한 효과를 낸다. 또한 inert 속성은 스크린 리더와 같은 보조 기술에서 요소가 보이지 않도록 한다. 정리하면, 이전에는 활성 부분을 긍정적으로 정의해야 했지만 inert를 사용하면 사용자 인터페이스의 비활성 부분을 부정적으로 정의할 수 있다.  
 

:has 의사 클래스 

추가된 :has 의사 클래스(pseudo-class)는 CSS의 선택기 측면에서 흥미롭다. 기사 작성 시점을 기준으로 파이어폭스를 제외한 모든 주요 브라우저가 지원하며 파이어폭스의 경우 layout.css.has-selector.enabled를 true로 설정해 사용할 수 있다. 

MDN 문서에 따르면 :has는 “상대적 선택기 목록을 인수로 취함으로써 참조 요소와 관련하여 부모 요소 또는 이전 형제 요소를 선택하는 방법”이다. 기본적으로 :has는 다른 요소를 포함하는 요소를 선택할 수 있게 해준다. 예를 들어 <span>이 포함된 모든 <div>를 선택하려면 <예시 1>과 같이 :has 선택기를 사용하면 된다. 

<예시 1> :has 의사 클래스 사용(예 1)   
이 정도만 해도 선택기 체인에서 요소를 선택하는 방법으로 상당히 유용하지만 이게 전부가 아니다. 예를 들어 <예시 2>에서 볼 수 있듯이 바로 뒤에 단락이 있는 모든 <div>를 선택할 수 있다. 

<예시 2> :has 의사 클래스 사용(예 2)  

그리드 레이아웃과 subgrid 

CSS가 처음 등장한 시점부터 개발자들은 CSS의 몇 가지 큰 단점에 대해 불만을 제기해왔다. 우선 중앙에 배치하기와 같은 흔한 작업에 지나치게 복잡한 과정이 필요하다. 또 다른 큰 문제는 적절한 그리드 레이아웃을 얻기가 어렵다는 점이었는데, 이 문제는 CSS 그리드 레이아웃 모듈이 나오면서 해결됐다. 

이제 그리드는 모든 브라우저에서 완벽하게 지원되고 표준화됐다. 그리드 레이아웃은 display: grid 선언으로 표시되며, 직사각형 레이아웃을 정의하는 것 외에 2차원으로 그리드를 제어할 수 있다는 측면에서 파이어폭스와 일종의 사촌 관계라고 할 수 있다. 연구에 따르면 CSS를 다루는 대부분의 개발자는 그리드 레이아웃을 알고 있고 상당수가 사용 중이다. 

subgrid 값은 그리드 레이아웃의 새로운 기능으로, 매우 유용하다. subgrid는 부모 레이아웃을 상속하는 자식 그리드를 정의할 수 있게 해준다. 이는 그리드 디스플레이를 다른 그리드 안에 중첩하는 것과는 다르다. 중첩의 경우 자식 그리드가 자체적인 차원과 간격을 정의한다. subgrid를 사용하면 부모의 레이아웃이 적용되지만 필요한 경우 subgrid에서 레이아웃의 여러 측면을 재정의할 수 있다. 

이 기사를 작성하는 시점을 기준으로 subgrid는 파이어폭스 71 이상, 사파리 16 이상에 구현돼 있다. 구글 크롬과 마이크로소프트 엣지도 로드맵에 있으므로 향후 지원될 예정이다. subgrid 값은 앞으로 매우 유용한 레이아웃 기능이 될 것이다. 
 

accent-color 옵션 

일부 디스플레이 요소는 흔히 사용됨에도 불구하고 전통적으로 스타일을 지정하기가 어렵다. 예를 들어 확인란과 라디오 버튼은 브라우저의 구현을 숨기면서 이러한 요소의 동작을 모방하는 맞춤형 위젯으로 대체되는 경우가 많다. 새로운 CSS accent-color 옵션을 사용하면 이와 같은 요소를 지정할 수 있다. 예를 들어 <예시 3>과 같이 페이지의 모든 라디오 버튼에 자홍색을 적용할 수 있다(라이브 예제도 참조). 

<예시 3> CSS에서 라디오 버튼 색상 제어하기   

스크롤 스냅 

CSS는 웹 브라우저에서 스크롤 스냅 동작을 제어하기 위한 유용한 일련의 속성을 제공한다. 이 기능에는 몇 년 전부터 사용되는 부분도 포함되지만 최신 브라우저 버전에 계속 적용 중인 부분도 있다. 흥미로운 점은 2022년을 기준으로 CSS 사용자의 3분의 1 이상이 스크롤 스냅 기능을 모르고 있다는 것이다. 

scroll-snap-* 속성 명령은 컨테이너에서 스크롤 위치의 작동 방식을 세밀하게 조정할 수 있는 여러 방법을 제공한다. 개발자는 더 높은 정확도를 얻고 최종 사용자는 더 부드럽고 정제된 사용자 경험을 얻는다. <예시 4>는 div에서 스크롤 스냅을 제어하는 부분이다(이 라이브 예제도 참조). 

<예시 4> 간단한 스크롤 스냅 예제 
스크롤 이동을 어디서 해제하든 <예시 4>의 y 스크롤 위치는 자동으로 자식 요소로 이동한다. 스크롤 컨테이너에서 scroll-snap-type 속성이 y mandatory로 설정돼 있고 자식 요소에 scroll-snap-align: start 선언이 있기 때문이다. 이 동작을 수정할 수도 있다. 예를 들어 scroll-snap-type 속성을 proximity로 설정할 수 있다. 짐작할 수 있겠지만 이렇게 하면 스크롤이 요소에 가까이 접근했을 때만 스냅이 일어난다. 참고로, 이와 관련된 overscroll-behavior 속성을 사용하면 중첩된 스크롤 컨테이너의 동작을 정의할 수 있다. 
 

CSS 논리적 속성(inline 및 block) 

상하 또는 좌우에 컨테이너 테두리를 설정하려고 했던 적이 있다면 border-left와 border-right 또는 border-top과 border-bottom을 작성해야 하는 번거로움을 경험했을 것이다. 문제는 바로가기 속성을 활용하려면 손대고 싶지 않은 테두리에도 영향을 미칠 수밖에 없다는 것이다. 이 불편함은 패딩, 여백과 같은 요소에도 적용된다. 

CSS 논리적 속성(CSS Logical Properties) 모듈을 사용하면 inline과 block 키워드를 사용해서 추상적으로 요소를 참조할 수 있다. 좌우에는 inline을 사용하고, 상하에는 block을 사용한다. 예를 들어 div의 좌우에 테두리를 설정하려면 <예시 5>의 코드를 사용하면 된다(여기서 라이브 예제도 참조). 

<예시 5> 논리적 인라인을 사용한 좌우 패딩 
테두리를 위한 유용한 바로가기지만, 다른 많은 속성에도 inline 및 block 논리적 키워드가 사용된다. 대부분의 개발자는 텍스트 방향 및 쓰기 모드와 관련해서 이와 같은 바로가기를 사용한다. 이 경우 padding-inline-end와 같은 속성을 사용하면 활성 텍스트 방향과 관계없이 후행 패딩을 지정할 수 있다. 기본적으로 inline 및 block으로의 추상화는 다양한 설정에 적용되는 일반화된 스타일을 작성할 수 있게 해준다. 더 자세한 내용은 CSS 논리적 속성과 값을 참조하라.
 

컨테이너 쿼리 

컨테이너 쿼리(Container queries)는 이제 CSS에서 안정화됐고 모든 주요 브라우저에서 구현된다. 컨테이너 쿼리는 반응형 디자인에 대한 사고방식에 큰 영향을 미친다. 기본 개념은 뷰포트와 미디어뿐만 아니라 부모 컨테이너의 크기에 따라서도 중단점을 설정할 수 있다는 것이다. 구문이 완전히 정의되지는 않았지만 대체로 <예시 6>과 비슷하다. 

<예시 6> @컨테이너    
이렇게 하면 UI의 중첩된 레이어 전반에 나타나는 다양한 컨테이너의 크기를 기반으로 레이아웃을 세밀하게 조정할 수 있다. 
 

@when과 @else 

새로운 @container 쿼리와 관련해서, 앞으로 조건부 @when 및 @else 쿼리가 지원될 예정이다. 주요 브라우저에서는 아직 지원되지 않지만 조만간 지원될 것이다. @when 및 @else 쿼리는 미디어 및 지원 퀴리를 다룰 때 조건부 if/then 스타일의 논리 흐름을 가능하게 해준다. 앞으로 많은 복잡한 CSS 상황과 레이아웃에서 작업이 한결 편해질 것으로 예상된다. 
 

3가지 새로운 컬러 팔레트 

오래 전부터 CSS 실무자는 디바이스 디스플레이를 보기 좋게 꾸미고 생동감을 불어넣기 위해 RGB, HEX 및 명명된 색상을 사용해왔다. 근래에는 HSL 스타일의 색상 선언이 도입됐고, 이제 색상을 나타내는 새로운 방법인 hwb, lch, lab이 CSS 사양에 추가된다. 

HWB는 Hue(색조), Whiteness(백도), Blackness(흑도)를 의미한다. 가독성 측면에서 주목할 만한 기능으로, 색을 선택한 다음 흰색과 검은색을 추가하는 방식이다. 크롬, 파이어폭스, 사파리의 최근 버전에서 지원된다. 이유는 알 수 없지만 마이크로소프트 엣지는 이 부분에 대해 소식이 없다. HWB에 대한 더 자세한 내용은 hwb() – 인간을 위한 색 표기법인가에서 볼 수 있다. RGB 및 HWL과 마찬가지로 투명성 알파 채널을 지원한다. 

LCH는 Lightness(밝기), Chroma(채도), Hue(색조)를 나타내며 사용할 수 있는 색의 범위를 늘려준다. CSS의 LCH 색상: 무엇이고 왜, 어떻게 사용하는가에서 CSS의 색 이론에 대한 도움이 되는 설명과 개요를 볼 수 있다. 

LAB는 CIE LAB 색 이론에서 파생됐으며 새로운 색 공간에 대한 가장 파격적인 이론이다. LAB 색 설명자는 사람이 인식할 수 있는 색 범위 전체를 포괄한다는, 상당히 과감한 주장을 펼친다. CSS의 LAB에 대한 자세한 내용은 모질라 CSS 문서에서 볼 수 있다. LAB, LCH 모두 파이어폭스를 제외한 모든 주요 브라우저에서 지원된다. 파이어폭스의 경우 layout.css.more_color_4.enabled 스위치를 true로 설정해야 한다. 
editor@itworld.co.kr