브라우저 사이즈 조절 시 변경

max-width로 지정한 사이즈 이하이면 형태나 컬러 여러가지가 변경되도록 설정할 수 있다

• 상단에 설정한 CSS

.MainBanner_img{
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 700px;
}

.MainBanner_img2{
  display: none;
}

• 하단에 media screen을 이용하여 형태 변경

@media screen and (max-width:740px) {
  .MainBanner_img{
    display: none;
  }

  .MainBanner_img2{
    display: block;
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
  }
}

위와 같이 입력하면 상단의 CSS에서 있었던 img1이 브라우저 width의 크기가 740이 되면 사라지고, img2가 나타난다

ex) width : 1440px일 때

ex) width : 740px이거나 작을 때