CSS color 속성이란?
CSS의 color 속성은 요소에 포함된 텍스트의 색상을 지정할 때 사용하는 기본적인 스타일 속성입니다. 이 속성 하나만으로도 웹 페이지의 가독성과 디자인 분위기를 크게 바꿀 수 있으며, 상속되기 때문에 부모 요소에 지정하면 자식 요소에도 그대로 적용됩니다.
기본 문법
CSS color 속성의 기본 문법은 다음과 같습니다.
Selector {
color: /*value*/
}color 속성에는 다양한 형식의 색상 값을 사용할 수 있습니다.
- 색상 이름 키워드: red, blue, rebeccapurple 등
- HEX 코드: #ff0000 형태의 16진수 값
- RGB 함수: rgb(255, 0, 0)
- HSL 함수: hsl(0, 100%, 50%)
예제 1: div 요소에 텍스트 색상 적용하기
다음 예제는 CSS color 속성을 활용해 두 개의 div 요소에 서로 다른 텍스트 색상을 적용하는 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
height: 100px;
width: 200px;
margin: 10px;
display: flex;
float: left;
font-size: 1.4em;
word-spacing: 30px;
line-height: 4.5em;
border: thin solid blue;
border-radius: 40%;
text-align: center;
color: rebeccapurple;
}
div + div{
background-color: beige;
color: red;
text-align: justify;
text-decoration: line-through;
}
</style>
</head>
<body>
<div>One Two</div>
<div>Three </div>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 div 요소의 텍스트는 보라색(rebeccapurple)으로 표시되고, 인접 형제 선택자(div + div)가 적용된 두 번째 div 요소는 베이지 배경 위에 빨간색 취소선 텍스트가 나타납니다.
예제 2: p와 span 요소에 텍스트 색상 적용하기
이번 예제에서는 단락(p) 요소와 인라인(span) 요소에 각각 다른 색상을 지정해, 같은 문단 안에서도 텍스트 색상을 구분해서 표현하는 방법을 살펴봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
margin: 10px;
display: flex;
float: left;
border: 3px groove green;
text-align: center;
color: rebeccapurple;
}
span{
background-color: beige;
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>What is Tableau?</h2>
<p>Tableau is a Business Intelligence tool for visually analyzing the data.
<span>Users can create and distribute an interactive and shareable dashboard,
which depict the trends, variations, and density of the data in the form of
graphs and charts. </span>
Tableau can connect to files, relational and Big Data sources to acquire and process data.</p>
</body>
</html>실행 결과
위 코드를 실행하면 p 요소 전체의 텍스트는 보라색(rebeccapurple)으로 표시되고, span 태그로 감싼 부분만 베이지 배경과 함께 빨간색 밑줄 텍스트로 강조되어 나타납니다.
마무리
CSS color 속성은 텍스트 색상을 지정하는 가장 기본적이면서도 중요한 도구입니다. 색상 이름, HEX, RGB, HSL 등 다양한 값 형식을 상황에 맞게 활용하면, 요소별·영역별로 세밀하게 텍스트 색상을 제어할 수 있습니다.