![[CSS] background-size, origin, clip](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvzJdm%2FbtrxvLJIxuV%2F2Qkrd69OAwoWPyVfWjQxNK%2Fimg.png)
background의 다양한 속성 중 다음 3가지에 대해 알아보자!
- background-size
- background-origin
- background-size
background-size
배경 이미지의 크기를 설정한다. 직접 수치를 입력할 수도 있고, contain 또는 cover 중에 선택할 수도 있다.
| 속성값 | 설명 |
| contain | 이미지의 비율은 유지하면서, 크기를 가능한한 크게 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 됨. |
| cover | 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 됨. |
(↓background img를 화면에 꽉 차게 설정하는 방법은 아래 게시글 참고↓)
2022.03.25 - [CSS] - [CSS] background img 꽉차게 채우는 법
[CSS] background img 꽉차게 채우는 법
배경 이미지를 화면에 꽉 차게 채워야 하는 경우가 종종 있다. 원하는 조건은 다음과 같다. 화면에 보이는 전체 페이지를 여백 없이 이미지로 채우기 필요에 따라 이미지 크기 조정 이미지의 중
oneul-losnue.tistory.com
background-origin
배경 이미지의 위치를 결정할 기준을 설정한다. 3가지 속성 값을 사용할 수 있다.
| 속성값 | 설명 |
| border-box | 배경 이미지는 '테두리'의 왼쪽 상단에서 시작한다. border까지 width에 포함된다. |
| padding-box | (기본값) 배경 이미지는 패딩 가장자리의 왼쪽 상단 모서리에서 시작한다. |
| content-box | 배경 이미지는 '콘텐츠'의 왼쪽 상단에서 시작한다. 컨텐츠 크기 안에 들어간다. |
background-clip
해당 요소의 배경을 어느 영역까지 설정할지를 결정한다. 3가지 속성 값을 사용할 수 있다.
| 속성값 | 설명 |
| border-box | (기본값) 배경이 '테두리'의 바깥쪽 가장자리에 칠해진다. |
| padding-box | 배경이 '패딩'의 바깥쪽 가장자리에 칠해진다. |
| content-box | 배경이 콘텐츠 상자 안에 그려진다. |
※ 참고자료
'🌎 Web > CSS' 카테고리의 다른 글
| [CSS] 중앙 정렬의 3가지 방법(position, flex, table) (0) | 2022.04.03 |
|---|---|
| [CSS] 수직 정렬의 3가지 방법(padding, line-height, position) (0) | 2022.03.28 |
| [CSS] background img 꽉차게 채우는 법 (0) | 2022.03.25 |
| [CSS] CSS에서 위치를 담당하는 요소들 (0) | 2022.03.23 |
| [CSS] CSS에서 공간을 나누는 요소들(feat. 박스모델) (0) | 2022.03.21 |