• Q&A
  • 회원가입
  • 로그인

[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. 
  • 기본값 : transparent
  • 상속여부 : X
  • 애니효과 : O
  • CSS버전 : CSS1
  • JS구문 : object.style.backgroundColor = "# 00FF00" 
 
2.
한번에 여러 배경색 지정 불가. 자세히 보기
(여러 개 나열 시 전혀 적용 X)
ps. background 및 그외 배경 관련 속성은 여러 속성값 나열 가능.
 
3.
주요 브라우저 모두 지원.
※ IE 8~9 경우 버그 이슈 존재.
 
<

 

background-color 구문

 

선택자 {background-color: 속성값;}

 


[속성값]

 
color_code
색상코드
 
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>


결과 보기

 
 
이 문제를 해결하기 위해서는
부모 요소에 border: 1px solid yellow; 스타일을 추가로 적어 테두리를 만들어주면 됩니다.
 
<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>


결과 보기


만약,
자식 요소 배경 색깔 속성값에 inherit (상속)을 적어주게 되면
부모 요소의 배경 색깔 노란색을 그대로 물려받게 됩니다.  

<style>
.homzzang {background-color: yellow; border: 1px solid yellow;}
.title {background-color: inherit;}
</style>
 
<div class=homzzang>
<h1 class=title>홈짱닷컴 (homzzang.com)</h1>
</div>

결과 보기


하지만,
아래처럼 굳이 자식 요소 배경 색깔 속성에  inherit (상속) 적어주지 않아도
자식 요소 배경 색깔로 상속됩니다.
 
<style>
.homzzang {background-color: yellow; border: 1px solid yellow;}
</style>
 
<div class=homzzang>
<h1 class=title>홈짱닷컴 (homzzang.com)</h1>
</div>

결과 보기
 

background-color 지정 방법들

css에서 사용할 수 있는 색상코드 입력 방식은 다양.
그 중에서 가장 널리 쓰이는 것이 아래 4가지 방식임. 

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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012