Mong dev blog

0. 들어가기에 앞서… 서비스에서는 각 서비스의 고유한 성격에 맞는 색상이 존재하며, 각 색상들은 개발자와 디자이너의 원활한 소통을 위해 변수화한다. 이렇게 색상을 변수화하면 서비스 컬러를 유지보수하기 쉽고, 다크모드를 적용할 때도 유용하다. 하지만 색상 변수에 투명도를 주어야 하는 경우, 예상치 못한 문제가 발생한다. 아래 코드는 CSS 색상 변수를 root에 선언한 것이다. /* Light Mode Colors */ :root { --primary-color: #007bff; } See the Pen css variable example by KumJungMin (@kumjungmin) on CodePen. 만약 색상 변수에 투명도를 주고 싶다면 어떻게 해야 할까? rgba() 함수로 투명도를 줄까 ..

1. accent-color속성? accent-color는 특정 요소에 색상을 지정할 때 사용된다. accent라는 말처럼 브랜드 컬러처럼 강조 색상을 요소에 적용할 때 유용하다. accent-color는 prefers-color-scheme와 같이 사용하면, 라이트&다크모드를 모두 지정할 수 있다. accent-color는 아래 요소에 적용된다. 2. 미디어쿼리, prefers-color-scheme 🙂 먼저, prefers-color-scheme은 어떻게 쓰는지 알아보고 accent-color 예시를 보자 CSS의 미디어 쿼리 중 하나로, 사용자 OS 시스템 모드에 따라 다른 스타일을 지정할 수 있다. @media (prefers-color-scheme: light) { /* light모드일 때 색상..