반응형 웹 디자인에서는 화면 크기에 따라 다른 색상 테마를 적용하는 경우가 있습니다. 모바일에서는 어두운 배경이, 데스크톱에서는 밝은 배경이 더 적합할 수 있기 때문입니다.
미디어 쿼리와 색상
CSS 미디어 쿼리를 사용하면 화면 너비에 따라 다른 색상을 지정할 수 있습니다. 하지만 먼저 현재 디바이스의 화면 크기를 정확히 파악해야 합니다. 화면 크기 측정 도구로 다양한 기기의 해상도를 확인하세요.
색상 변수 활용
CSS 변수를 사용하면 미디어 쿼리에서 색상만 변경하여 전체 테마를 바꿀 수 있습니다. --primary-color 같은 변수에 HEX 색상을 지정하고, 색상 변환기로 적절한 값을 선택해 적용합니다.