배경
background-color
background-image
방향 생략시 기본 방향인 위에서 아래로 만들어짐
여러개를 동시에 가능함.
나중에 선언한것이 뒤에 깔림.
background-position
bottom, top, left, right, center 를 조합해서 작성가능하고
수치를 직접 입력도 가능함
직접 입력시에는 x,y 축 순서로 입력
background-repeat
설정하지 않으면 기본값은 repeat 상태 바둑판식 배열
x나 y축으로 반복도 가능함
background-size
이미지의 고유값으로 깔림
이미지를 늘려서 빈틈이 없도록 채움
사이즈를 늘리는데 어느쪽이 꽉차게 출력, 이미지가 잘리지 않도록
직접 사이즈를 입력해 주는것도 가능함. x,y축 순서대로 입력
background-attachment
예시
위 사진에서 화면 스크롤을 내렸을때 scroll과 local은 화면이 같이 내려가지만
fixed는 고정되어 화면이 내려가지 않음scroll과 local의 차이는
사진 내부의 스크롤을 움직였을때 scroll은 따라내려가지않고 local만 따라 움직임.
background 단축 속성
순서와 양식이 중요함.
순서가 틀리면 모든 내용이 적용되지 않음.
단축속성은 자주 사용하니 익숙해지는게 좋음
object-fit
기본값으로 사진을 늘려서 빈칸을 없애고 출력함
비율은 그대로 두고 빈칸이 없도록 잘라서 출력
빈칸이 있어도 되니 전체가 보이도록 출력
사진의 원본 사이즈 대로 출력
