백그라운드 포지션 설정하기
이미지 불러와서 백그라운드 하위속성으로 사진을 정렬할 수 있다.
다양한 속성을 다 갖다 붙이지 않아도 되고 순서대로 안 해도 된다.
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, 연달아 써도 가능
여러 하위속성을 외우려하지말고 써보면서 체득하는게 효율적임.
'프론트엔드 > css' 카테고리의 다른 글
| [유노코딩 css 12강] position 속성값 중 relative,absolute (0) | 2023.08.03 |
|---|---|
| [유노코딩 css 11강] float,clear 컨테이너 배치, p태그들 clear하기 (0) | 2023.08.03 |
| [유노코딩 css 9강] 박스모델 너비 높이, 콘텐츠 모델 (0) | 2023.08.03 |
| [유노코딩 css 8강] padding과 margin (0) | 2023.08.02 |
| [유노코딩 css 7강] 박스 (0) | 2023.08.02 |
