CSS Property background color

Last Modified : 2019-08-05 / Created : 2018-07-09

2,446
View Count

주소 복사하기

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 태그에 아래 스타일을 추가하였습니다.

.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>

보시는 것처럼 세 개의 사각형에 각각 다른 색의 배경색이 적용된 것을 확인할 수 있습니다.

background 배경색

아래의 글도 찾고 계시지 않나요?

CSS Property color

CSS Property margin