div 안의 이미지 속성

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import styled from "@emotion/styled";
import Slider from "react-slick";
export const Wrapper = styled.div`
  width: 100%;
  height: 500px;
`;
const Img = styled.div`
  width: 100%;
  height: 100%;
  & img {
    width: 100vw;
    height: 30vw;
  }
`;
export default function LayoutBanner() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <Wrapper>
      <Slider {...settings}>
        <Img>
          <img src="/images/banner/banner-01.png" />
        </Img>
        <Img>
          <img src="/images/banner/banner-02.png" />
        </Img>
        <Img>
          <img src="/images/banner/banner-03.png" />
        </Img>
        <Img>
          <img src="/images/banner/banner-04.png" />
        </Img>
      </Slider>
    </Wrapper>
  );
}

const Img = styled.div
width: 100%;
height: 100%;
& img {
width: 100vw;
height: 30vw;
}
-> Img태그 안의 img(이미지파일)의 속성을 부여

<vh와 vx>
vh = viewport height
vw = viewport width
즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다.
100vh, 100vw 가 전체 화면의 기준이 됩니다.
예를들어,
현재 스크린 크기가 height = 1000px, width = 800px 이라면
1vh = 10px / 1vw = 8px 이 될 것이고
height: 50vh;
width: 25vw;
로 설정한다면
height - 500px
width - 200px
출처: https://programming119.tistory.com/93 [개발자 아저씨들 힘을모아]