프론트엔드/css
[유노코드 css 10강] 백그라운드 하위 속성 그림,이미지 넣기,위치,정
응개야
2023. 8. 3. 11:59
백그라운드 포지션 설정하기
이미지 불러와서 백그라운드 하위속성으로 사진을 정렬할 수 있다.
다양한 속성을 다 갖다 붙이지 않아도 되고 순서대로 안 해도 된다.
background-image: url(./그림이름.png)
background-repeat: no-repeat;
background-position: center;
background-size: cover contain(콘테인은 잘리지않은 한 최대 사이즈)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>백그라운드</title>
<style>
div {
box-sizing: border-box;
width: 500px;
height: 500px;
border: 1px solid red;
background-color: rgb(202, 202, 202);
background-image: url(./공부.PNG);
background-repeat: no-repeat;
background-position: center;
background-size: blue;
}
</style>
</head>
<body>
<div>백그라운드 하위속성 배우기</div>
</body>
</html>
이런걸 다 외워야하는게 아니라
background 태그에
url, no-repeat,center, 연달아 써도 가능
여러 하위속성을 외우려하지말고 써보면서 체득하는게 효율적임.