ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 50px;
/* 배경색 */ background-color: orange;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
- background는 단축 속성. 정확히는 background-color다 세분화하면. 후자로 써라.
ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box2, .box3{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
ㅁ 배경 이미지
- background-image : 배경 이미지
- background-size : 배경 이미지 크기
- background-repeat : 배경 이미지 반복 여부
- background-position : 배경 이미지 위치
(1) 박스보다 작은 배경 이미지 처리하기
<div class="box2"></div>
.box2, .box3{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 10px;
}
.box2 {
background-image: url(../assets/assets/image/attach.png);
}
- 이미지는 하나인데 기본적으로 반복해서 채워짐. 요소보다 이미지가 작으면 요소를 다 채우게 반복됨.
.box2 {
background-image: url(../assets/assets/image/attach.png);
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
background-size: 50px; /* 너비지정, 높이는 알아서 자동 조정됨. */
}
.box2 {
background-image: url(../assets/assets/image/attach.png);
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
background-size: 50px; /* 너비지정, 높이는 알아서 자동 조정됨. */
background-size: 50px 100px; /* 너비, 높이 */
}
.box2 {
background-image: url(../assets/assets/image/attach.png);
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
background-size: 50px; /* 너비지정, 높이는 알아서 자동 조정됨. */
background-size: 50px 100px; /* 너비, 높이 */
background-position: right center; /* 좌우 상하. 기본값 (left top) */
}
(2) 박스보다 더 큰 배경 이미지 처리하기
<div class="box3"></div>
.box2, .box3 {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 10px;
}
.box3 {
background-image: url(../assets/assets/image/bgsample.jpg);
background-repeat: no-repeat;
}
.box3 {
background-image: url(../assets/assets/image/bgsample.jpg);
background-repeat: no-repeat;
background-size: contain; /* 박스 내에 이미지가 온전히 보여지게 줄여줌 */
}
.box3 {
background-image: url(../assets/assets/image/bgsample.jpg);
background-repeat: no-repeat;
background-size: contain; /* 박스 내에 이미지가 온전히 보여지게 줄여줌 */
background-size: cover; /* 박스 내가 이미지로 덮히도록 줄여줌 */
opacity: 0.5; /* 투명도(0이 투명, 1이 불투명)*/
}
(3) 이미지 일부만 보여주기
- 보통 로고 파일을 하나하나 따로 가지지 않고, 여러 로고를 한 이미지로 모아놓고 사용하기도 한다.
<div class="box4"></div>
.box4 {
width: 150px;
height: 100px;
border: 1px solid red;
background-image: url(../assets/assets/image/logo.png);
}
.box4 {
width: 150px;
height: 100px;
border: 1px solid red;
background-image: url(../assets/assets/image/logo.png);
background-position: -560px -400px; /* 오른쪽으로 560px, 아래로 400px 움직임 */
}
'03. 웹 표준 기술 > CSS' 카테고리의 다른 글
| [CSS] 04. 레이아웃 스타일 (0) | 2024.08.06 |
|---|---|
| [CSS] 실습문제 (0) | 2024.08.06 |
| [CSS] 테이블 관련 스타일 (0) | 2024.08.06 |
| [CSS] 02. 텍스트 스타일, 04. 레이아웃 스타일 (0) | 2024.08.06 |
| [CSS] 01. 기초선택자 (0) | 2024.08.05 |
