색상 키워드와 currentColor

개념 이해하기

transparent는 완전 투명, currentColor는 요소의 color 계산값입니다. inherit, initial, unset은 색상 이름이 아니라 cascade 값을 제어하는 전역 키워드입니다.

대상 요소의 배경은 transparent라 아래에 있는 .demo의 흰 바탕이 그대로 비치고, 테두리는 currentColor라서 글자와 같은 초록으로 그려집니다. 두 번째 상자는 color만 갈색으로 바꿨는데 .target에서 받은 테두리와 새로 더한 inset 그림자가 모두 currentColor를 쓰므로, 3px 테두리 안쪽에 2px 그림자가 붙어 갈색 선이 5px 두께처럼 보입니다.

Canvas, CanvasText, LinkText 같은 시스템 색상 키워드는 사용자의 운영체제나 브라우저 설정이 정한 색을 가리킵니다. 강제 색상 모드처럼 사용자가 색을 직접 지정한 환경에서도 장식 요소가 문서 색과 어울리게 하려면 고정 색 대신 이 키워드를 씁니다.