○ background-color 속성 : 배경색 지정
HTML 문서의 배경색을 정하고 싶다면, background-color 속성에 16진수, 색상 이름, RGB 값 등을 입력해 색상을 지정할 수 있습니다. 당연히 투명도(알파)를 적용하기 위해서는 RGBA 등의 속성 값을 사용하면 됩니다. 크게 어려울 것은 없는 부분입니다.
선택자 {
background-color: #008000;
background-color: rgb(0,120,1);
background-color: green;
}
다만, 부모-자식 요소 간의 스타일 상속과 관련해 예외사항이 하나 있습니다. 바로 background-color 속성은 상속 대상이 아니라는 점입니다. 예를 들어서 폰트, 글자 크기 등의 속성을 <body> 태그에 적용하면 모든 웹 문서의 요소에 적용됩니다. 하지만, background-color를 <body> 요소에 적용한다고 해서 모든 하위 요소들에게 적용되는 것은 아닙니다.
그런데, 그렇다면 의문이 생깁니다. <body>에 background-color를 적용하면 문서의 모든 요소가 배경색이 적용되는데, 이것은 상속된 게 아닐까요? - 실제로는 상속된 것이 아니라, 단순히 해당 하위 요소들의 배경이 투명해서 상속을 받은 것처럼 보일 뿐입니다.
○ background-clip 속성 : 배경색 적용 범위 지정
배경색을 어떤 박스 모델에 적용한다고 지정했습니다. 그런데, 이 배경색이 박스 안에 가득 채워지는 방식은 크게 세 가지로 나뉩니다. 어떤 분류일까요? 바로 border와 padding에 의한 것입니다.
· 테두리까지 모두 채워지는 경우(테두리가 점선이라면 눈에 보이겠죠)
· 테두리는 빼고 패딩 영역까지 채워지는 경우
· 테두리와 패딩 영역은 빼고 채워지는 경우
이렇게 세 가지 형태가 존재합니다. 그럼 실제로 한 번 적용해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
.desc {
border:15px dotted #222;
background-color:#ffd9a0;
width:350px;
padding:20px;
margin-right:20px;
float:left;
}
#clip-border {
background-clip: border-box;
}
#clip-padding {
background-clip: padding-box;
}
#clip-content {
background-clip: content-box;
}
</style>
</head>
<body>
<div id="container">
<div class="desc" id="clip-border">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="desc" id="clip-padding">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="desc" id="clip-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 2 (0) | 2023.05.04 |
|---|---|
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 1 (0) | 2023.05.03 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 4 : fixed, sticky (0) | 2023.04.27 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 3 : absolute (1) | 2023.04.25 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 2 : relative (0) | 2023.04.24 |
