CSS2 CSS prefers-color-scheme: 사용자 운영체제의 다크모드 탐지하기 요즘 많은 사이트에서 사용자 경험을 높이기 위해 다크모드를 지원한다. 유튜브의 경우 사용자가 일일히 다크모드로 변경할 필요 없이, 기기에 설정된 테마에 따라 자동으로 테마가 설정되는 것을 볼 수 있는데 이건 어떻게 구현하는 걸까? CSS 미디어 쿼리의 prefers-color-scheme 속성을 사용하면 된다. 해당 속성을 사용하면, 사용자 운영체제의 다크모드 설정 여부를 쉽게 알아낼 수 있다. 아래에 MDN의 예시 코드를 가져와 보았다. 사용자의 운영체제가 light 모드인 경우 .themed 클래스의 배경과 폰트 색을 변경한다. @media (prefers-color-scheme: light) { .themed { background: white; color: black; } } 동적인 페이지를 만드.. 2022. 2. 16. CSS flexbox: flex-item의 크기 조절 flexbox는 레이아웃, 정렬을 위해 가장 많이 사용하는 CSS 속성이다. flexbox의 사용이 너무나 익숙해져서 이젠 모르는 것이 없다고 생각했는데... 뭔가 잘못 사용하고 있었음을 이번에 깨닳았다. 가끔 사용하던 flex-grow 속성의 사용법이 잘못 되었는데, 그동안은 잘못 작성한 코드가 우연히 내 의도와 맞아 떨어져서 알아채지 못했던 것이다. 이번 기회에 다시 공부한 flexbox의 크기 조절 속성을 정리할 겸 공유하고자 한다. flex-basis flex-basis는 아이템의 기본 크기를 결정하는 속성이다. 값으로 auto, content 또는 원하는 수치를 넣을 수 있다. 기본 값은 auto이다. . item { flex-basis: auto; flex-basis: content; /* 원.. 2022. 1. 24. 이전 1 다음
