최신 CSS 속성과 API 소개
개발자가 JavaScript와 CSS를 함께 활용하여 웹사이트를 더욱 자유롭게 커스터마이징할 수 있도록, 새로운 CSS 속성들이 개발되었으며 현재 주요 브라우저에서 지원되고 있습니다. 아래에서 핵심 속성들을 살펴보겠습니다.
focus-within
요소 내부의 포커스 접근성 문제를 해결하기 위한 속성입니다. 하위 요소 중 하나라도 포커스를 받으면 부모 요소에 스타일을 적용할 수 있어 폼 입력 등의 UX 개선에 유용합니다.
scroll-snap
네이티브 수준의 스크롤과 감속 효과를 지원합니다. 별도의 JavaScript 라이브러리 없이도 부드러운 스냅 스크롤 인터페이스를 구현할 수 있습니다.
@media(prefers-*)
사용자의 기기 환경설정에 따라 페이지의 UI와 UX를 조정할 수 있어, 한층 높은 수준의 개인화를 제공합니다.
* 에는 light-level(광량), forced-colors(강제 색상), color-scheme(색상 구성), contrast(대비), reduced-motion(모션 감소), reduced-transparency(투명도 감소) 등이 올 수 있습니다.
position: sticky
UI 요소를 뷰포트(viewport) 안에 고정시켜 스크롤 시에도 화면에 유지되도록 하는 속성입니다.
논리적 속성(Logical Properties)
표준화된 레이아웃을 위해 도입된 속성으로, 요소 내부와 주변의 방향성 간격을 동적으로 제어할 수 있습니다. 다국어 대응 레이아웃 작업 시 특히 유용합니다.
gap 속성
이제 flexbox에서도 gap 속성을 사용할 수 있습니다. 각 자식 요소마다 개별적으로 여백을 지정하는 대신, 컨테이너가 간격을 직접 관리하므로 코드가 훨씬 간결해집니다.
backdrop-filter
요소 뒤페의 배경에 흐림, 반전 등의 필터 효과를 손쉽게 적용할 수 있는 속성입니다.
CSS Houdini API
개발자가 브라우저에게 커스텀 CSS를 어떻게 해석하고 이해할지 직접 지시할 수 있게 해주는 저수준(low-level) API입니다. CSS Object Model(CSSOM)을 개발자가 더 쉽게 다룰 수 있도록 열어주며, Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM, Font Metrics API 등이 여기에 포함됩니다.
aspect-ratio
미디어 요소의 가로세로 비율을 유지해 주는 속성으로, 이미지나 동영상의 레이아웃 밀림 현상을 방지할 수 있습니다.
size
하나의 속성만으로 높이(height)와 너비(width)를 동시에 설정할 수 있습니다.
min(), max(), clamp()
모든 CSS 속성에 상한선과 하한선 같은 제약 조건을 설정할 수 있는 함수입니다. 특히 clamp()는 반응형 타이포그래피 구현에 널리 활용됩니다.
display: outer inner
두 개의 값을 받는 새로운 문법으로, 외부 표시 방식과 내부 표시 방식을 분리하여 요소를 더 정교하게 배치할 수 있습니다.
list-style-type
목록(list)에 커스텀 스타일을 추가할 수 있는 속성입니다.
CSS Modules
JavaScript를 통해 로컬 또는 원격 파일에서 특정 CSS 모듈을 불러와 사용할 수 있습니다.
CSS Regions
특정 영역(area)을 콘텐츠로 채워 넣을 수 있는 기능입니다.
CSS Subgrid
CSS Grid 안에 세부(micro) 레이아웃을 만들 수 있도록 도와주는 기능으로, 복잡한 그리드 구조를 체계적으로 구성할 수 있습니다.
예제 1 : :is() 선택자 활용
다음 예제는 위에서 소개한 속성들 중 일부를 실제로 적용한 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2 : backdrop-filter 활용
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477-9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
