CSS의 currentColor 키워드를 아시나요? 부모의 color 값을 상속받아 사용하는 이 기능을 활용하면 코드가 간결해집니다.
currentColor란
요소의 color 속성값을 다른 속성에서 참조합니다. border-color: currentColor;라고 하면 텍스트 색상과 테두리 색상이 자동으로 같아집니다.
실용적인 활용
아이콘의 fill이나 stroke에 currentColor를 쓰면 부모의 color만 바꿔도 아이콘 색이 함께 바뀝니다. 호버 효과 구현이 쉬워집니다. 색상 변환기로 색상을 결정하고 currentColor로 전파하세요.
SVG에서 활용
SVG 아이콘을 인라인으로 삽입할 때 fill="currentColor"를 쓰면 CSS로 색상을 제어할 수 있습니다. 별도 스타일 없이 텍스트와 같은 색이 됩니다.
주의점
currentColor는 자기 자신의 color가 아닌 computed value를 참조합니다. 순환 참조는 발생하지 않습니다.
호버와 포커스 효과
버튼 호버에서 color: hsl(var(--h), var(--s), calc(var(--l) - 10%));처럼 CSS 변수와 calc를 조합하면 동적으로 밝기를 조절할 수 있습니다. 하지만 브라우저 지원을 확인해야 합니다. 색상 변환기로 기본 색상의 HSL을 확인하세요.
border-color에서 활용
입력 필드의 테두리를 currentColor로 지정하면 텍스트 색상과 자동으로 맞춰집니다. 에러 상태에서 color: red;만 바꾸면 텍스트와 테두리가 함께 빨간색이 됩니다. 코드 중복을 줄이고 일관성을 유지할 수 있습니다.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.