# 2025년 최신 CSS에서 알아야 할 것들

> Clean Markdown view of GeekNews topic #23369. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=23369](https://news.hada.io/topic?id=23369)
- GeekNews Markdown: [https://news.hada.io/topic/23369.md](https://news.hada.io/topic/23369.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-09-30T10:34:01+09:00
- Updated: 2025-09-30T10:34:01+09:00
- Original source: [frontendmasters.com](https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/)
- Points: 16
- Comments: 3

## Summary

2025년 현재 **CSS/HTML**에는 **값 함수와 논리 분기, 형태 제어** 등 본질적으로 강화된 신기능들이 빠르게 확산되고 있습니다. 크롬 중심으로 **`auto` 키워드 사이즈 전환, `popover`, 사용자 정의 `@function`과 `if()`** 기능 등은 다양한 **UI 전환, 폼, 타이포그래피**와 같은 실무 영역에서 개발 생산성과 사용성 품질을 동시에 끌어올립니다. 한편 **컨테이너 쿼리, `:has()`, 뷰포트 단위(dvh)** 등 최신 문법들이 이미 표준적 실무 도구로 자리잡았으며, 새로운 기능 도입 시에는 **점진적 향상(PE) 전략**과 철저한 폴백 설계를 병행하는 것이 중요함을 강조합니다. 브라우저 지원 편차를 고려해 **핵심 효과와 실질 ROI**에 따라 최적의 기술 채택 로드맵을 설계하는 것이 핵심입니다.

## Topic Body

- 올 한 해 **새로 추가되었거나 지원이 확대된 CSS/HTML 기능**을 실전 관점에서 정리한 목록으로, UI 전환·폼·타이포그래피·함수형 CSS까지 폭넓게 다룸  
- **`auto` 등 키워드로의 사이즈 전환**, **HTML `popover`/invoker**, **CSS `@function`·`if()`** 같은 신기능이 핵심이며, 다수는 크롬 우선 지원이므로 **점진적 향상** 전략이 필요  
- **`field-sizing` 자동 확장 입력**, **커스텀 Select**, **`text-wrap: balance/pretty`**, **`linear()` 이징**, **`shape()` 경로** 등은 시각·사용성 품질을 손쉽게 올려줌  
- **강화된 `attr()`**, **읽기 순서 제어 `reading-flow`**, **`calc-size()`** 같은 값·흐름 제어 도구가 늘어 CSS만으로 처리 가능한 설계 범위가 확대됨  
- 아직 표준화·지원이 진행 중인 **Masonry, `random()`, `margin-trim`, View Transitions 확장** 등을 주시하되, **Container Queries, `:has()`, dvh 등**은 이미 실무 기본기로 자리잡음  
  
---  
### Animate to Auto  
- 임의 콘텐츠 높이를 갖는 요소에서 **고정값 ↔︎ `auto`** 로 **부드럽게 전환**할 수 있도록 하는 기능   
  - 전역에 `interpolate-size: allow-keywords`를 선언하면 `height: 0 → auto` 같은 전환 허용  
  - 또는 `interpolate-size` 없이 **`calc-size()`** 를 사용해 `height: calc-size(auto, size)`로 전환 수행  
- **장점**은 기존의 `max-height` 꼼수나 **오프스크린 측정 + JS 애니메이션** 같은 취약한 대안을 제거하고 **본연의 레이아웃 보존**을 유지함  
- **지원 현황**은 현재 **Chrome 중심**이며, 애니메이션은 **있으면 좋은** 수준이므로 **PE(Progressive Enhancement) 적용이 적합**  
  
### Popovers & Invokers  
- **`popover` 속성**은 임의 요소에 **열기/닫기 동작**과 대응 JS API를 부여하는 HTML 기능이며 **모달과는 다른 경량 오버레이** 범주에 해당  
  - **Invoker 속성**을 쓰면 JS 없이 **선언적 제어**가 가능함  
- **의의**는 **접근성·키보드·포커스 관리** 등을 HTML 레벨에서 **기본 제공**해 구현 누락 리스크를 줄인다는 점  
- **지원**은 Popover는 **광범위**, Invoker는 **Chrome 우선**이며 `popover="hint"` 등 **세부 기능 지원 차이** 존재  
  - **Polyfill** 이 제공되므로 필수 UX에 적합한 도입 가능  
  
### @function  
- CSS 값 함수 체계에 **사용자 정의 함수**를 도입, `@function --foo(--x) { result: ... }` 형태로 **공통 로직을 추상화** 가능  
- **중복 제거(DRY)** 와 선언부 단순화를 통해 **읽기·유지보수성 향상** 효과 제공  
- **지원**은 **Chrome 우선**, 합리적이면 `property: fallback` 다음 줄에 `property: --func()`로 **그레이스풀 폴백** 구사 가능  
  - Sass 함수와 **호환 아님**에 유의  
  
### if()  
- CSS 최초의 **값 수준 분기 함수**, `media()`·`supports()`·`style()` 조건을 **스위치 문처럼** 나열해 **첫 일치값 반환**  
  - 예: 브레이크포인트별 `grid-template-columns`를 **단일 선언**으로 기술  
- **효과**는 **가독성 개선**과 **반복 제거**이며, 커스텀 `@function`과도 궁합이 좋음  
- **지원**은 **Chrome 우선**, 폴백값을 먼저 선언해 **PE 패턴** 적용 권장  
  
### field-sizing  
- **입력/편집 요소가 내용에 맞춰 자동으로 커지는** `field-sizing` 속성 소개  
  - `<textarea>`의 **자동 높이 확장**이 대표 사례, 인라인 **즉석 리사이즈 UX**에도 응용 가능  
- **지원**은 **Chrome** 및 **Safari 도입 예정**, 필요 시 **경량 JS 대체** 가능  
  - 필수 기능이 아닌 **UX 향상** 성격이므로 점진적 도입 적합  
  
### Custom Selects  
- `select` 외형만이 아니라 **오픈된 선택 UI 자체를 스타일링**할 수 있도록 **명시적 옵트인** 후 **완전 커스터마이즈** 지원  
- **PE**가 뛰어나서 미지원 환경에서는 **기본 `<select>`** 로 안전하게 **폴백**됨  
- **지원**은 **Chrome 우선**, `appearance: base-select` 및 `::picker(select)` 등으로 **제어 면적 확장** 가능  
  
### text-wrap  
- **`text-wrap: balance`** 는 제목 등 큰 활자에 **행 길이 균형**을 맞추고, **`text-wrap: pretty`** 는 본문에서도 **고아줄·미관 개선**을 제공  
- **효과**는 **가독성·타이포그래피 품질 향상**으로, **코스트 없이 즉시 체감** 가능  
- **지원**은 `balance`는 **광범위**, `pretty`는 **Chrome·Safari** 우선이며 **PE**에 적합  
  
### linear() easing  
- 키워드 `linear`와 달리 **`linear()` 함수**는 **임의 개수의 포인트**로 **정교한 이징 커브**를 정의, **바운스 등 복합 동작** 구현에 유리  
- **대안**인 `cubic-bezier()`가 제한적인 반면, `linear()`는 **세밀한 타이밍 제어**를 제공하며 **전면 지원** 상태  
- 필요 시 **명명 이징**이나 `cubic-bezier()`로 **폴백** 구사 가능  
  
### shape()  
- 기존 `path()`의 **픽셀 전용·난해한 문법**을 보완한 **`shape()` 함수**로, **반응형 단위·커스텀 속성**을 활용해 **任의 경로**를 기술  
- **`clip-path`** 로 임의 형태 마스킹, **`offset-path`** 로 **경로 따라 배치/애니메이션**, 향후 **`shape-outside`** 와의 결합이 예고됨  
- **지원**은 **Chrome·Safari**, Firefox **플래그 진행**, 실제 개발에서는 **미려한 폴백 설계** 권장  
  
### More Powerful attr()  
- `attr()`가 **타입 지정**을 지원해 **숫자·색상 등 비문자 값**을 HTML 속성에서 **직접 읽어 CSS 값**으로 활용 가능  
- **의미**는 **테마 색상·카운트·크기** 등을 **마크업에서 주입**하는 패턴 확장임  
- **지원**은 **Chrome 우선**, **핵심 레이아웃 의존**보다는 **미적 강화 요소**부터 점진 도입 권장  
  
### Reading Flow  
- 시각 순서와 소스 순서가 어긋난 레이아웃에서도 **탭 이동 순서를 논리적으로 보정**하는 **`reading-flow`** 속성 도입  
  - 그리드 재배치 시 `reading-flow: grid-rows` 같이 **레이아웃 방식에 맞춘 포커스 흐름**을 지정  
- **접근성 리스크**를 **CSS 선언 한 줄**로 줄일 수 있어 **레이아웃 자유도**가 커짐  
- **지원**은 **Chrome 우선**이므로, 과도한 재정렬은 **범용 지원 전까지 자제**가 권장됨  
  
### Stuff to Keep an Eye On  
- **Masonry 레이아웃**은 사양 정리 중이며 **`item-flow` 제안**이 **그리드 너머의 배치 가능성**을 확장할 전망  
- **`random()` 함수**는 **Safari 제공** 중으로 **표현력 높은 변주 디자인** 구현에 유익  
- **`margin-trim`** 은 유용하나 **Safari 중심**, **`sibling-index()/count()`** 는 **Chrome** 제공으로 **스태거 애니메이션**에 유용  
- View Transitions의 **`view-transition-name: match-element;`**, **Firefox 개발 진행** 등 **크로스 브라우저 호재** 존재  
- **단위 혼합 `calc()` 곱셈/나눗셈** 합리화가 **실험 통과 임박**으로, 과거 **형 변환 해크** 필요성 축소 전망  
- “**CSS4**” 같은 **버전 네이밍 부재** 문제 제기와, 최근 5년 신기능을 모은 **참고 리스트** 소개  
  
### Great Stuff to Remember  
- **Container Queries & 단위**는 **미디어쿼리 이후 최대 생산성 향상**으로 계속 **핵심 기본기** 위치  
- **`:has()`** 는 **부모·상태 기반 선택**을 가능하게 해 **복잡한 조합 선택**을 **CSS만으로 해결**하는 폭넓은 활용성 제공  
- **View Transitions, Anchor Positioning, Scroll-Driven Animations** 는 **Safari 도달**로 **현업 채택 장벽**이 낮아진 상태  
- **추가 뷰포트 단위(dvh 등)** 가 **Baseline 등재**로 **모바일 뷰포트 안정성** 향상  
  
### 코드/사용 예 하이라이트  
- **사이즈 전환**: 전역 `interpolate-size: allow-keywords` 또는 **상태 토글 시** `height: calc-size(auto, size)`로 **콘텐츠 높이 애니메이션** 구성  
- **그리드 분기**: `if(media(...): 값; ... else: 값;)` 패턴으로 **브레이크포인트별 템플릿 컬럼**을 **단일 선언**에 집약  
- **커스텀 Select**: `select, ::picker(select) { appearance: base-select }` 로 **사용자 정의 피커** 활성화  
- **바운스 이징**: `animation-timing-function: linear( ... 다수 포인트 ... )` 로 **세밀한 반동/감쇠 곡선** 구현  
- **클립 경로**: `clip-path: shape( ... )` 로 **반응형 비율 기반 도형** 마스킹 구성  
  
### 실무 적용 가이드  
- **브라우저 지원 편차**가 큰 항목은 **폴백 우선 설계**와 **진입 비용 대비 효과**를 기준으로 도입  
  - 애니메이션·타이포그래피·시각 효과는 **PE 우선 후보**, **포커스/탭 순서** 같은 **핵심 접근성**은 **광범위 지원 후 채택** 권장  
- **자체 함수/분기**는 **설계 규칙 문서화**와 **토큰·커스텀 속성** 결합으로 **팀 공용 패턴**화할 때 ROI 극대화  
- **폼 UX** 개선 항목(`field-sizing`, Custom Select)은 **모바일 우선 시나리오**에서 **체감 이득**이 큼  
  
### 결론  
- 2025년판 현대 CSS는 **값 함수·논리 분기·형태 제어** 확대로 **“CSS로 더 많이 할 수 있는”** 해이며, **PE 전략**과 함께 단계적 채택 가치가 큼  
- **기본기(컨테이너 쿼리, `:has()`, 뷰포트 단위)** 를 바닥에 깔고, **`animate-to-auto`·`if()`·`shape()`** 같은 **고효율 항목**을 우선 도입하는 **현실적 로드맵**이 유효함

## Comments



### Comment 44611

- Author: shakespeares
- Created: 2025-10-06T15:29:53+09:00
- Points: 1

CSS가 이제 거의 언어가 되었네요. 논리적인 구현을 웬만큼 가능하게 되어버려서..   
스타일시트가 맞나 싶어요.

### Comment 44458

- Author: chl11wq12
- Created: 2025-10-01T12:15:17+09:00
- Points: 1

개꿀 기능 많아 지겠네 그동안 javascript로 구현해야 했던 것들이

### Comment 44416

- Author: addons
- Created: 2025-09-30T12:45:15+09:00
- Points: 1

Css가 정말많이 좋아졌네요