backgroundColor 속성은 HTML 요소의 배경색을 설정하거나 현재 배경색 값을 반환하는 데 사용됩니다. 색상 값은 표준 색상 이름뿐만 아니라 rgb(), rgba(), hsl(), hsla() 등 다양한 CSS 색상 표기법으로 지정할 수 있습니다.
문법(Syntax)
backgroundColor 속성의 기본 문법은 다음과 같습니다.
배경색을 설정할 때 −
object.style.backgroundColor = "color|transparent"
속성 값
backgroundColor 속성에 사용할 수 있는 값은 아래와 같습니다 −
| 번호 | 값 & 설명 |
|---|---|
| 1 | Color(색상) 요소의 배경색을 지정합니다. 색상 이름, HEX 코드, rgb(), rgba(), hsl(), hsla() 등의 형식을 사용할 수 있습니다. |
| 2 | Transparent(투명) 배경색을 투명하게 설정하여 그 아래에 있는 콘텐츠가 비치도록 합니다. 이 값이 기본(default)값입니다. |
예제
backgroundColor 속성의 실제 사용 예제를 살펴보겠습니다 −
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
background-color: rgba(10,122,102,0.1);
}
</style>
<script>
function changeBackColor(){
document.getElementById("DIV1").style.backgroundColor="rgba(1,200,55,0.5)";
document.getElementById("Sample").innerHTML="The background color is now changed";
}
</script>
</head>
<body>
<div id="DIV1">Duis tincidunt urna a interdum consectetur. Pellentesque nec pretium ante.
In nisl magna, vestibulum non vulputate vel, feugiat ac tellus. Sed tincidunt id leo at mollis.
Praesent pellentesque purus vitae scelerisque gravida. Pellentesque pulvinar scelerisque sem,
at euismod sapien tristique et.</div>
<p>아래 버튼을 클릭하면 위 div의 배경색이 변경됩니다</p>
<button onclick="changeBackColor()">CHANGE COLOR</button>
<p id="Sample"></p>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
CHANGE COLOR 버튼을 클릭하면 −
버튼을 클릭하는 순간 자바스크립트의 style.backgroundColor 속성이 실행되어 div 요소의 배경색이 지정된 rgba(1,200,55,0.5) 값으로 즉시 변경되는 것을 확인할 수 있습니다. 이처럼 backgroundColor 속성을 활용하면 사용자의 상호작용에 따라 동적으로 배경색을 제어할 수 있습니다.