내부페이지로에 반응형을 반영하는 작업을 하고 있다.


여러 기기로 테스트를 하지 못하는 상황에서는 구글 크롬 개발자 도구로 다양한 모니터, 태블릿, 모바일 화면을 가장해서 볼 수 있었다. 그래서 여기에 맞춰서 반응형 작업을 했다.


문제는 실제 모바일과 태블릿 환경에서 테스트 할 때 생겼다.
내부페이지 전체에는 가로, 세로 스크롤이 없이 컨텐츠 영역 안쪽에 있는 한 콘텐츠에 overflow-y 를 걸어서 스크롤이 내려가는 형태이다. 그래서 전체 영역에는 스크롤이 생기면 안된다.
크롬 개발자 도구에서는 스크롤 없이 예쁘게 만들어졌는데 막상 모바일과 태블릿에서 보니 스크롤이 생겨버렸다.


이걸 해결하는 과정에서 적용했던 방법을 소개해본다.

컨텐츠 전체를 감싸고 있는 부모 요소에 overflow-hidden 먹이기

전체의 컨텐츠를 감싸고 있는 body와 main 쪽에 overflow-hidden을 먹였더니 어느정도 진정이 되는 듯 싶었으나....

전체높이 박스 체크

그래도 넘친다!

맥북에 아이패드를 연결해서 사파리에서 개발자 도구를 열어서 아이패드에 잡힌 CSS를 볼 수 있었고, 어느 부분이 문제인지 문제를 바로 찾을 수 있었다.
body보다 main의 높이값이 넘쳐서 스크롤이 생기는 문제가 있었다.

혼자 공부하는 것보다 현장에서 배우는 게 더 많다는 말이 이해가 안갔는데, 이 과정을 하면서 이해가 확 갔다. 오오.. 나라면 혼자서 이런걸 생각해보지 못했을 거 같은데..

⭐️CSS와 JS를 이용해 높이값 잡기 (feat. 100vh의 함정)⭐️

반응형 작업을 하다보면 단위를 무엇을 써야할지 고민할 때가 있다. 주로 px 보다는 vw, vh, rem을 썼는데 문제는 vh에서 발생했다. 100vh는 말 그대로 화면의 전체 넓이를 감지해서 사용하는 단위인데, 브라우저의 제일 상단과 하단까지 잡아버린다. (브라우저의 주소창, 메뉴바 같은 거라던가...)

이 방법은 그런 문제를 해결해준다.

JavaScript

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

CSS

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

setProperty() 매서드는 CSS 선언 블록에서 새 CSS 속성을 설정하거나 기존 CSS 속성을 수정한다.

내가 이해하기로는 CSS에서 정해진
1. 높이값(var(--app-height))을 가져와서
2. 브라우저의 높이값을 측정한 뒤(doc.style.setProperty('--app-height', ${window.innerHeight}px))
3. 브라우저에 맞게 출력해주는 거 같다. (window.addEventListener('resize', appHeight))

참고 : https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9

html viewport 부분의 initial-scale=1 조절하기

html의 상단을 한 번 봐보자. 그럼 반응형을 위한 meta tag를 볼 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1" />

⬆️ 이 한 줄이 웹의 반응형을 시작하게 해주는 첫 발자국이다.

사실 이 부분을 조절하는건 딱히 추천되지 않는 거 같다.
해외 자료를 뒤질 때 initial-scale을 1, 즉 100% 상태를 유지해놓고 값을 조정하라고 권고하기 때문이다.

하지만 현재 작업하고 있는 내부페이지는 전체 페이지에 스크롤 없이 고정이 되고, 안쪽 컨텐츠에서 스크롤이 내려가는 형태이기 때문에 담겨야 하는 정보가 너무 많은 형태였다. 그래서 initial-scale을 0.7로 조절해 한눈에 보이게 조절할 수 밖에 없었다. 이거는 작업물에 따라 알아서 잘 조절해보도록 하자.






높이값을 해결했으니 이제 리엑트로 변환하는 작업이 기다리고 있다.
새로 만들어 내는 게 아닌, 기존에 있던 작업물에서 수정을 하는 게 처음이다 보니 잘 해낼까 걱정 가득 하다가도 한편으로는 기대된다.
다음 게시물부터 절규로 가득차겠지...😥