CSS의 color 속성은 요소의 텍스트 색상을 변경할 때 사용합니다. 색상 값은 표준 색상 이름, rgb(), rgba(), hsl(), hsla(), 그리고 16진수(hex) 코드 등 다양한 방식으로 지정할 수 있습니다.
구문(Syntax)
CSS color 속성의 기본 구문은 다음과 같습니다.
Selector {
color: /*value*/
}아래 예제들을 통해 CSS color 속성의 사용법을 살펴보겠습니다.
예제 1
첫 번째 예제에서는 div 요소에 흰색 텍스트와 배경색을 지정하고, p 요소에는 rgba() 색상 값과 함께 테두리 및 그림자 효과를 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 50px;
float: right;
color: white;
background-color: #2f5587;
}
p {
color: rgba(225,5,135,0.7);
border: 2px solid #16c618;
box-shadow: 0 7px 0 5px hsl(90, 60%, 70%);
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<div>This is it</div>
<p>Demo text is visible here.</p>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2
두 번째 예제에서는 :nth-of-type(even) 선택자를 사용해 목록의 짝수 번째 항목에만 dodgerblue 색상의 텍스트와 테두리, 내부 그림자 효과를 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(even) {
color: dodgerblue;
border: 6px groove #16c618;
padding: 4px;
box-shadow: inset -100px 0 5px red;
}
</style>
</head>
<body>
<h2>Learn Servlets</h2>
<ul>
<li>Java Servlets are programs that run on a Web or Application server.</li>
<li>Java Servlets often serve the same purpose as programs implemented using the CGI.</li>
<li>Servlets are platform-independent because they are written in Java.
</li>
</ul>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
