[background] CSS - background-color 속성 ★ - 배경색깔(=배경색상=배경컬러 = background-color속성 = 백그라운드컬러속성) (상속 X)

1. background-color 예제 - 배경색 지정
2. background-color 정의
3. background-color 구문
4. background-color 예제 - 요소선택자 이용
5. background-color 예제 - class 선택자 이용
6. background-color 지정 방법들
7. 반응형 배경색 - 화면크기 따라 배경색 자동변경 (IE10 이상)
8. background-color 예제 - 여러 속성값 나열 시 작동 X

background-color 예제 - 배경색 지정 

 

<style>

body {background-color: coral;}

</style>

 

결과보기

background-color 정의

 

요소 배경색 지정.

 

---

 
1.

한번에 여러 배경색 지정 불가. (※ 여러 개 나열 시 전혀 적용 X)

ps. background 및 그외 배경 관련 속성은 여러 속성값 나열 가능.

 

 

2. 

• 기본값 : transparent
• 상속여부 : X
• 애니효과 : O
• CSS버전 : CSS1
• JS구문 : object.style.backgroundColor = "# 00FF00" 

 

3.

주요 브라우저 모두 지원. (※ IE 8~9 경우 버그 이슈 존재.)

 

4. MDN background-color 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

 

background-color 구문

 

selector {background-color: color|transparent|initial|inherit;}

 

---

[속성값]

 

color

색상코드 (예) black, #000000, rgb(0,0,0), rgba(0,0,0,1), hsl(0,0%,0%) 등

 

transparent

투명. (기본값)

 

initial
이 속성의 기본값으로 설정.

 

inherit

부모 요소의 속성값 상속.

 

background-color 예제 - 요소선택자 이용 

<style>
div{background-color: yellow;}
</style>

 

<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>

 

결과 보기

---

 

아래처럼, 줄을 바꿔 표현 가능. 
대개, 여러 속성을 함께 사용할 땐 이렇게 줄을 바꾸는 방식으로 표현.

이렇게 줄을 바꿔 적을 땐 반드시 속성값 뒤에 ; (세미콜론)을 붙여줘야 함.

단, 속성이 하나 뿐이거나, 맨 마지막에 온 속성일 경우엔 적지 않아도 됨.

<style>

div {

   background-color: yellow;

}
</style>

 

<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>

결과 보기

background-color 예제 - class 선택자 이용

<style>
.homzzang {background-color: yellow;}
</style>

 

<div class="homzzang">
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>


결과 보기

---

 

위처럼, 
div 부모 요소에만 배경 색깔을 지정할 경우, 
부모 요소가 아니라 자식 요소에만 배경 색깔이 입혀집니다.

즉,
 div와 h1 사이의 공간에 배경 색깔이 안입혀져, 
자식 요소에 배경 색깔을 지정한 것과 동일하게 됩니다. (위 예와 동일 효과) 

 

---

 

<style>
.homzzang {background-color: yellow;}
</style>

 

<div>
<h1 class=homzzang>홈짱닷컴 (homzzang.com)</h1>
</div>

 

결과 보기

---

 

아래처럼 부모 요소와 자식 요소에 각각의 배경 색깔을 줄 경우,

부모 요소의 배경 색깔 노란색은 자식 요소의 배경 색깔에 묻혀 안 나타나게 되죠.

 

 <style>
.homzzang {background-color: yellow;}
.title {background-color: violet;}
</style>

 

<div class='homzzang'>
<h1 class='title'>홈짱닷컴 (homzzang.com)</h1>
</div>

결과 보기

 

<style>
.homzzang {

background-color: yellow;

border: 1px solid yellow;

}

</style>

 

<div class=homzzang>
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>

  

결과 보기

---

아래처럼, 부모 요소와 자식 요소가 각각의 배경 색깔을 갖게 할 수도 있죠. 

 

<style>
.homzzang {background-color: yellow; border: 1px solid yellow;}
.title {background-color: violet;}
</style>

 

<div class=homzzang>
<h1 class=title>홈짱닷컴 (homzzang.com)</h1>
</div>

결과 보기

background-color 지정 방법들

1.
색상 이름 입력 방식 : red (빨강)

2. 
Hexadecimal color입력 방식 : #FF0000 (빨강) 색상코드 
http://www.homzzang.com/page/web/color.php

3.
RGB 입력 방식 : rgb(255,0,0) (빨강)

4.
RGBA 입력 방식 : rgba(255,0,0,0.5) (빨강에 투명도 50% 부여)

 

반응형 배경색 - 화면크기 따라 배경색 자동변경 (IE10 이상)

 

https://homzzang.com/b/js-1759

 

background-color 예제 - 여러 속성값 나열 시 작동 X

※ 2개 이상 나열 시, 배경색 전혀 적용 X

 

<style>

div {

    padding:50px;

    background-color:red, blue;

}

<style>

 

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기