background-color속성- 배경 색 지정하기
배경 색 스타일과 상속
- 앞에서 공부했지만 글꼴이나 글자크기 등은
<body>태그 선택자에서 지정하면 문서 전체에 상속되지만, 예외적으로 background-color값은 상속되지 않습니다. - 예를 들어
<body>태그 선택자에서 background-color 속성을 이용해 웹 문서의 배경을 초록색으로 지정하면 문서에 삽입하는 표나 목록,기타 요소들에도 초록색이 그대로 비칩니다. - 하지만 이것은 기본적으로 모든 웹 문서 요소의 배경이 투명하기 때문에 초록색으로 지정된 문서 배경이 그대로 비치는 것일 뿐이지 각 요소스타일에 상속된 것은 아닙니다.
- 따라서 표나 목록 등에서 배경 색을 지정하고 싶다면 각 요소에서 직접 background-color속성을 이용해 배경 색 값을 지정해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경색</title>
<style>
body {
background-color:#0094ff;
}
div {
background-color:white;
width:90%; /* 너비 */
padding:35px; /* 패딩 */
border:1px solid black; /* 테두리 */
}
p {
line-height:30px;
}
</style>
</head>
<body>
<div>
<h1>초콜릿(Chocolate)</h1>
<p>초콜릿은 카카오 콩을 재료로 가공한 식품이다.
숙성한 카카오 콩을 볶은 뒤 이를 갈아서 만든 카카오 매스와 지방 성분만으로 만들어진 코코아 버터를 혼합하여 만드는데,
설탕 등의 다른 재료를 더 넣어 만들기도 한다.
카카오 매스의 함량에 따라 다크 초콜릿, 밀크 초콜릿, 화이트 초콜릿으로 구분한다.</p>
</div>
</body>
</html>
background-clip속성-배경 적용 범위 조절하기
앞에서 본 것처럼 배경을 넣고 싶은 요소들마다 속성을 입력하면 배경을 넣을 수 있지만 박스 모델 관점에서 배경 적용 범위를 조절할 수도 있습니다.
- 즉 박스 모델의 가장 외곽인 테두리(border)까지 적용할지,
- 테두리를 빼고 패딩(padding)범위까지 적용할지,
- 아니면 내용 부분에만 적용할지 선택할 수 있습니다.
| 속성 값 | 설명 |
|---|---|
| border-box | 박스 모델의 가장 외곽인 테두리(border)까지 적용합니다.(기본값) |
| padding-box | 박스 모델에서 테두리를 뺀 패딩(padding)범위까지 적용합니다. |
| content-box | 박스 모델에서 내용 부분에만 적용합니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
div {
width: 300px;
padding: 35px;
border: 5px dotted #222;
background-image:url('images/bg1.png');
margin-bottom:20px;
}
.bg1 { background-clip:border-box;}
.bg2 { background-clip:padding-box;}
.bg3 { background-clip:content-box;}
</style>
</head>
<body>
<div class="bg1">
<p> <strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
</div>
<div class="bg2">
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
</div>
<div class="bg3">
<p>
<strong>토마토 : </strong>
토마토는 비타민A, C가 풍부할 뿐 아니라 희귀한 성분인 비타민 H와 P까지 포함된 과일이다.
칼륨과 같은 각종 미네랄은 혈액의 산성도를 낮추는 역할을 해주며
토마토에 들어있는 피코펜이라는 성분은 뛰어난 항암 작용을 보이며
잘 알려져 있듯이 블루베리와 함께 대표적인 항산화 음식이기도 하다.
</p>
</div>
</body>
</html>
backgroun-image속성-웹 요소에 배경 이미지 넣기
배경 이미지를 넣을 때는 background-image속성을 사용합니다.
- 배경 이미지에는 웹에서 사용 간으한 파일인 jpg,gif,png 파일을 사용하며 이것을 'url(파일경로)'형식으로 사용합니다.
- 또한 배경 색과 마찬가지로 문서 전체의 배경이미지를 지정하려면
<body>태그에 지정하고 특정 영역에 배경 이미지를 만들고 싶다면 클래스 선택자나 id선택자를 이용하여 지정하면 됩니다. - http://로 시작하는 절대 경로를 사용할 수도 있습니다.(이떄 파일 경로에는 따옴표를 붙여도 되고 안 붙여도 됩니다.)
다음 예제는 이미지가 채우려는 요소 크기보다 작을 경우,해당 요소를 가득 채울 정도로 가로와 세로로 반복됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
body {
background-image:url('images/bg1.png');
}
</style>
</head>
<body>
</body>
</html>
background-repeat속성-배경 이미지 반복 방법 지정하기
앞에서 공부했던 것과 같이 배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시됩니다.
- 이 때 background-repeat 속성을 사용하면 배경 이미지를 반복하지 않게 할 수도 있고 반복하더라도 가로 반복이나 세로 반복등 반복 방향을 지정할 수도 있습니다.
| 속성 값 | 설명 |
|---|---|
| repeat | 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로,세로로 반복합니다.(기본값) |
| repeat-x | 브라우저 창 너비와 같아질 때까지 배경이미지를 가로로 반복합니다. |
| repeat | 브라우저 창 높이와 같아질 때까지 배경이미지를 세로로 반복합니다. |
| no-repeat | 배경 이미지를 한 번만 표시하고 반복하지 않습니다. |
background-size속성-배경 이미지 크기 조절하기
| 속성 값 | 설명 |
|---|---|
| auto | 원래 배경 이미지 크기만큼 표시됩니다. |
| contain | 요소 안에 배경이미지가 다 들어오도록 이미지를 확대,축소합니다. |
| cover | 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소합니다. |
| <크기 값> | 너비 값과 높이 값을 지정합니다.너비 값만 지정할 경우,원래 배경이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정합니다. |
| <백분율> | 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경이미지를 확대하거나 축소합니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 이미지</title>
<style>
div{
width:500px;
height:500px;
border:2px double black;
margin-bottom:20px;
}
.bg1{
background:url('images/bg4.jpg') no-repeat left top;
background-size:auto;
}
.bg2 {
background:url('images/bg4.jpg') no-repeat left top;
background-size:200px 150px;
}
.bg3 {
background:url('images/bg4.jpg') no-repeat left top;
background-size:60% 40%;
}
.bg4 {
background:url('images/bg4.jpg') no-repeat left top;
background-size:contain;
}
.bg5 {
background:url('images/bg4.jpg') no-repeat left top;
background-size:cover;
}
.bg6{
background:url('images/bg4.jpg') no-repeat left top;
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
<div class="bg5"></div>
<div class="bg6"></div>
</body>
</html>
블로그 이전합니다! https://jyyoun1022.tistory.com/