미디어 쿼리로는 해결하기 어려웠던 반응형 디자인 문제를 컨테이너 쿼리로 해결하는 방법을 알아본다. 뷰포트가 아닌 부모 요소의 크기를 기준으로 스타일을 적용하여 진짜 재사용 가능한 컴포넌트를 만들어보자.
0.5px border, 왜 어떤 디바이스에서는 보이고 어떤 곳에서는 안 보일까? DPR(Device Pixel Ratio)의 개념을 이해하면 알 수 있다.
CSS font-variant-numeric 속성으로 숫자 정렬, 분수 자동 변환, 0과 O 구분하기 등을 한 줄로 해결해보기!
OKLCH가 무엇인지, 기존 RGB와 HSL의 한계를 어떻게 극복하는지, 그리고 웹 디자인에서 어떻게 활용할 수 있는지 알아봅니다.