개발자
웹뷰 전역 레이아웃 스타일 관련 질문드립니다 !
안녕하세요 ! 웹 프론트엔드를 공부하고 있는 뉴비입니다. 현재 웹뷰(?) 프로젝트를 진행하고 있는데요 ! Nextjs와 styled-components를 이용해 개발하고 이를 PWA를 적용해 모바일에서 실행 가능하도록 하는것이 목표입니다. 페이지 작업 도중 개발자 도구의 각 모바일 기기 환경에서 레이아웃이 달라지는 문제가 발생하고 있는데요 ! 예를 들어, 아이폰 SE환경 (width 375px) 에서는 페이지의 컨텐츠가 얼마 없음애도 불구하고 y축 스크롤이 생기는 문제, 이보다 큰 기기인 아이폰 14 pro (width 430px) 등에서는 아래쪽 여백이 너무 많아 허전한 느낌이 듭니다 ㅠㅠ 이를 해결하려면 어떤 식으로 접근해야 할까요 ? 현재 globalCss는 캐치테이블(https://app.catchtable.co.kr/)의 Wrapper div를 참고하여 대강 적용해둔 상태입니다 .. !
1const GlobalStyles = createGlobalStyle`
2 ${reset}
3
4 * {
5 box-sizing: border-box;
6 }
7
8 a{
9 text-decoration: none;
10 color: inherit;
11 }
12
13 ul, ol {
14 list-style: none;
15 }
16
17 button {
18 all: unset;
19 cursor: pointer;
20 }
21
22 html,
23 body {
24 width: auto;
25 max-width: 480px;
26 min-height: 100vh;
27 margin: 0 auto;
28 padding:0;
29 background-color: #fff;
30 position: relative;
31 box-shadow: 0 0 20px #0000000d;
32 }
33`;
34
35export default GlobalStyles;
답변 1
문제 상황이 뭔지 정확하게 인식하기 어렵지만 보여주신 css 코드만으로 나이브하게 생각해보았을 때에는 단위 이슈로 인해 특정 기기에서 세로 스크롤 이슈가 발생할 수 있어보입니다. 우선은 vh 단위를 사용하는 대신 dvh, svh, ivh 등의 단위를 학습해보시고 시도해보시면 좋을 것 같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 13일
레이아웃의 스크롤과 여백 문제는 대부분 CSS에서 발생하는 경우가 많습니다. 다양한 크기의 디바이스에 맞게 반응형 레이아웃을 구성하기 위해선 media query를 사용해야 합니다. 먼저, `y축 스크롤` 이 생기는 문제에 대해선 아마도 `height: 100vh;` 때문일 가능성이 있습니다. vh(viewport height)는 전체 화면 크기를 기준으로 하므로, 현재 div이 포함하고 있는 컨텐츠가 화면보다 작더라도 그것은 div의 높이를 100% 화면의 높이로 설정하기 때문입니다. 이를 해결하려면 vh 대신 auto나 실제 내용에 기반한 크기 단위를 사용해야 할 수 있습니다. 두번째로, 아래쪽 `여백` 문제는 `min-height: 100vh;` 때문일 수 있습니다. 이 속성은 div의 최소 높이가 항상 화면의 높이와 같도록 만듭니다. 즉, 실제 컨텐츠가 화면 높이보다 작을 경우에 여백이 생깁니다. 이를 해결하려면 min-height 값을 조정하거나 컨텐츠에 padding을 추가하는 방법 등을 사용할 수 있습니다. 또한, 각기 다른 모바일 환경에서의 레이아웃 보정은 media query를 사용하는 것이 가장 효과적입니다. media query는 특정 조건(화면 크기, 해상도 등)에 따라 다른 CSS 스타일을 적용할 수 있게 해줍니다. ```javascript @media only screen and (max-width: 375px){ body{ /* iPhone SE styles */ } } @media only screen and (max-width: 430px){ body{ /* iPhone Pro styles */ } } ``` 이처럼 사용하여 기기별로 다른 CSS 스타일을 적용할 수 있습니다. 이들 조합으로 문제를 해결해 보시길 바랍니다! 웹 개발에선 종종 이렇게 디자인이나 레이아웃과 관련된 문제가 발생하므로, CSS와 반응형 웹 디자인에 대해 좀더 공부하시면 큰 도움이 될 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!