웹사이트 반응형 만들기

결과

내용

• 웹 페이지가 정해진 사이즈만큼 줄어들었을 때 크기가 커지며, 한줄로 나타냄

코드

//재사용
const MainLink = styled(Link)``;

const ImgWrap = styled(MainLink)`
  position: relative;
  overflow: hidden;

  @media (max-width: 1166px) {
    margin: 10% auto;
  }
`;
//--------

const ImgBox = styled.div`
  display: flex;
  justify-content: space-between;
  margin: 20% 5%;

  @media (max-width: 1166px) {
    flex-direction: column;
  }
`;

const Bath = styled(ImgWrap)`
  width: 40vw;
  height: 130vh;
  margin-top: -10%;

  @media (max-width: 1166px) {
    width: 80vw;
  }
`;

const Kitchen = styled(ImgWrap)`
  width: 25vw;
  height: 40vh;
  margin-top: 30%;
  margin-right: 10%;

  @media (max-width: 1166px) {
    width: 100vw;
    height: 90vh;
    margin-top: -10%;
  }
`;

const Bed = styled(ImgWrap)`
  width: 25vw;
  height: 60vh;
  margin: 30% 0;

  @media (max-width: 1166px) {
    width: 90vw;
    height: 90vh;
    margin-top: -10%;
  }
`;