12-3 CSS 속성 - 배경

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

CSS로 가능한 속성

 

 

---

글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다.
           : 기본값             : 일반             : 잘 사용하지 않음 
ex) width: auto; , max-width: none; 

 

※ 배경

 

• background-color

      → 요소의 배경 색상 

      → 기본 값은  transparent 로 투명함

      →   색상  : 지정 가능한 색상

      → ex) background-color: orange;

 

• background-image

      → 요소의 배경 이미지 삽입 

      → 기본 값은  none 으로 이미지 없음

      →   url("경로")  : 이미지 경로

 

• background-repeat

      → 요소의 배경 이미지 반복

      → 기본 값은  repeat 으로 이미지를 수직, 수평 반복

      →   repeat-x  : 이미지를 수평 반복

      →   repeat-y  : 이미지를 수직 반복

      →   no-repeat  : 반복 없음

 

• background-position

      → 요소의 배경 이미지 위치(x, y축으로 위치 표시)

      → 기본 값은  0% 0% 으로 0% ~ 100%  사이의 값

      →   방향  (방향1 뱡향2) : top, bottom, left, right, center 방향

      →   단위  (x축 y축) : px, em, rem 등 단위로 지정

 

• background-size

      → 요소의 배경 이미지 크기

      → 기본 값은  auto 로 이미지의 실제 크기

      →   단위  : px, em, rem 등 단위로 지정

      →   cover  : 비율을 유지, 요소의 더 넓은 너비에 맞춤

      →   contain  : 비율을 유지, 요소의 더 짧은 너비에 맞춤

 

• background-attachment

      → 요소의 배경 이미지 스크롤 특성

      → 기본 값은  scroll 로 이미지가 요소를 따라서 같이 스크롤

      →   fixed  : 이미지가 뷰포트에 고정, 스크롤X

      →   local  : 요소 내 스크롤 시 이미지가 같이 스크롤