CSS에서는 background-color 속성을 사용하여 요소의 배경색을 간단하게 지정할 수 있습니다. 색상 값은 표준 색상 이름(예: pink, azure), rgb(), rgba(), hsl(), hsla() 함수 또는 HEX 코드 등 다양한 방식으로 표현할 수 있습니다.
기본 문법
CSS background-color 속성의 기본적인 사용 문법은 다음과 같습니다.
Selector {
background-color: /*값*/
}
예제 1
아래 예제는 CSS background-color 속성을 활용해 서로 다른 요소에 각각 다른 배경색을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
font-family: cursive;
background-color: pink;
}
p:last-child {
background-color: azure;
}
div {
margin: auto;
padding: 5px;
font-family: Helvetica;
width: 430px;
background-color: burlywood;
}
</style>
</head>
<body>
<p>
Java는 Sun Microsystems가 처음 개발한 고급 프로그래밍 언어입니다.<p>
<div>
Java는 1995년에 출시되었습니다</div>
<p>
Java는 Windows, Mac OS, 다양한 버전의 UNIX 등 여러 플랫폼에서 실행됩니다.</p>
</body>
</html>
실행 결과
위 코드를 실행하면 첫 번째 문단에는 핑크색(pink), div 영역에는 우드빛(burlywood), 마지막 문단에는 하늘색(azure) 배경이 각각 적용된 것을 확인할 수 있습니다.
예제 2
다음 예제는 div, h1, p 요소에 각각 springgreen, lightcoral, lightseagreen 색상을 배경으로 지정한 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: springgreen;
}
h1 {
background-color: lightcoral;
text-align: center;
}
p {
background-color: lightseagreen;
font-size: 150%;
}
</style>
</head>
<body>
<div>
<h1>Demo</h1>
<p>This is demo text1. This is demo text2. This is demo text3. </p>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
이처럼 background-color 속성은 선택자만 바꿔주면 페이지 내 모든 요소에 손쉽게 배경색을 적용할 수 있어 웹 디자인에서 가장 기본적이면서도 자주 사용되는 속성 중 하나입니다.