# 웹사이트에 꼭 추가해야할 3가지 최신 CSS 속성 > Clean Markdown view of GeekNews topic #12532. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=12532](https://news.hada.io/topic?id=12532) - GeekNews Markdown: [https://news.hada.io/topic/12532.md](https://news.hada.io/topic/12532.md) - Type: news - Author: [xguru](https://news.hada.io/@xguru) - Published: 2023-12-26T10:03:01+09:00 - Updated: 2023-12-26T10:03:01+09:00 - Original source: [bejamas.io](https://bejamas.io/blog/modern-css-properties-your-website-must-have/) - Points: 43 - Comments: 4 ## Topic Body ### color-scheme - 웹사이트가 다크 모드를 지원함에도 스크롤바가 하얀색으로 밝게 빛나는 문제가 있음 - `color-scheme` 속성을 `dark light`로 설정하면 브라우저에게 페이지가 다크 모드와 라이트 모드를 모두 처리할 수 있음을 알리고, 스크롤바도 어두워짐 - 메타 태그를 사용하여 문서에 `color-scheme`을 적용할 수 있으며, 이는 CSS를 로딩하기 전에 브라우저가 사용자의 선호도를 알 수 있게 함 - `prefers-color-scheme` 미디어 기능과 함께 사용하면 사용자의 선호에 따라 변경할 부분을 완벽하게 제어할 수 있음 - `:has()` 선택자를 사용하여 `body`에 `dark` 클래스가 있을 때 루트 요소에 `color-scheme` 속성을 적용할 수 있음 ### text-wrap - 제목이나 캡션의 줄바꿈이 이상하게 되어 마지막 줄에 단어 하나만 오는 경우가 있음 - `text-wrap` 속성에 `balance` 값을 사용하면 웹사이트의 제목을 균형 있게 만들 수 있음 - 이 기능은 브라우저에 구애받지 않으며, 현대적인 설정에서 잘 작동하면서 오래된 설정에서도 우아하게 성능이 저하됨 ### Scroll-margin - 웹페이지에서 앵커 링크를 사용할 때, 고정된 헤더 때문에 대상 요소가 가려지는 문제가 발생함 - `scroll-margin` CSS 속성을 사용하여 `scroll-margin-top` 값을 고정 헤더의 높이에 맞추면 이 문제를 해결 가능 - `:is` 선택자를 사용하여 `h2`, `h3`, `h4` 등 여러 요소에 대해 동일한 처리를 적용할 수 있으며, `ex`나 `lh`와 같은 단위를 사용하여 동적 간격을 설정할 수 있음 ## Comments ### Comment 21770 - Author: amino014 - Created: 2023-12-28T08:52:53+09:00 - Points: 1 이건 정말 꿀팁이네요 감사합니다 ### Comment 21749 - Author: arfwene - Created: 2023-12-27T09:56:29+09:00 - Points: 1 스크롤바 좋네요 ### Comment 21720 - Author: xguru - Created: 2023-12-26T10:06:03+09:00 - Points: 2 스크롤바 하얀색은 많이 튀네요. 긱뉴스에도 dark light로 바로 적용했습니다. 쉬운 방법이 있었군요 ### Comment 21726 - Author: kuroneko - Created: 2023-12-26T10:31:07+09:00 - Points: 1 - Parent comment: 21720 - Depth: 1 네이버랑 비교해보니 차이가 크네요. 네이버도 못(?)하는 걸 긱뉴스가 해냈습니다...!