HTML DOM Style의 color 속성은 웹 페이지에서 텍스트의 색상을 가져오거나(get) 설정(set)할 때 사용되는 속성입니다. 이 속성을 활용하면 자바스크립트만으로도 특정 요소의 글자색을 동적으로 변경할 수 있습니다.
텍스트 색상은 다음과 같은 다양한 방식으로 지정할 수 있습니다.
- 16진수(Hex) 값 — 예:
#ff0000 rgb()및rgba()함수hsl()및hsla()함수- 미리 정의된 색상 키워드 — 예:
blue,red,green
문법(Syntax)
color 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.color = "color|initial|inherit";
각 값의 의미는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| color | 텍스트에 적용할 색상 값을 지정합니다. (예: blue, #00ff00, rgb(255,0,0)) |
| initial | 해당 속성을 브라우저의 기본 초기값으로 되돌립니다. |
| inherit | 부모 요소의 color 속성 값을 상속받습니다. |
예제(Example)
아래 예제에서는 버튼을 클릭하면 문단의 색상이 번갈아가며 파란색과 빨간색으로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>color 속성 예제</h1>
<p>첫 번째 문단입니다</p>
<p>두 번째 문단입니다</p>
<p>세 번째 문단입니다</p>
<p>네 번째 문단입니다</p>
<p>다섯 번째 문단입니다</p>
<p>아래 버튼을 클릭하면 위 문단들의 색상이 변경됩니다</p>
<button type="button" onclick="ChangeColor()">텍스트 색상 변경</button>
<script>
function ChangeColor() {
for(var i=0;i<5;i++){
if(i%2==0)
document.getElementsByTagName("P")[i].style.color="blue";
else
document.getElementsByTagName("P")[i].style.color="red";
}
}
</script>
</body>
</html>실행 결과(Output)
페이지를 처음 열면 모든 문단이 기본 검정색으로 표시됩니다.
이후 “텍스트 색상 변경” 버튼을 클릭하면, 짝수 인덱스의 문단은 파란색으로, 홀수 인덱스의 문단은 빨간색으로 각각 변경되는 것을 확인할 수 있습니다.
정리
HTML DOM의 style.color 속성은 document.getElementById()나 getElementsByTagName()으로 선택한 요소에 직접 접근하여 글자색을 실시간으로 조작할 수 있는 강력한 도구입니다. 사용자 인터랙션에 따라 텍스트 강조, 테마 전환, 시각적 피드백 등을 구현할 때 널리 활용됩니다.