CSS 색상 키워드

이 장절에서는 다음을 설명합니다： transparent、currentcolor 및 상속 키워드。

transparent 키워드

transparent 키워드는 불투명도를 만드는 데 사용됩니다. 이는 요소에 투명한 배경색을 설정하는 데 일반적으로 사용됩니다。

예제

여기서는, <div> 요소의 배경색이 완전 불투명이 되고 배경 이미지가 표시됩니다：

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

직접 시도해 보세요

주의사항：transparent 키워드는 rgba(0,0,0,0)RGBA 색상 값은 RGB 색상 값의 확장으로, alpha 채널을 가지고 있습니다. 불투명도를 지정합니다. 자세한 내용은 우리의 CSS RGB 장절과 CSS 색상 장절。

currentcolor 키워드

currentcolor 키워드는 변수와 유사하며, 요소 color 속성의 현재 값을 저장합니다。

특정 색상이 요소나 페이지에서 일관되게 유지되기를 원한다면, 이 키워드는 매우 유용합니다。

예제

이 예제에서는, <div> 요소의 경계색이 블루가 될 것입니다. 왜냐하면 <div> 요소의 텍스트 색상이 블루이기 때문입니다：

div {
  color: blue;
  border: 10px solid currentcolor;
}

직접 시도해 보세요

예제

이 예제에서는, <div>의 배경색이 body 요소의 현재 색상 값으로 설정됩니다：

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

직접 시도해 보세요

예제

이 예제에서는 <div>의 경계색상과 그림자색상이 body 요소의 현재 색상 값으로 설정됩니다:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

직접 시도해 보세요

상속 키워드

상속 키워드는 속성이 부모 요소에서 값을 상속받도록 지정합니다.

상속 키워드는 어떤 CSS 속성인지 상관없이 사용할 수 있으며, 어떤 HTML 요소에서도 사용할 수 있습니다.

예제

이 예제에서는 <span>의 경계 설정이 부모 요소에서 상속됩니다:

div {
  border: 2px solid red;
}
span {
  border: 상속;
}

직접 시도해 보세요