🗣 반응형 페이지를 구현해야 하는데! 그게 뭔지 전혀 모르는 상태입니다!(비상)
: 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것
[출처] - 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 화면은 모니터 너비가 크기 때문에, 너무 사진이 옆으로 퍼지면 안 되겠죠. 그래서 적당한 크기로 제한해줍니다(width: 60%
)
🗣 테블릿 화면은 PC보다는 조금 너비를 넓혀도 될 것 같습니다.(width: 90%
)
🗣 모바일도 마찬가지입니다.(width: 100%
)
🗣 화면이 작아질수록, 이미지를 크게 키우는게 낫다는 결론에 도달했습니다.
🗣 막상 만들긴 했는데, 저 혼자 잘못된 길을 가놓고 뇌피셜로 만족하고 있는 것일 수도 있기 때문에, 팀원분의 피드백을 듣기로 합니다.