텍스트 색상을 설정하려면 CSS의 color 속성을 사용합니다. 색상은 크게 네 가지 방식으로 지정할 수 있으며, 상황에 따라 편리한 방법을 선택하면 됩니다.
- 색상 이름: red, blue, orange 등 미리 정의된 키워드
- HEX(16진수) 값: 예) #FFFFFF, #F8E61C
- RGB 값: 예) rgb(255, 0, 0)
- HSL 값: 예) hsl(120, 100%, 50%)
예제 1 – span 요소에 배경색과 글자색 적용
아래 예제에서는 span 요소에 주황색 배경과 흰색 글자색을 함께 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: orange;
color: white;
}
p.demo {
display: none;
}
span.demo1 {
display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>
출력 결과
예제 2 – HEX 값으로 글자색 지정
이번에는 16진수(HEX) 색상 값을 사용해 문단의 글자색을 변경하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
word-spacing: 1cm;
color: #F8E61C;
}
p.demo2 {
word-spacing: 40px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>
출력 결과
정리
CSS에서 텍스트 색상은 color 속성 하나만으로 간단하게 제어할 수 있습니다. 색상 이름은 직관적이고 빠르게 적용할 수 있으며, HEX·RGB·HSL 값은 더 세밀하고 다양한 색상 표현이 필요할 때 유용합니다. 프로젝트의 디자인 일관성을 위해 한 가지 방식을 정해 통일해서 사용하는 것이 좋습니다.