320x100
# html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="container">
<div class="item">Apple</div>
<div class="item">Banana</div>
</div>
</body>
</html># css
/* http://whoawho.com/images/logo.png */
.container .item{
width: 200px;
height: 100px;
background-color: royalblue;
# 이게 html에서 body에서 각 div를 떨어뜨려주는 기능을 한다.
margin: 10px;
background-image: url('http://whoawho.com/images/logo.png');
# 위에서 이미지로 쓰인것에 대한 백그라운드 사이즈 조정
background-size: 200px;
# 이미지로 백그라운드를 쓰면, 기본적으로 반복되어서 나머지 부분도 채워진다.
# 하지만 no-repeat를 통해서 이미지로 백그라운드가 쓰이고 남은 부분은 비어있다.
background-repeat: no-repeat;
# 백그라운드를 포함한 html div부분의 위치를 조정해준다.
background-position: bottom left;
}300x250
'Web > Css' 카테고리의 다른 글
| css 활용5 플렉스(정렬) (0) | 2022.09.06 |
|---|---|
| css 활용4 배치 (0) | 2022.09.06 |
| css 활용2 글꼴, 문자 (0) | 2022.09.05 |
| css 활용1 박스 모델 (0) | 2022.09.05 |
| css 기초4 가상 요소 (0) | 2022.09.05 |