목차
- background-color 예제 - 배경색 지정
- background-color 정의
- background-color 구문
- background-color 예제 - 요소선택자 이용
- background-color 예제 - class 선택자 이용
- background-color 지정 방법들
- 반응형 배경색 - 화면크기 따라 배경색 자동변경 (IE10 이상)
- background-color 예제 - 여러 속성값 나열 시 작동 X
background-color 예제 - 배경색 지정
<style>
body {background-color: coral;}
</style>
결과보기
background-color 정의
요소 배경색 지정.
1.
ps. background 및 그외 배경 관련 속성은 여러 속성값 나열 가능.
2.
- 기본값 : transparent
- 상속여부 : X
- 애니효과 : O
- CSS버전 : CSS1
- JS구문 : object.style.backgroundColor = "# 00FF00"
3.
주요 브라우저 모두
지원. (※ IE 8~9 경우 버그 이슈 존재.)
4. MDN 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>
결과 보기
이 문제를 해결하기 위해서는
부모 요소에 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 (빨강)
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>
결과보기
