CSS를 활용하면 요소의 텍스트, 테두리(border), 배경(background)에 원하는 색상을 자유롭게 정의할 수 있습니다. 그중에서도 color 속성은 요소의 텍스트 색상을 지정하는 데 사용되는 가장 기본적인 속성입니다.
기본 문법(Syntax)
CSS color 속성의 기본 문법은 다음과 같습니다.
Selector {
color: /*값*/
}색상 값은 seashell, blue처럼 색상 이름으로 지정할 수도 있고, HEX 코드, RGB 값 등 다양한 방식으로 표현할 수 있습니다.
예제 1 – div와 p 요소에 색상 적용하기
다음 예제는 <div> 요소에는 seashell 색상의 텍스트와 lightcoral 배경색을, <p> 요소에는 blue 텍스트와 palegreen 배경색, 그리고 그림자 효과까지 함께 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: seashell;
background-color: lightcoral;
}
p {
font-size: 1.5em;
color: blue;
background-color: palegreen;
box-shadow: 0 0 5px 1px rgb(0,0,0);
}
</style>
</head>
<body>
<div>
This is demo text.
<p>
Text added for reference.
</p>
This is demo text 2.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 화면이 출력됩니다.
예제 2 – 제목과 문단 스타일링하기
두 번째 예제에서는 <h3> 제목 요소에 red 텍스트 색상과 rosybrown 색상의 ridge 스타일 테두리를 적용하고, <p> 문단에는 royalblue 텍스트, cornsilk 배경색, deeppink 그림자 효과를 추가했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
h3 {
color: red;
border: 2px ridge rosybrown;
}
p {
color: royalblue;
background-color: cornsilk;
box-shadow: 0 0 5px 1px deeppink;
}
</style>
</head>
<body>
<h3>Demo Demo Demo Demo</h3>
<p>Demo text here</p>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과를 확인할 수 있습니다.
정리
CSS의 color 속성은 텍스트 색상을 지정하는 핵심 도구이며, background-color, border, box-shadow 등의 속성과 조합하면 훨씬 풍부하고 시각적으로 매력적인 웹 페이지를 만들 수 있습니다. 색상 이름 외에도 HEX(#RRGGBB), RGB, HSL 등 다양한 색상 표기법을 활용해 보세요.