배경 이미지 자체의 사이즈를 정하는 속성.
값은 px이나 % 같은 단위로 줘도 되고, top ~ right 같은 지정 속성으로 줘도 된다.
숫자 값은 하나를 써도 되고, 두 개를 써도 된다. width, height 같은 개념이다.
| 속성명 | 설명 | 예시 |
|---|---|---|
| auto | - 배경 이미지의 원본 크기를 유지. |
example-image thank you |
| cover |
- 빈공간이 생기지 않게 꽉 채울 수 있음. - 찌그러짐 X, 때에 따라 깨짐 O - 이미지의 가로세로 비율이 요소와 다르다면 비율에 맞춰 이미지가 잘린다. |
example-image thank you |
| contain |
- 찌그러짐 X, 때에 따라 깨짐 O - 요소의 크기에 따라 빈공간이 생길 수 있다. |
example-image thank you |
| 고정 값 | - 항상 고정된 사이즈를 갖는다. |
example-image thank you |
| 퍼센트 값 | - 요소를 기준으로 사이즈가 바뀐다. |
example-image thank you |
(배경 이미지 출처 : https://unsplash.com/photos/BqOTmSUQHvg)
cover와 퍼센트 값은 사이즈가 가변적이라 이미지 화질에 주의해야 한다.
배경 이미지의 시작 지점을 지정하는 속성.
컨텐츠 박스, 패딩 박스, 보더를 기준으로 위치가 상대적으로 변한다.
background-repeat 이랑은 다름.
| 속성명 | 설명 | 예시 |
|---|---|---|
| border-box | - 배경을 테두리 박스에 상대적으로 배치. |
example-image thank you |
| padding-box | - 배경을 안쪽 여백 박스에 상대적으로 배치. |
example-image thank you |
| content-box | - 배경을 콘텐츠 박스에 상대적으로 배치. |
example-image thank you |
(배경 이미지 출처 : https://unsplash.com/photos/BqOTmSUQHvg)
Only actions give life strength; only moderation gives it a charm.
(Jean Paul Richter)
행동만이 삶에 힘을 주고, 절제만이 삶에 매력을 준다.
Good teaching is one-fourth preparation and three-fourths theater. (Gail Godwin)
훌륭한 가르침은 1/4이 준비 과정, 3/4은 현장에서 이루어진다.
The endeavor to understand is the first and only basis of virtue. (Baruch Spinoza)
이해하려고 노력하는 행동이 미덕의 첫 단계이자 유일한 기본이다.