CSS에서 텍스트의 색상을 설정하려면 color 속성을 사용합니다. 이 속성은 요소 안에 있는 텍스트의 전경색(글자색)을 지정하며, 웹 페이지의 가독성과 디자인 분위기를 결정하는 가장 기본적인 스타일 속성 중 하나입니다.
color 속성의 주요 색상 지정 방법
- 색상 이름: red, blue, green처럼 미리 정의된 색상 이름을 그대로 사용합니다.
- HEX 코드: #0000ff와 같은 16진수 값으로 더 세밀하게 색상을 지정합니다.
- RGB / RGBA: rgb(0, 0, 255) 형식으로 지정하며, rgba는 마지막 값으로 투명도도 조절할 수 있습니다.
- HSL / HSLA: hsl(240, 100%, 50%)처럼 색조·채도·명도 기준으로 직관적으로 색을 표현합니다.
예제
아래 코드를 실행해 보면 CSS에서 color 속성이 어떻게 작동하는지 직접 확인할 수 있습니다:
<html> <head> </head> <body> <p style = "color:blue;"> 남극은 대륙입니다 </p> </body> </html>
위 예제에서는 p 태그에 인라인 스타일로 color:blue;를 적용했기 때문에 해당 단락의 텍스트가 파란색으로 표시됩니다.
실무 팁
간단한 테스트에는 인라인 스타일이 편리하지만, 실제 프로젝트에서는 내부 스타일시트(<style> 태그)나 외부 CSS 파일에 클래스를 정의해 관리하는 것이 유지보수와 재사용 측면에서 훨씬 효율적입니다. 예를 들어 .text-blue { color: blue; }처럼 클래스를 만들어 두면 여러 요소에 일관되게 적용할 수 있습니다.