transparent, currentColor와 시스템 색상 키워드를 이해합니다.
transparent는 완전 투명, currentColor는 요소의 color 계산값입니다. inherit, initial, unset은 색상 이름이 아니라 cascade 값을 제어하는 전역 키워드입니다.
이번 예제의 출발점은 border-color: currentColor; background: transparent;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 부모 color를 바꿔 currentColor가 함께 변하는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
transparent를 흰색과 같다고 생각하면 다른 배경 위에서 결과가 달라집니다.
직접 바꿔보세요부모 color를 바꿔 currentColor가 함께 변하는지 확인하세요.