# 최신 1줄짜리 CSS 업그레이드들

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13141](https://news.hada.io/topic?id=13141)
- GeekNews Markdown: [https://news.hada.io/topic/13141.md](https://news.hada.io/topic/13141.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-02-01T10:01:01+09:00
- Updated: 2024-02-01T10:01:01+09:00
- Original source: [moderncss.dev](https://moderncss.dev/12-modern-css-one-line-upgrades/)
- Points: 22
- Comments: 5

## Topic Body

### 안정적인 업그레이드   
- aspect-ratio : 비디오와 같은 요소에 강제로 종횡비를 적용  
- object-fit : img 또는 다른 대체 요소가 내용물의 컨테이너로 작동하고, background-size와 유사한 크기 조정 동작이 가능  
- margin-inline : 수평 쓰기 모드에서 왼쪽과 오른쪽 마진을 설정하는 단축 속성으로 작동  
### 안정적인 향상   
- text-underline-offset : 텍스트 기준선과 밑줄 사이의 거리를 제어  
- outline-offset : 요소와 윤곽선 사이의 거리를 조정  
- scroll-margin-top 및 scroll-margin-bottom : 스크롤 위치에 대한 요소의 오프셋을 추가  
- color-scheme : 브라우저 UI 요소를 light 또는 dark 스킴으로 렌더링하도록 브라우저에 요청  
- accent-color : 체크박스나 라디오 버튼의 색상을 변경  
- width: fit-content : 요소를 내용물의 크기에 맞게 "축소 포장(shrink wrap)"  
### 점진적인 향상   
- overscroll-behavior : 스크롤이 요소에서 끝나면 스크롤 상호작용이 배경 페이지로 전달되는 기본 동작을 변경  
- text-wrap : "고아"가 되는 단어를 방지하고 텍스트 줄의 균형을 맞추는 데 사용  
- scrollbar-gutter : 레이아웃에서 스크롤바를 위한 공간을 예약하여 원치 않는 레이아웃 변화를 방지

## Comments



### Comment 22797

- Author: pmc7777
- Created: 2024-02-04T02:11:17+09:00
- Points: 1

21세기 자린고비

### Comment 22729

- Author: anjin225
- Created: 2024-02-01T14:52:24+09:00
- Points: 1

-webkit-font-smoothing: antialiased;

### Comment 22724

- Author: [hidden]
- Created: 2024-02-01T14:03:18+09:00
- Points: 1

[숨김 처리된 댓글입니다]

### Comment 22750

- Author: singed
- Created: 2024-02-02T09:14:56+09:00
- Points: 2
- Parent comment: 22724
- Depth: 1

아직도 IE 지원하세요?

### Comment 22719

- Author: kuroneko
- Created: 2024-02-01T10:04:33+09:00
- Points: 1

이미 쓰고 있는 것도 있지만, 처음 보는 것도 있네요. +_+  
브라우저 지원이 아쉬울 때가 가끔 있지만, 최신 CSS를 보면 엄청 발전했다고 느껴져요.