2025년 디자이너들을 위한 새로운 프론트엔드 기능들

 
안녕하세요 찐망고입니다
 
2025년을 대비해 프론트엔드 개발에서 새롭게 등장한 HTML과 CSS의 기능들을 소개하고,
이런 기능들이 얼마나 개발을 쉽게 만들어주는지 알려주려는 글이 있어 포스팅(번역) 해봅니다.

New Front-End Features For Designers In 2025 — Smashing Magazine

 
 
QUICK SUMMARY
웹 기술이 엄청 발전한 와중에 너무 새로운 도구와 방식만 찾다 보면 기본 기능들이 얼마나 대단한지 잊기 쉽습니다.
이 글에서는 새롭게 추가된 프론트엔드 기능들이 어떤 가능성을 열어주는지 알려줍니다.
 
요즘 웹에서는 "컴포넌트마다 스타일을 따로 적용하거나", "부모 요소를 자식 요소 기준으로 스타일링"하거나,
"색상을 동적으로 설정"하는 게 가능해졌습니다.
예전엔 이런 걸 하려면 자바스크립트를 꼭 써야 했는데,
이제는 HTML과 CSS만으로도 가능해졌습니다. 정말 편해진 거죠!
 
2025년이 다가오면서, 요즘 브라우저에서 사용할 수 있는 새로운 기술들을 다시 한번 점검할 때입니다.
이 기술들이 얼마나 개발을 편리하게 만들어주는지,
그리고 멋진 UI를 만드는 데 얼마나 도움을 주는지 알아보자는 이야기입니다.
 
 

CSS Container Queries And Style Queries

컴포넌트별 스타일 적용?
개발자들에게는 오랫동안 꿈같이 들렸던 기능이 이제 현실로 다가오고 있습니다.
컨테이너 쿼리(Container Query) 덕분에,
이제 컴포넌트가 위치한 컨테이너의 너비와 스타일을 직접 확인하고 이에 따라 스타일을 적용할 수 있게 되었어요.

스타일 쿼리는 CSS 스타일을 훨씬 더 논리적이고 체계적으로 제어할 수 있는 기능을 제공

 

1. .card-container:
   • 카드들을 담고 있는 부모 컨테이너입니다.
   • 이 컨테이너 안의 요소들에 대해 스타일링을 적용할 때 중요한 기준이 됩니다.
2. .card:
   • 컨테이너 안의 개별 카드 컴포넌트입니다.
   • Query parent directly라는 내용은 자식 요소가 부모 요소(컨테이너)의 속성을 기준으로 스타일을 결정할 수 있다는 뜻이에요.
3. .card-list { container-name: cards; }:
   • .card-list라는 컨테이너에 이름을 부여하고(container-name: cards;), 이후 이를 사용해 CSS 스타일링을 논리적으로 제어할 수 있습니다.
   • 즉, 특정 이름을 가진 컨테이너의 속성을 조건으로 자식 스타일링이 가능해집니다.

 
Una Kravets가 스타일 쿼리를 소개하면서 설명했듯이, 
현재 스타일 쿼리는 CSS 커스텀 속성에만 적용되지만, 실무에서 충분히 활용 가능한 사례가 많습니다.
특히 여러 변형이 있는 재사용 가능한 컴포넌트를 다룰 때,
또는 모든 스타일을 제어할 수는 없지만 특정 상황에서 변경을 적용해야 할 때 매우 유용합니다.
더 깊은 이해를 원하면 Geoff Graham의 글을 통해 세부적인 내용을 확인해보세요.
 

 

No More Typographic Orphans And Widows

제목이나 텍스트의 마지막 단어가 다음 줄로 넘어가 혼자 남아 있는 경우를 다들 본 적이 있을 거예요. 
이러면 시각적으로 어색하게 보이죠.
물론 <br> 태그나 <span>을 사용해 수동으로 텍스트를 조정할 수도 있지만,
text-wrap: balance라는 속성을 들어본 적 있나요?

text-wrap: balance 덕분에 어색한 줄바꿈은 이제 그만!

 
text-wrap: balance 속성을 사용하면 브라우저가 단어 수를 자동으로 계산해서 두 줄에 고르게 나눠줍니다.
페이지 제목, 카드 제목, 툴팁, 모달 창, FAQ 등에 특히 유용합니다.
Ahmad Shadeed는 text-wrap: balance에 대한 유용한 가이드를 작성했는데, 
이를 통해 이 속성이 제목을 더 깔끔하고 일관되게 보이도록 돕는 방법을 자세히 설명했습니다.
 
단락처럼 긴 텍스트를 다룰 때는 text-wrap: pretty 속성을 사용해 마지막 줄에 혼자 남는 단어를 방지할 수 있습니다.
 
 

Auto Field-Sizing For Forms

입력 필드 크기를 딱 맞게 설정하려면 보통은 감으로 맞추거나, 
아니면 자바스크립트를 사용해서 글자 수를 세고 필드의 높이와 너비를 늘려야 했죠. 
그런데 이제 CSS의 새로운 field-sizing 속성 덕분에 이 문제가 해결됨!
 
field-sizing을 사용하면:
입력 필드나 텍스트 영역의 크기가 자동으로 늘어나고,
너무 짧은 드롭다운(select 메뉴)의 크기는 자동으로 줄어듭니다.
결과적으로, 폼은 항상 콘텐츠 크기에 딱 맞게 조정돼요. 더 좋은 건, 이 모든 걸 CSS 한 줄로 해결할 수 있다는 점!

field-sizing 속성 은 입력 필드와 텍스트 영역의 크기를 입력된 내용의 크기에 맞춰 자동으로 늘리거나 줄이는 기능을 제공

 
Adam Argyle는 이 기능에 대해 필요한 모든 것을 한 곳에 정리했는데
여기서는 field-sizing이 다양한 <form> 요소에 어떤 영향을 미치는지 자세히 설명하고 있습니다.

팁: 입력 필드가 너무 작아지거나 너무 커지는 걸 방지하려면, 
추가 스타일을 적용해서 폼의 모양을 일정하게 유지하는 것도 좋은 방법이에요.
Adam이 바로 복사해서 사용할 수 있는 코드 스니펫도 공유했으니 참고해 보세요.
 
 

Making Hidden Content Searchable

아코디언(Accordion)은 인기 있는 UI 패턴이지만 한 가지 문제가 있습니다.
접힌 섹션 안의 콘텐츠는 "페이지 내 검색(find-in-page search)"으로 찾을 수 없다는 점이죠.
이 문제를 해결하려면, HTML 속성 hidden=until-found와 이벤트 beforematch를 사용하면 됩니다.
이렇게 하면 숨겨진 콘텐츠도 검색이 가능해지고, 심지어 검색 엔진도 해당 콘텐츠에 접근할 수 있게 만들 수 있어요.

hidden=until-found 속성을 사용하면, 아코디언처럼 숨겨진 콘텐츠도 검색

 
Joey Arhar가 그의 가이드에서 설명했듯이, 
숨겨진 섹션을 처리하는 기존 스타일을 hidden=until-found 속성으로 대체할 수 있어요.
만약 페이지에서 섹션이 열리거나 닫히는 상태를 동기화해야 하는 다른 상태가 있다면, 
beforematch 이벤트 리스너를 추가하는 것을 추천합니다.
이 이벤트는 브라우저가 hidden=until-found 요소를 보여주기 바로 전에 실행되므로, 
숨겨진 요소를 효과적으로 제어할 수 있습니다.
 
 

Styling Groups Within Select Menus 

이건 <select> 요소에 작은 업데이트지만, 꽤 강력한 기능인데요.
이제 <select> 옵션 목록에 <hr> 태그를 추가할 수 있게 되었어요.
<hr> 태그는 분리선(구분선)처럼 표시되어 목록의 옵션들을 시각적으로 나누는 데 도움을 줍니다.

<select> 메뉴에 옵션이 많을 때 딱! 이제 옵션을 그룹으로 묶을 수 있습니다.

 
더 세부적으로 조정하고 싶다면 <optgroup> 태그를 사용해보세요.
이 HTML 요소는 <select> 안에서 옵션들을 그룹화할 수 있도록 도와주며,
각 그룹에 소제목(subheading)을 추가할 수도 있습니다.
 
 

Simpler Snapping For Scrollable Containers 

가끔 빠르고 간단하게 스크롤 가능한 컨테이너를 만들어야 할 때가 있죠.
CSS Scroll Snap을 사용하면 가능합니다!
이 기능은 사용자가 좌우로 스와이프하거나 특정 콘텐츠에 정확히 멈출 수 있는 깔끔한 스크롤 경험을 제공해줍니다.
놀라운 점은, JavaScript 없이도 구현 가능하다는 것!

스크롤 가능한 컨테이너를 간단하게 만들어주는 CSS 기능이 있었으면 좋겠다고 생각한 적 있나요? CSS Scroll Snap 이 바로 그 해답

Ahmad Shadeed가 작성한 실용 가이드에서는 Scroll Snap 컨테이너를 설정하는 방법을 단계별로 자세히 설명해줍니다.
이를 활용하면 이미지 갤러리, 아바타 리스트 등 사용자가 콘텐츠를 스크롤하면서
부드럽게 정렬될 수 있는 컴포넌트를 쉽게 만들 수 있어요.
가로, 세로 스크롤 모두 적용 가능하다는 것도 큰 장점입니다.
 
이건 추후 다시 포스팅 하겠습니다 작업하기 너무 편해지네요.
 
 
 

Anchor Positioning For Tooltips And Popovers

각주(footnotes), 툴팁(tooltips), 연결선(connector lines), 시각적 참조(visual cross-referencing),
또는 차트의 동적 레이블(dynamic labels)을 만들 때,
CSS Anchor Positioning API를 사용하면 다른 요소(앵커라 부름)를 기준으로 요소를 자연스럽게 배치할 수 있습니다.

CSS Anchor Positioning API 를 사용하면 외부 라이브러리 없이도 레이어드 인터페이스 를 만들 수 있습니다.

Una Kravets는 CSS Anchor Positioning API 소개에서 이 기능이 어떻게 작동하는지 자세히 정리했어요.
그는 앵커 포지셔닝의 작동 원리, 하나의 앵커 또는 여러 앵커에 연결하는 방법, 
그리고 앵커 크기를 기준으로 요소 크기와 위치를 조정하는 방법을 다룹니다.

단, 브라우저 지원이 아직 제한적이기 때문에, 사용할 때 주의가 필요할 수 있습니다. 
Una의 가이드에서는 이 API를 사용할 때 유의해야 할 점도 다루고 있습니다.
 

 

High-Definition Colors With OKLCH And OKLAB

LCH, okLCH, LAB, okLAB 같은 고해상도 컬러를 사용하면, 
기존 RGB/HSL에 비해 50% 더 많은 색상을 사용할 수 있습니다.
RGB/HSL의 시대가 곧 끝날 수도 있다는 의미죠.
이 새로운 컬러 스페이스에 익숙해질 수 있도록, Vitaly가 작성한 필수 정보 요약을 참고하세요.

RGB와 HSL의 시대가 곧 끝날지도 모릅니다. 이제 고해상도 컬러를 만나보세요!

okLCH와 okLAB은 인간의 시각적 인식을 기반으로 하며, 사람이 볼 수 있는 모든 색상을 지정할 수 있습니다.
okLAB: 생생한 그라데이션에 최적화.
okLCH: 디자인 시스템에서 색상 팔레트로 사용하기에 좋은 선택.
이 컬러 시스템은 Chrome, Edge, Safari, Firefox, Opera에서 완벽히 지원됩니다.
하지만 아직 Figma에서는 지원되지 않습니다.
 
 
 

Relative Colors In CSS

배경색이 있다고 가정해 봅시다. 이 배경색의 밝기(luminosity)를 25% 줄이거나,
보색(Complementary Color)을 사용하고 싶은데 직접 계산하기는 귀찮겠죠?
Relative Color Syntax (RCS)를 사용하면, 기존 색상을 기준으로 새로운 색상을 자동으로 생성할 수 있습니다.

Relative colors(상대 색상)를 사용하면 기존 색상을 기반으로 새로운 색상을 자동으로 계산할 수 있습니다.

새로운 색상을 계산하거나 생성하려면 색상 함수(color(), hsl(), oklch() 등)와 함께
from 키워드를 사용해 입력 색상의 값을 수정할 수 있습니다.
Adam Argyle가 코드 스니펫을 통해 실제로 어떻게 사용하는지 보여줬으니 참고하거나, 스펙 문서를 확인해 보세요.
 
 
 

Smooth Transitions With The View Transitions API

부드러운 시각적 전환은 사용자 경험을 더 매력적으로 만들 수 있는 다양한 활용 사례가 있습니다.
예를 들어, 상품 목록 페이지의 썸네일 이미지가 상품 상세 페이지의 전체 크기 이미지로 전환되거나,
페이지 간 이동 시 고정된 네비게이션 바가 자리를 유지할 때 말이죠.
View Transitions API는 사이트의 서로 다른 뷰(view) 간에 매끄러운 시각적 전환을 쉽게 구현할 수 있도록 도와줍니다.

View Transitions API는 서로 다른 뷰(view) 간에 매끄러운 시각적 전환을 제공

 
View Transitions는 한 문서 내에서만 적용되는 것이 아니라, 서로 다른 두 문서 간에도 트리거할 수 있습니다.
원리는 동일합니다:

브라우저가 이전 상태와 새로운 상태를 스냅샷으로 캡처.
DOM이 업데이트되지만 렌더링은 억제됨.
전환은 CSS 애니메이션을 기반으로 작동.
차이는 어떻게 트리거를 설정하는가에 있습니다.
Bramus Van Damme가 작성한 View Transitions API 가이드에서 이 과정을 자세히 설명하고 있습니다.

이 API는 무거운 JavaScript 프레임워크에 의존하는 싱글 페이지 앱(SPA)에 대한 좋은 대안이 될 수 있습니다.
 
 
 

Exclusive Accordions

Exclusive Accordion은 아코디언 컴포넌트의 한 변형입니다.
한 번에 하나의 위젯만 열리도록 설정되며,
사용자가 새로운 위젯을 열면 기존에 열려 있던 위젯은 자동으로 닫혀 공간을 절약합니다.
이제 CSS만으로, JavaScript 코드 없이도 이 효과를 구현할 수 있습니다.

Exclusive Accordion은 새로운 위젯을 열 때 기존 위젯이 자동으로 닫히는 기능을 제공

이를 구현하려면, <details> 요소에 name 속성을 추가해야 합니다.
같은 name 값을 가진 모든 <details> 요소는 semantic group을 형성하며,
Exclusive Accordion처럼 동작합니다.
Bramus Van Damme가 작성한 사용 방법 요약을 참고하세요.
 
 
 

Live And Late Validation

:valid와 :invalid를 사용해서 사용자의 입력에 따라 스타일을 적용할 때 단점이 하나 있습니다.
필수(required)이고 비어 있는 입력 필드가 사용자와의 상호작용이 시작되지 않았음에도 :invalid로 인식된다는 점이죠.
이 문제를 막으려면 보통 사용자가 입력을 변경했는지 추적하는 상태 기반(stateful) 코드를 작성해야 했습니다.
하지만 이제는 그럴 필요가 없어졌습니다.

":user-valid"와 ":user-invalid"는 입력 유효성 검사의 사용자 경험을 개선

 
이제 :user-valid 와 :user-invalid 를 사용하면 이 모든 문제를 CSS만으로 자동으로 해결 가능합니다
:valid와 :invalid와는 다르게, :user-valid와 :user-invalid는 사용자가 입력을 변경한 후에만
잘못된 입력에 대한 피드백을 제공합니다.
:user-valid와 :user-invalid는 input, select, textarea 요소에서 사용할 수 있습니다.
 
 
 

Smooth Scrolling Behavior 

스크롤 박스가 있고, 그 안의 특정 위치를 가리키는 링크들이 있다고 상상해 보세요.
사용자가 링크를 클릭하면 스크롤 박스 내의 콘텐츠 섹션으로 이동하지만, 꽤 갑작스럽게 점프하는 느낌을 받게 됩니다.
scroll-behavior 속성을 사용하면, CSS만으로 스크롤 전환을 훨씬 부드럽게 만들 수 있습니다.

scroll-behavior는 내비게이션을 통해 스크롤이 트리거될 때 스크롤 박스의 동작 방식을 설정

 
scroll-behavior: smooth로 설정하면, 부드러운 방식(smooth fashion)으로 스크롤되며,
사용자 에이전트(user-agent)에 의해 정의된 시간 동안 이징 함수(easing function)를 사용합니다.
물론, scroll-behavior: auto를 사용하면 스크롤 박스가 즉시 이동하게 됩니다.
 
 
 
 

Making Focus Visible

포커스 스타일(focus styles)은 키보드 사용자들이 페이지를 탐색하는 데 필수적입니다.
하지만 마우스 사용자들에게는 버튼이나 링크를 클릭할 때 나타나는 포커스 링(focus ring)이 거슬릴 수 있습니다.
:focus-visible은 두 사용자 그룹 모두에게 최적의 경험을 제공합니다:

키보드 사용자에게는 포커스 스타일을 표시하고,
마우스 사용자에게는 숨겨줍니다.

:focus-visible은 필요할 때만 포커스 스타일을 표시

이 속성은 요소가 :focus 가상 클래스와 일치하고,
사용자 에이전트(User Agent)가 휴리스틱(heuristics)을 통해 해당 요소에 포커스를 표시해야 한다고 판단할 때 적용됩니다.
 
실제 사용법이 궁금하신가요?
MDN Web Docs는 :focus와 :focus-visible의 차이점, 접근성을 고려할 때 주의해야 할 점,
그리고 :focus-visible을 지원하지 않는 구형 브라우저를 위한 폴백(fallback)을 제공하는 방법에 대해 다루고 있습니다.
 
 
 
 

Styling Parents Based On Children

과거에는 CSS 선택자가 부모 요소를 기준으로 자식 요소를 스타일링하는 top-down방식으로 작동했습니다.
하지만 새로운 CSS 가상 클래스 :has는 반대 방향으로 작동합니다:
이제 자식 요소를 기준으로 부모 요소를 스타일링할 수 있습니다.

Josh W. Comeau는 :has 소개에서 이 가상 클래스가 실제로 어떻게 사용될 수 있는지, 다양한 사례를 통해 자세히 설명했습니다.

:has는 다른 요소의 속성이나 상태를 기준으로 특정 요소를 스타일링 할 수 있게 해줌

 
이 가상 클래스는 부모-자식 관계나 직접적인 형제 요소에만 제한되지 않습니다.
대신, 완전히 다른 컨테이너에 있는 요소의 속성이나 상태를 기준으로 스타일링할 수 있습니다.

Josh는 이를 전역 이벤트 리스너처럼 사용하는 방법도 소개했는데, 
예를 들어:
모달이 열릴 때 페이지 스크롤을 비활성화하거나,
자바스크립트 없이 다크 모드 토글을 구현하는 데 사용할 수 있습니다.
 
 
 

Interpolate Between Values For Type And Spacing

CSS 비교 함수인 min(), max(), 그리고 clamp()는 이제 모든 주요 브라우저에서 지원됩니다.
이 함수들은 유동적인 글자 크기(fluid type scales), 그리드, 그리고 간격 시스템을 사용한
동적인 레이아웃을 만드는 데 효과적인 방법을 제공합니다.

디자인의 미래는 유동적이다

이 함수들을 프로젝트에서 바로 사용할 수 있도록, Ahmad Shadeed는 포괄적인 가이드를 작성했습니다.
이 가이드에서는 min(), max(), clamp()에 대해 알아야 할 모든 것,
실용적인 예제와 실제 사용 사례, 그리고 혼란스러울 수 있는 포인트까지 모두 다루고 있습니다.
 
동적인 글자 크기를 간단하고 빠르게 만들고 싶다면, Utopia의 Fluid Type Scale Calculator를 활용해 보세요.
최소 및 최대 뷰포트 너비와 스케일 단계(step) 수를 정의하기만 하면 됩니다.
이 계산기는 스케일의 반응형 미리보기와 함께 CSS 코드 스니펫을 제공해 줍니다.

Reliable Dialog And Popover 

만약 모달 창이나 팝업을 빠르게 만들고 싶다면, <dialog> HTML 요소가 드디어 natively
그리고 접근성(accessible)까지 고려된 해결책을 제공합니다.
이 요소는 모달(modal) 또는 비모달(non-modal) 대화 상자나 확인 메시지, 데이터를 입력하는
서브윈도우 같은 상호작용 요소를 나타냅니다.

이제 팝업과 툴팁팝업를 차단하거나 비차단 메뉴를 처리하기 위한 접근성 높은 <dialog> 메뉴를 사용할 수 있습니다

모달 대화 상자는 페이지와의 상호작용을 차단하지만,
비모달 대화 상자(non-modal dialog boxes)는 대화 상자가 열려 있는 동안에도 페이지와의 상호작용을 허용합니다.

Adam Argyle는 <dialog>를 사용해 팝업이나 팝오버를 차단하거나, 
비차단 메뉴를 처리하는 방법에 대한 코드 스니펫을 공유했습니다. 이 모든 것을 추가 설정 없이 바로 사용할 수 있습니다.
 
 
 

Responsive HTML Video And Audio

2014년에 HTML 비디오 소스에서 미디어 속성(media attribute) 지원이 HTML 표준에서 삭제되었습니다.
그러나 작년에 다시 부활했으며, 이를 통해 미디어 쿼리(media queries)를 사용하여 반응형 HTML 비디오를 제공할 수 있게 되었습니다.

브라우저의 뷰포트(viewport)에 따라 비디오와 오디오 파일을 조정하면 페이지 로드 부담(page payload)을 줄일 수 있음

 
Scott Jehl은 반응형 HTML 비디오 및 오디오가 작동하는 방식, 마크업 작성 시 고려해야 할 사항,
그리고 HTML 비디오와 함께 사용할 수 있는 다양한 미디어 쿼리 유형에 대해 요약했습니다.
 
 
 

The Right Virtual Keyboard On Mobile

작은 디테일이지만, 잘 설계된 사용자 경험(UX)을 만드는 중요한 요소입니다:
가장 편리한 터치스크린 키보드를 표시하여 사용자가 숫자, 구두점, 또는 @와 같은 특수 문자를 입력할 때
불필요하게 키보드를 전환하지 않도록 도와줍니다.

적절한 가상 키보드는 모바일 사용자의 경험을 향상

 
적합한 키보드 레이아웃을 표시하려면 inputmode를 사용할 수 있습니다.
이 속성은 브라우저에 어떤 키보드를 표시할지 지시하며,
숫자(numeric), 전화(telephone), 소수점(decimal), 이메일(email), URL, 검색(search) 키보드를 지원합니다.
UX를 한 단계 더 개선하려면 enterkeyhint 속성을 추가할 수 있습니다.
이 속성은 Enter 키의 텍스트를 조정합니다.
만약 enterkeyhint가 설정되지 않았다면, 브라우저는 inputmode 속성의 문맥 정보를 사용할 수 있습니다.
 
 
 

A Look Into The Future 

우리 프로젝트에서 새롭고 멋진 프론트엔드 기능들을 점점 더 도입하고 있는 가운데,
웹 플랫폼은 계속해서 진화하고 있습니다.
이미 다가오고 있는 흥미로운 기능들도 있는데요!
예를 들어, 곧 masonry layout, <selectmenu>를 사용한 완전히 커스터마이즈 가능한 드롭다운,
그리고 그리드에 맞게 글꼴을 완벽히 정렬할 수 있는 text-box trimming을 사용할 수 있게 될 것입니다.
웹을 앞으로 나아가게 하기 위해 열심히 일하는 모든 멋진 사람들에게 박수를 보냅니다! 👏
 
프론트엔드와 UX 세계에서 어떤 일이 일어나고 있는지 놓치고 싶지 않으신가요?
저희의 주간 뉴스레터(weekly newsletter) 유용하고 실용적인 팁들을 제공하며,
웹 산업에서 사람들이 작업하고 있는 유익한 내용을 공유하는 것을 목표로 합니다.
모든 뉴스레터는 세심한 큐레이션, 작성, 편집을 통해 제공됩니다.
제3자 메일링이나 숨겨진 광고는 없습니다.
 
또한, 구독(subscribe)을 통해 저희가 운영 비용을 충당하는 데 큰 도움이 됩니다.
따뜻한 지원에 감사드립니다!
 
 
 
*masonry layout*
벽돌을 쌓아 올린 벽(벽돌쌓기 방식, Masonry)에서 영감을 받은 디자인 레이아웃으로,
불규칙한 높이의 요소들을 빈 공간 없이 조밀하게 배치하는 방식
Pinterest와 같은 사이트에서 흔히 볼 수 있는 그리드 레이아웃 스타일을 뜻함
 
 
 
 
요약정리

1. Anchor Positioning

• 기능: CSS Anchor Positioning API를 사용해 요소를 다른 요소(앵커)에 상대적으로 배치.
• 활용 사례: 툴팁, 동적 레이블, 연결선 등 레이어드 인터페이스 구성.

 

2. Container Queries

• 기능: 요소의 컨테이너 크기나 상태를 기준으로 스타일 변경 가능.
• 장점: 보다 유연하고 반응형 레이아웃 구현.

 

3. Exclusive Accordions

• 기능: <details name="">를 사용해 하나의 아코디언 섹션만 열리게 설정.
• 장점: JavaScript 없이 접근성 높은 UI 구성 가능.

 

4. :has

• 기능: 자식 요소 상태에 따라 부모 요소 스타일링.
• 활용 사례: 다크 모드 토글, 특정 조건에서 이벤트 트리거로 사용

 

5. High-Definition Colors

• 기능: LCH, okLCH, LAB, okLAB을 사용해 기존 RGB/HSL 대비 50% 더 많은 색상 표현.
• 장점: 풍부한 색감 제공, 주요 브라우저에서 지원

 

6. Input Mode (inputmode)

• 기능: 숫자, 이메일 등 입력 상황에 맞는 가상 키보드 제공.
• 추가 기능: enterkeyhint로 Enter 키 텍스트 맞춤 설정.

 

7. Relative Colors

• 기능: 기존 색상을 기준으로 새로운 색상 자동 계산.
• 장점: 보조 색상, 밝기 감소 등의 작업 간소화.

 

8. Scroll Behavior

• 기능: scroll-behavior: smooth를 사용해 부드러운 스크롤 전환 제공.
• 장점: CSS만으로 스크롤 효과 구현 가능

 

9. text-wrap: balance

• 기능: 텍스트 줄바꿈 균형을 맞춰 가독성 향상.
• 활용 사례: 제목이나 큰 텍스트 블록.

 

10. View Transitions API

• 기능: 단일/다중 문서 간 부드러운 전환 애니메이션 제공.
• 장점: SPA 대안으로 활용 가능

 

11. Auto Field-Sizing

• 기능: 텍스트 크기에 따라 입력 필드 크기 자동 조정.
• 장점: 동적인 UI 구현 간소화.

 

12. <dialog>

• 기능: 네이티브 HTML로 모달 및 비모달 대화 상자 구현.
• 장점: JavaScript 없이 접근성 높은 팝업 구성 가능.

 

13. :focus-visible

• 기능: 키보드 사용자에게만 포커스 스타일 표시.
• 장점: 마우스 사용자 경험 개선, 접근성 강화

 

14. hidden=until-found

• 기능: 숨겨진 콘텐츠를 검색 가능하게 만듦.
• 활용 사례: 접근성을 높이기 위한 검색 인터페이스 개선

 

15. <hr> in <select>

• 기능: <select> 요소 안에서 <hr>로 옵션 그룹을 구분.
• 장점: 시각적 구분을 통해 UX 개선.

 

16. min(), max(), clamp()

• 기능: CSS 비교 함수로 동적인 레이아웃 구성.
• 활용 사례: 반응형 글자 크기, 그리드, 간격 조정.

 

17. Responsive Videos

• 기능: 미디어 쿼리로 반응형 비디오 구현.
• 장점: 브라우저 뷰포트에 따라 비디오 크기 조정.

 

18. Scroll Snap

• 기능: 스크롤 컨테이너에서 특정 아이템에 정확히 스크롤 고정.
• 활용 사례: 이미지 갤러리, 캐러셀.

 

19. :user-valid and :user-invalid

• 기능: 사용자가 입력을 변경한 후에만 유효성 검사 스타일 표시.
• 장점: UX 개선, 잘못된 입력에 대한 피드백 제공.