Logo

CSS의 accent-color 속성을 활용한 미니멀 스타일링

HTML에서 체크 박스나 라디오 버튼과 같이 양식(form)을 구성하는 요소들은 CSS로 스타일하기가 까다롭기로 악명이 높은데요. 브라우저에서 제공하는 기본 스타일대로 두자니 너무 올드해보이고 직접 스타일을 하자니 다른 HTML 요소처럼 쉽게 스타일이 되지 않으니까요.

그런데 CSS 속성 딱 하나로 이렇게 스타일이 어려운 HTML 요소를 나름 그럴 듯하게 스타일할 수 있다는 사실을 알고 계셨나요? 이번 포스팅에서는 최소한 노력으로 최대 스타일 효과를 낼 수 있는 CSS의 accent-color라는 유용한 속성을 소개해드리겠습니다.

accent-color

CSS에서 비교적 최근에 추가된 accent-color 속성은 말 그대로 강조 색상을 지정하기 위해 사용하는데요. <input> 요소의 일부 타입(radio, checkbox, range)과 <progress> 요소를 상대로만 쓸 수 있는 다소 특이한 CSS 속성입니다.

이러한 HTML 요소들은 브라우저 별로 약간씩 상이한 색상을 사용해서 표현이 되기 때문에 디자인의 통일성을 해치는 경우가 많은데요. accent-color 속성을 사용하면 이렇게 스타일하기 까다로운 HTML 요소에 매우 쉽게 브랜딩(branding) 색상을 입힐 수 있습니다. 그리고 이 간단한 스타일만으로도 웹페이지의 전체적인 느낌이 확 달라지는 효과를 얻으실 수 있으실 거에요.

Radio Input

만저 라디오 버튼에 accent-color 속성을 적용해볼까요? 어때요? 느낌이 확 달라지죠?

input[type="radio"] {
  accent-color: deeppink;
}

라디오 버튼을 밑바닥 부터 제대로 스타일하고 싶으시다면 관련 포스팅을 참고 바랍니다.

Checkbox Input

체크 박스에도 비슷한 방식으로 accent-color 속성을 사용할 수 있습니다.

input[type="checkbox"] {
  accent-color: deeppink;
}

Range Slider

범위를 조정할 때 사용되는 레인지 슬라이더(range slider)에도 accent-color 속성을 적용해보았는데요. 이렇게 목적에 따라 다른 강조 색상을 사용해주면 직관적인 UI를 구현하는데 도움이 될 수 있습니다.

input[name="temperature"] {
  accent-color: red;
}

input[name="humidity"] {
  accent-color: blue;
}

Progress Bar

accent-color 속성은 HTML의 <progress> 요소에도 적용이 가능합니다.

progress {
  accent-color: deeppink;
}

전체 페이지 적용

accent-color 속성을 전체 페이지에 적용하면 좀 큰 효과를 느낄 수 있는데요. 이 때 CSS 변수(CSS variables)를 활용하면 다양한 HTML 요소에 걸쳐서 동일한 브랜딩 색상을 쉽게 적용할 수 있습니다.

:root {
  --brand: tomato;
  accent-color: var(--brand);
}

아래를 주의 깊게 보시면 이번에는 accent-color 속성을 토마토 색을 줬더니 검정색과 함께 매치가 되는 것을 볼 수 있습니다. 위에서 accent-color 속성을 딥 핑크색으로 줬을 때 흰색과 매치가 되었죠.

이렇게 accent-color 속성을 사용하면 브라우저에서 알아서 색대비(color contrast)를 고려하여 최적화해준다는 장점도 있습니다!

CSS 사용자 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서는 별도 포스팅에서 자세히 다루고 있습니다.

마치면서

지금까지 CSS의 accent-color 속성을 활용하여 일부 양식 관련 요소에 강조 색상을 적용할 수 있는 방법에 대해서 살펴보았습니다.

저는 개인적으로 개별 HTML 요소를 섬세하게 스타일하는데 너무 시간을 쓰기 보다는 우선 accent-color 속성을 사용하여 기본적인 스타일의 수준을 높여놓고 시작하는 편인데요. 외부 CSS 라이브러리를 사용할 수 없거나 스타일에 많은 시간을 투자하기 어려운 경우 accent-color 속성만큼 가성비가 좋은 방법은 없더라고요. 하지만 한계도 명확하기 때문에 실제 웹 프로젝트에서 어느 정도 활용이 가능할지는 사실 의문입니다.

당장 필요하지는 않더라도 분명히 알아두시면 나중에 급할 때 요긴하게 쓰일 수 있지 않을까요?