원저자의 허락을 받아 원문 <4 CSS Features Every Front-End Developer Should Know In 2026>를 한국어로 번역한 글입니다.
프런트엔드 개발자라면 스크롤 상태를 쿼리하는 법, 타이포그래피 여백을 제거하는 법, sibling-index()로 시간차 효과를 주는 법, 그리고 타입 안정적인 attr()를 사용하는 법을 알아야 한다고 생각합니다.
이 4가지는 2025년에 출시된 CSS 기능들 중 일부에 불과합니다.
sibling-index(), sibling-count()
이 기능들은 올해 초만 해도 실험 단계였지만, 이제 크롬과 사파리에서 안정적으로 사용할 수 있습니다!
형제 요소들 사이에서의 상대적인 위치를 값으로 활용할 수 있게 하는 기능입니다. 예를 들어, sibling-index()를 기반으로 transition-delay를 주면 요소들에 순차적으로 애니메이션 효과를 적용할 수 있습니다.
유용한 트릭을 알려드리면, 1을 빼서 첫 번째 요소가 즉시 시작하도록 만들 수 있습니다.
li {
transition: opacity 0.3s ease;
transition-delay: calc((sibling-index() - 1) * 100ms);
}@starting-style을 함께 사용하면 요소가 처음 등장할 때 적용되는 애니메이션에 간단하게 시간차 효과를 넣을 수 있습니다!
li {
transition: opacity 0.3s ease;
transition-delay: calc((sibling-index() - 1) * 100ms);
@starting-style {
opacity: 0;
}
}oklch에서 색조를 회전시키고, 요소에 자동으로 번호를 매기며, 여러 재미있는 작업을 할 수 있습니다.
관련 자료@container scroll-state()
이 기능들은 스크롤 기반 애니메이션처럼 점진적 향상에 잘 어울립니다.
필수 요소라기보다는 있으면 더 좋은, “보강 기능”에 가깝기 때문이죠.
제 생각에는 그렇습니다.
이제 스크롤러의 네 가지 상태인 stuck, snapped, scrollable, scrolled를 쿼리할 수 있습니다
먼저 stuck, snapped, scrollable 상태를 가지는 요소에
container-type: scroll-state를 지정해야 합니다. 그 다음, 그 자식 요소에서 @container scroll-state()를 사용해 해당 상태를 쿼리할 수 있습니다.
NOTE: 요소는 자기 자신을 직접 쿼리할 수는 없지만, 자신의 가상 요소(pseudo element)는 쿼리할 수 있습니다!
stuck
position: sticky의 요소가 정확히 언제 stuck(고정) 상태가 되는지 알 수 있습니다.
/* .outer-navbar가 stuck 상태일 때 */
@container scroll-state(stuck) {
.inner-navbar {
box-shadow: var(--shadow-3);
}
}이 기능을 사용하면 어떤 요소가 이제부터 스크롤 콘텐츠 위에 겹쳐 표시되고 있음을 쉽게 인지하도록 도와줍니다.
snapped
scroll-snap 정렬이 언제 활성화되어 있는지 정확하게 알 수 있습니다.
/* <li> 부모 요소가 snapped 일 때 */
@container scroll-state(snapped) {
.box {
scale: 1.1;
}
}
/* snapped 상태가 아닐 때 */
@container not scroll-state(snapped) {
.box figcaption {
translate: 0 100%;
}
}특정 아이템을 강조하거나 다른 모든 아이템을 하위 요소로 처리할 때 용이합니다.
scrollable
콘텐츠가 컨테이너 밖으로 넘치는 시점과 방향을 파악합니다.
@container scroll-state(scrollable) {
.scroll-hint {
opacity: 1;
}
}이를 활용해 힌트나 스크롤 인디케이터를 켜고 끄거나, 더 많은 콘텐츠가 있다는 것을 알리는 목적으로 패딩을 조정할 수 있습니다.
scrolled
콘텐츠가 어느 방향으로 스크롤되는지 알 수 있습니다.
@container scroll-state(scrolled: bottom) {
translate: 0 -100%;
}스크롤 방향에 따라 보이거나 숨겨지는 고정된 헤더나 네비게이션 바에 사용하세요.
관련 자료text-box
text-box로 텍스트 박스의 위아래 줄 사이 간격을 깔끔하게 잘라낼 수 있습니다!
웹 폰트 렌더링에는 보통 글리프 위아래에 안전한 여백(safe spacing)이 포함되는데, 경우에 따라 베이스라인이나 x-height에 픽셀로 딱 맞춘 정렬이 필요하기도 합니다.
위의 이미지를 CSS 코드로 구현하면 다음과 같습니다.
h1 {
text-box: trim-both cap alphabetic;
}이 한 줄만으로 대문자 높이 위의 여백과 알파벳 기준선 아래의 여백을 말끔히 자를 수 있습니다.
타이포그래피와 그리드 정렬에 진심인 사람들에게는 정말 완벽한 기능입니다.
아마 기본값처럼 쓰이게 되지 않을까요?
타입이 추가된 attr()
attr()의 고급 버전이 등장했습니다. 타입 안정적이며 훨씬 더 강력합니다.
타입 체크와 기본값을 포함하여 HTML 속성을 CSS에서 직접 사용할 수 있게 해줍니다.
색상을 전달해볼까요?
<div data-bg="white" data-fg="deeppink"></div>.theme {
background: attr(data-bg color, black);
color: attr(data-fg color, white);
}숫자를 전달하는 것도 가능합니다.
<div class="grid" data-columns="3">…</div>.grid {
--_columns: attr(data-columns number, 3);
display: grid;
grid-template-columns: repeat(var(--_columns), 1fr);
}HTML과 CSS 사이에 강력한 연결 고리가 생성된 셈입니다.
아래 코드는 CSS가 사실상 enum 역할을 하고, HTML은 원하는 동작을 얻기 위해 그에 맞는 유효한 값만 전달하는 예제입니다.
<li scroll-snap="start"></li>
<li scroll-snap="center"></li>
<li scroll-snap="end"></li>
<li scroll-snap="nothing"></li>[scroll-snap] {
scroll-snap-align: attr(scroll-snap type(start | center | end));
}type() 함수는 속성 값을 허용된 키워드 목록과 비교해 검증합니다.
유효하지 않은 값은 자동으로 안전한 기본값으로 대체됩니다.
이제 "다 갖고 싶다"는 욕심을 담아서 만든, AI 티가 나서 웃긴 짤을 하나 만들었는데 보면서 같이 웃어보는 건 어떨까요?
손은 여전히 잘 못 그리네요 ㅋㅋ
