CSS에서 배경색을 설정하려면 background-color 속성을 사용합니다. 이 속성은 특정 요소에 적용할 수도 있고, body 태그에 직접 인라인 스타일로 지정하여 페이지 전체의 배경색을 변경할 수도 있습니다.
배경색 값은 색상 이름(red, orange 등), HEX 코드(#ff0000), RGB 값(rgb(255, 0, 0)) 등 다양한 형식으로 지정할 수 있습니다.
예제 1 – 특정 요소에 배경색 적용하기
클래스 선택자를 사용해 특정 문단에만 배경색을 지정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
background-color: red;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
위 코드를 실행하면 .demo 클래스가 적용된 문단에 빨간색 배경이 표시되며, 텍스트 위아래로 밑줄 장식(overline, underline)도 함께 나타납니다.
예제 2 – 페이지 전체 배경색 설정하기
이번에는 body 태그에 인라인 스타일을 적용하여 웹 페이지 전체의 배경색과 글자색을 함께 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
}
</style>
</head>
<body style="background-color: orange;color: white;">
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
페이지 전체가 주황색 배경으로 채워지고, 모든 텍스트는 흰색으로 표시됩니다. 이처럼 인라인 스타일을 활용하면 간단하게 전체 페이지 분위기를 바꿀 수 있습니다.
정리
background-color 속성은 CSS에서 가장 기본적이면서도 자주 사용되는 속성 중 하나입니다. 요소 단위 또는 페이지 전체 단위로 배경색을 자유롭게 지정할 수 있으며, 색상 이름 외에도 HEX, RGB, HSL 등 다양한 색상 표기법을 지원하므로 상황에 맞게 활용하면 됩니다.