background 속성에 대해서 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* background 속성 : 요소의 배경 스타일을 지정하는 속성
ex) 아이콘을 적용할 때 사용함 */
/* body{
background-image: url('https://img.freepik.com/premium-photo/universe-background_495832-915.jpg');
background-repeat: no-repeat; */
/* background-size: 100px 100px; */
/* background-size: cover; }*/
/* .icon{
width: 844px;
height: 810px;
background-image: url('./img/네이버아이콘모음.png');
background-repeat: no-repeat;
} */
.icon-papago{
width: 140px;
height: 140px;
background-image: url('./img/네이버아이콘모음.png');
background-repeat: no-repeat;
}
.icon-papago-text{
width: 152px;
height: 32px;
background-image: url('./img/네이버아이콘모음.png');
background-repeat: no-repeat;
background-position: -328px -368px;
}
</style>
</head>
<body>
<div class="icon"></div>
<div class="icon-papago"></div>
<div class="icon-papago-text"></div>
</body>
</html>
background-image: url(이미지 주소)
background-repeat(반복)
background-size(이미지로 사이트의 너비를 꽉 채움)
너비와 높이, 위치를 알려주는 사이트 http://www.spritecow.com/
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex16_absolute.html (0) | 2023.06.12 |
|---|---|
| [CSS] Ex15_position.html (0) | 2023.06.12 |
| [CSS] Ex13_borderRadius.html (0) | 2023.06.12 |
| [CSS] Ex12_BoxSizing.html (0) | 2023.06.12 |
| [CSS] Ex11_padding.html (0) | 2023.06.12 |
