CSS에서 배경색을 사용하는 방법에 대하여 알아봅니다. 이 경우 CSS 프로퍼티인
background-color를 사용할 수 있습니다. background-color는 해당 엘리먼트에 배경색을 지정하여 보여줍니다. 사용방법은 아래와 같습니다.
background-color { color | transparent | inherit | initial }
@ background-color property
- CSS 1
# background-color 프로퍼티 값 지정하기
설정 가능한 값으로 투명하게하는 transparent를 사용할 수 있습니다. color값으로는 HEX, RGB, RGBA, HSL, HSLA가 사용됩니다.
div { background-color: #f00; }
div { background-color: ref; }
div { background-color: rgb(200, 0, 0);
div { background-color: hsl(50, 30%, 60%);
div { background-color: hsla(70, 20%, 80%);
아래는 간단한 예제코드입니다. 어떻게 나타나는지 확인해보세요.
.black-bg { background-color: black }
.red-bg { background-color: red }
.blue-bg { background-color: blue }
@ bgcolor.html
<div class="black-bg"></div>
<div class="red-bg"></div>
<div class="blue-bg"></div>
위 코드를 실행하면 아래처럼 나타나게됩니다. 예제를 위하여 div 태그에 아래 스타일을 추가하였습니다.
.black-bg,
.red-bg,
.blue-bg {
width: 200px;
height: 200px;
border: 1px solid #000;
}
위 코드를 적용하면 어떻게 나타나는지 실행 결과를 확인해보세요.
<div class="black-bg"></div>
<div class="red-bg"></div>
<div class="blue-bg"></div>
<style>
.black-bg,
.red-bg,
.blue-bg {
width: 200px;
height: 200px;
border: 1px solid #000;
}
.black-bg { background-color: black }
.red-bg { background-color: red }
.blue-bg { background-color: blue }
</style>
보시는 것처럼 세 개의 사각형에 각각 다른 색의 배경색이 적용된 것을 확인할 수 있습니다.