4. 배경 이미지 이해하기

이미지 삽입하기

• background-image: url("파일명.확장자"); => 이미지 삽입

이미지 크기 설정하기

• background-size: 이미지 크기 설정 (컨테이너 대비 % 및 너비와 높이의 절댓값 지정 가능)

이미지를 컨테이너에 어떻게 배치할 것인가?

• background-repeat: no-repeat => 반복 제거 & repeat-x or y 값으로 지정 가능
• cover => 이미지를 배경에 꽉 채우게 설정 (컨테이너를 채우기 때문에 이미지가 잘리게 됨)
• contain => 전체 이미지를 다 나오게 설정 (이미지가 모두 나와야 하므로 컨테이너의 빈 공간이 생김)
• background-position: px => 왼쪽 상단을 기준으로 이미지 이동 (x축 값과 y축 값 설정)
• 0%와 함께 값을 지정 => ex) 0% 100%일 경우 위에서 벗어나는 모든 부분을 자른 후 배치
• 기본값은 50이고 위에서 50% 아래에서 50%만큼 자르는 것

이미지와 테두리 및 하위 요소들

• background-origin: border-box => 이미지를 테두리 뒤로 배치 (이미지를 꽉 채우게 해줌)
  content-box => 이미지 주변에 여백이 생김
• background-clip: padding-box => 테두리 부분에 이미지 삭제
• background-attachment: 이미지 스크롤 설정 => fixed, scroll, local
  • fixed: 이미지가 뷰포트에 고정
  • scroll: 이미지가 그대로 있고 컨텐츠가 스크롤 됨

프로퍼티 축약 사용

• 크기 지정 후 /cover no-repeat border-box와 같이 축약해서 사용 가능

이미지 스타일링 하기

• 자손 선택자(공백으로 구분)를 활용해야 이미지의 크기 조정이 가능
  • ex) .조상클래스 img {크기 값}. 조상클래스는 컨테이너가 됨.
• 컨테이너가 인라인 블록 요소여야 이미지가 그것을 따라감. 100% 값을 입력했을 때 이미지가 컨테이너에 꽉 차게 됨.
• linear-gradient() => 선형 그러데이션
  • ex) (to bottom, red 70%, blue 30%), degree 값도 입력 가능
  • 두 개 이상의 다중 그러데이션도 적용 가능 & transparent 투명도 설정 가능
• radial-gradient() => 원형 그러데이션
  • circle => 완벽한 원형
  • at => 시작위치 지정 가능, % => 원의 중심을 기준으로 이동
  • 원의 크기 지정 가능. px값으로 줌.
• 다중 배경 => 쉼표를 사용해서 구분, 쉼표 쓰기 전에 크기나 기타의 값을 지정 후 다음 배경 선택
  • 기본 배경 이미지가 어느 정도 투명해야 적용 가능. 다양한 스타일링 가능.
• filter: blur(~px) => 흐리게 만듦.
• grayscale => 이미지 흑백화