처음부터 차근차근
accent-color 본문
accent-color
컨트롤 색상을 바꿀 때 사용하는 css 속성이다.
여기서 말하는 컨트롤은
- <input type="checkbox">
- <input type="radio">
- <input type="range">
- <progress>
을 말한다.
사용 예시
<style type="text/css">
.test {
accent-color: red;
}
</style>
<input type="radio" checked />
<input type="radio" class="test" checked />이렇게 하면 radio의 색상이 파란색(default)에서 빨간색으로 변경된다.
accent-color 다음의 값에는 저렇게 color값을 직접 넣어도 되고, ex) #dedede, rgb(125, 125, 125), white 등
'auto' 를 넣어도 된다.
auto를 넣으면 현재 플랫폼에 매치되야 하는 accent-color에 따라 사용자 에이전트(= UA, 웹 맥락에선 브라우저를 의미함)에서 선택한 색상을 나타낸다.
현재 플랫폼에서 매치되야 하는 accent-color가 없으면 default 색상(파란색)을 나타낸다.
accent 색상
accent-color 속성을 사용하다보면 원하는 색상 디자인이 안나오는 경우가 있다.
예시로 아래 같은 상황이 있다.
<style type="text/css">
.test {
accent-color: orange;
}
</style>
<input type="radio" checked />
<input type="radio" class="test" checked />
radio 배경이 하얗게 나왔으면 좋겠는데 까만색으로 나온다.
이렇게 나오는 이유는 accent-color 개발자 측에서 밝은 컨트롤 UI와 대조되는 밝은 액센트 색상은 참을 수 없어서 일부러 밝은 색깔 배경을 까맣게 만들었다고 한다.
(...? 내 눈에는 별론데...)
이렇게 컨트롤 배경이 까맣게 되는게 싫으면 아래의 사이트에서 색상표를 참고하여 색상을 지정하면 된다.
https://accent-color.glitch.me/
CSS accent-color
accent-color.glitch.me
저기서 체크박스 체크 표시가 흰색인 색상을 골라서 사용하면 배경이 까맣게 되지 않는다!
+ 그리고 웹 브라우저 배경색이 검정색이면 그에 맞춰서 색상 배경이 변한다고 한다.
참고 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
