파이널 프로젝트 24일차(21-12-16)

캐러셀 반응형 디자인

🗣 반응형 페이지를 구현해야 하는데! 그게 뭔지 전혀 모르는 상태입니다!(비상)

📒 반응형 웹

: 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것
[출처] - CSS : 반응형 웹(Responsive Web)

📒 최소 반응형 레이아웃

: 가장 많이 사용하는 대중적이고 간결한 레이아웃 기준
[출처] - CSS 반응형 레이아웃 너비를 나누는 기준 정하기

🗣 반응형 디자인에 대해 전혀 무지한 상태였기 때문에.
팀원분께서 다른 컴포넌트(또는 페이지)에서 구현하진 반응형 디자인 코드를 참고해보았습니다.

// Main.js
  @media only screen and (max-width: 1024px){
    width: 100%;
    margin: 0;
    padding: 0 2rem;
  }
  @media only screen and (max-width: 768px){
    padding: 0 1rem;
    .share-text:after {
      left: 27%;
    }
    .share-text:before {
      right: 27%;
    }
  }
  @media only screen and (max-width: 425px){
    .share-text:after,
    .share-text:before {
      display: none;
    }
  }
`;

🗣 1024px, 768px, 425px 라는 크기가 눈에 띕니다. 각 수치들은 무엇을 의미할까요?

🗣 위 이미지를 참고하면서, 코드를 해석해보면 0~425px 너비일 경우에는 세 번째 css 코드를, 426~768px 너비일 경우 두 번째 코드, 769~1024px 너비 일 경우에는 첫 번째 css 코드를 사용한다고 이해하면 될 것 같습니다.

🏋🏻 해봅니다

🗣 그렇다면, 저는 이 친구(캐러셀)을 어떻게 반응형 디자인을 적용 시켜야 할까요?

// Carousel.js
// const CarouselWrapper = styled.div`
  position: relative;
  width: 60%;
// (..)

  @media only screen and (max-width: 1024px){ // ~ 타블렛
    width: 90%;
  }
  @media only screen and (max-width: 768px){ // ~ 모바일
    width: 100%;
  }
`;

PC 화면 🖥

🗣 PC 화면은 모니터 너비가 크기 때문에, 너무 사진이 옆으로 퍼지면 안 되겠죠. 그래서 적당한 크기로 제한해줍니다(width: 60%)

테블릿 화면 🖱

🗣 테블릿 화면은 PC보다는 조금 너비를 넓혀도 될 것 같습니다.(width: 90%)

모바일 화면 🤳🏻

🗣 모바일도 마찬가지입니다.(width: 100%)
🗣 화면이 작아질수록, 이미지를 크게 키우는게 낫다는 결론에 도달했습니다.
🗣 막상 만들긴 했는데, 저 혼자 잘못된 길을 가놓고 뇌피셜로 만족하고 있는 것일 수도 있기 때문에, 팀원분의 피드백을 듣기로 합니다.

캐러셀 컨텐츠 제작

---

🔗 References

• CSS 반응형 레이아웃 너비를 나누는 기준 정하기
• [출처] - CSS : 반응형 웹(Responsive Web)