43P by xguru 2달전 | favorite | 댓글 4개

color-scheme

  • 웹사이트가 다크 모드를 지원함에도 스크롤바가 하얀색으로 밝게 빛나는 문제가 있음
  • color-scheme 속성을 dark light로 설정하면 브라우저에게 페이지가 다크 모드와 라이트 모드를 모두 처리할 수 있음을 알리고, 스크롤바도 어두워짐
  • 메타 태그를 사용하여 문서에 color-scheme을 적용할 수 있으며, 이는 CSS를 로딩하기 전에 브라우저가 사용자의 선호도를 알 수 있게 함
  • prefers-color-scheme 미디어 기능과 함께 사용하면 사용자의 선호에 따라 변경할 부분을 완벽하게 제어할 수 있음
  • :has() 선택자를 사용하여 bodydark 클래스가 있을 때 루트 요소에 color-scheme 속성을 적용할 수 있음

text-wrap

  • 제목이나 캡션의 줄바꿈이 이상하게 되어 마지막 줄에 단어 하나만 오는 경우가 있음
  • text-wrap 속성에 balance 값을 사용하면 웹사이트의 제목을 균형 있게 만들 수 있음
  • 이 기능은 브라우저에 구애받지 않으며, 현대적인 설정에서 잘 작동하면서 오래된 설정에서도 우아하게 성능이 저하됨

Scroll-margin

  • 웹페이지에서 앵커 링크를 사용할 때, 고정된 헤더 때문에 대상 요소가 가려지는 문제가 발생함
  • scroll-margin CSS 속성을 사용하여 scroll-margin-top 값을 고정 헤더의 높이에 맞추면 이 문제를 해결 가능
  • :is 선택자를 사용하여 h2, h3, h4 등 여러 요소에 대해 동일한 처리를 적용할 수 있으며, exlh와 같은 단위를 사용하여 동적 간격을 설정할 수 있음

스크롤바 하얀색은 많이 튀네요. 긱뉴스에도 dark light로 바로 적용했습니다. 쉬운 방법이 있었군요

네이버랑 비교해보니 차이가 크네요. 네이버도 못(?)하는 걸 긱뉴스가 해냈습니다...!

이건 정말 꿀팁이네요 감사합니다

스크롤바 좋네요