15_background-image

# 오늘 한 일

1. 이미지를 화면에 꽉차게 만들면서 반응형으로 종횡비 유지하고 싶을 때

.test {
  background-image: url(./img/donburi.JPG);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 50vh;
}

<div class="test"></div>

• background-size: contain;
  :: 원본 이미지의 크기와 비율 그대로 사용하고 싶을 때 사용한다.

• 기본이미지 (background-size: cover;)
  :: 원본 비율을 유지하면서 일정한 영역을 이미지로 채울 때 사용한다.
  (단, 영역이 이미지의 크기와 맞지 않을 경우 이미지가 잘릴 수 있음)

• background-position: 기본값;
  :: 왼쪽 상단을 기준으로 이미지가 조절된다.

• background-position: center;
  :: 중앙을 기준으로 이미지가 조절된다.

• height값을 vh로 설정한 이유
  :: px은 반응형에 대응이 안되고, %는 이미지가 사라진다.

2. 스크롤바를 없애고 싶을 때 (스크롤 기능은 유지)

  body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  ::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
  }