CSS(SCSS) - Background(배경)

1) Background

• 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정하는 속성이다.

(1) Background-color

• 요소의 배경 색상을 정하는 속성이다

transparent : 투명함
색상 : 지정 가능한 색상(red, blue..등등)

2) Background-image

• 요소의 배경 이미지를 삽입하는 속성이다

none : 이미지 없음
url("./images/heropy.png") : 이미지 경로

3) Background-repeat

• 요소의 배경 이미지를 반복을 제어할때 사용하는 속성이다

repeat : 이미지를 수직, 수평 반복
repeat-x : 이미지를 수평 반복
repeat-y : 이미지를 수직 반복
no-repeat : 반복 없음

4) Background-position

• 요소의 배경 이미지 위치를 제어할때 사용하는 속성이다

0% : 0~100% 사이 값
top, bottom, left, right, center : 방향
(예 : background-position: top right;)
px, em, rem : 단위
(예 : background-position: 100px 30px;)

5) Background-size

• 요소의 배경 이미지 크기를 제어할때 사용하는 속성이다

auto : 이미지의 실제 크기
px, em, rem : 단위
cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

6) Background-attachment

• 요소의 배경 이미지 스크롤 특성을 제어하는 속성이다

scroll : 이미지가 요소를 따라서 같이 스크롤
fixed : 이미지가 뷰표트에 고정, 스크롤 X
local : 요소 내 스크롤 시 이미지가 같이 스크롤