currentcolor

currentcolor는
현재 요소의 글자색(color 속성의 계산된 값)을 나타내는 CSS의 키워드입니다.

이 키워드는 다른 속성을 현재 요소의 글자색과 동일하게 하고 싶을 때 유용하게 사용할 수 있습니다.

currentcolor는 현재를 의미하는 'current'와 글자 색상을 의미하는 'color' 속성의 합성어입니다. 즉, 현재 요소의 글자 색상을 의미합니다.

알아두세요!
많은 CSS 코드에서 currentcolor와 currentColor가 혼용되어 사용됩니다.
두 표현은 동일한 값입니다.
CSS에서는 이 키워드의 대소문자(소문자c와 대문자C)를 구분하지 않습니다.

HTML 
<div>
    <p>이 글의 색상은 파랑입니다.</p>
    <hr>
    <p>hr 요소의 border 색상은 currentcolor입니다.</p>
</div>
CSS 
div {
    color: blue;
}
div hr {
    border: 3px dashed currentcolor;
}
실제 적용된 모습

위 예제를 보면, <div>요소에 설정된 글자 색상인 blue는 color 속성으로 지정되었습니다. <hr> 요소의 테두리를 설정하는 border 속성에 currentcolor 키워드를 사용하면, 이 값은 <div>의 글자색인blue를 상속받아 따라가게 됩니다. 따라서 <hr> 요소의 border 속성으로 설정한 테두리의 색상도 blue로 표시됩니다.

currentcolor가 초깃값인 CSS 속성들

CSS에서 색상을 지정할 때 currentcolor를 초깃값으로 설정한 속성들이 생각보다 많이 있습니다. 다음의 사례들을 통해 살펴보겠습니다.

text-decoration-color 속성

text-decoration-color 속성은 텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 색상을 설정합니다. 이 색상을 지정하지 않으면 초깃값이 currentcolor입니다.

HTML 
<p>text-decoration-color 속성</p>
CSS 
p {
    color: orangered;
    text-decoration-line: underline;
}
p:hover {
    color: blue;
}
실제 적용된 모습

위 예제에서 text-decoration-color 속성을 지정하지 않았습니다. 이 때 text-decoration-color 속성의 초깃값인 currentcolor는 현재 글자 색상인 orangered로 지정됩니다. 이 요소를 호버(:hover)하면 currentcolor는 호버 시 지정한 blue로 변경됩니다.

box-shadow 속성

box-shadow 속성은 요소 박스에 그림자 효과를 적용하는 속성입니다. 이 속성의 그림자 색상을 지정하지 않으면 초깃값이 currentcolor입니다.

HTML 
<div class="box">box</div>
CSS 
.box {
    color: orangered;
    box-shadow: 5px 5px 10px;
    width: 200px;
    height: 100px;
}
.box:hover {
    color: blue;
}
실제 적용된 모습

위 예제에서도 box-shadow의 색상을 지정하지 않았을 경우에 초깃값인 currentcolor는 현재 글자 색상인 orangered로 지정됩니다. 이 요소를 호버(:hover)하면 currentcolor는 호버 시 지정한 blue로 변경됩니다.

그 밖의 속성들

CSS에서 색상을 지정할 때 currentcolor를 초깃값으로 설정한 그 밖의 대표적인 속성들입니다.

브라우저 호환성

currentcolor 키워드의 브라우저 호환성
키워드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
currentcolor 1 12 4 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

currentcolor 키워드의 명세서 사양
명세서 사양
currentcolor CSS Color Module Level 4
#valdef-color-currentcolor

참고문헌

같이 보기