[TIL] CSS Break down (background)

도저히 스크린 샷은 무리다😅

• https://github.com/ssssssjay/learning/blob/main/background-image.html

아래의 요소들을 전부 주석처리 해놓고 배경이미지는 큰 이미지 하나, 작은 이미지 하나를 준비하여 주석 해제를 하면서 감을 찾아보도록 하자.

background-image

배경이미지를 삽입하는 것이며, 예상되는 시나리오는 두 가지이다.

1. 말 그대로 섹션에 배경이미지를 주기 위해서 사용
2. 마크업상의 의미가 없을 것이라 판단이 되지만 이미지가 필요해 가상요소에 이미지를 넣음

구조를 잘 판단하여 알맞게 사용한다.

background-image: url();

저작권에 문제가 없는 이미지라면 ok이다.

(무료 이미지 사이트여도, 상업적 이용가능과 출처 표시 유무를 확인할 것!!)

background-repeat

배경이미지의 반복을 설정해준다. no-repeat이 일반적이다.

/* x, y축으로 반복 */
background-repeat: repeat;
/* x축으로 반복 */
background-repeat: repeat-x;
/* y축으로 반복 */
background-repeat: repeat-y;
/* 반복 없음 */
background-repeat: no-repeat;

background-position

배경이미지의 위치(position)을 지정해준다.

/* default이며 x축, y축으로부터 0%인 지점을 의미 */
background-position: 0% 0%;
/* top, left, right, center 등이 있다 */
background-position: top left;
/* x축, y축으로부터 2px 2px인 지점을 의미 */
background-position: 2px 2px;

background-attachment

요소가 스크롤 되는 순간들에 배경 이미지는 어떻게 스크롤 되는지를 의미한다.
(글로 설명보다는 직접해보는 것이 훨씬 이해가 빠름)

/* 같이 스크롤 됨 */
background-attachment: scroll;
/* 뷰포트에 고정이 되어, 스크롤 되지 않음 */
background-attachment: fixed;
/* 같이 스크롤 됨 */
background-attachment: local;
/* overflow: [auto, scroll] 이 속성이 필요함*/

background-size

cover와contain의 설명이 조금 부실한데, 일반적인 '배경이미지'의 특성을 생각해보자.
가로로 더 긴 배경이 있다고 치자.(1200*900)
그럼 여기서 이미지의 더 넓은 곳에 맞춘다는 것은,
4:3의 원본 비율은 유지하면서 가로의 사이즈는 그대로 가져간다는 의미이다.(다소 어렵)

이 역시, 직접 눈으로 보는 것이 중요하다.

/* 원래의 크기대로 보여짐 */
background-size: auto;
/* 가로 세로 의 형태로 작성해주며, 하나만 입력시 비율에 맞춰 자동조정 */
background-size: px, em, %;
/* 비율유지 + 이미지의 더 넓은 곳에 맞춰짐 */
background-size: cover;
/* 비율유지 + 이미지의 더 짧은 곳에 맞춰짐 */
background-size: contain;

background-origin

position과 헷갈릴 수 있으나, 이는 box-model과 연관이 있는 속성이다.

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

background-clip

출력할 범위를 지정한다. 말은 어렵지만, 보더와 패딩값이 있는 요소에 적용해보면 금방 알 수 있다.

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

> 참고 사이트

• https://heropy.blog/