사건의 발단

컬러 렌즈 프로젝트는 온전히 모바일에서만 동작하는 프로젝트이다.

따라서 모바일에 최적화된 UI를 만드는 것이 이번 프로젝트의 핵심적인 디자인 목표였는데, UI를 구성할 때, header부터 footer까지 딱 첫눈에 보이는 화면에 꽉 차도록 구현하고 싶었다.

하지만, 문제가 발생했다.

처음에 CSS 상에서 나는 단순하게 데스크탑 UI를 만들때처럼 전체 화면의 높이값을 100vh로 설정했다.

왜냐면, 데스크탑 상에서는 이렇게 진행해도 하단에 추가적인 상태바가 존재하지 않았기 때문에, 가려지는 부분이 없었기 때문이다.

하지만, 모바일에서 이러한 방식은 통하지 않았다.

왜냐하면, 모바일 버전에서 크롬 브라우저는 상/하단에 위치한 주소창 및 메뉴 바가 존재했고, 이때 화면을 100vh로 해버리면 하단 바가 화면 footer 근처를 가려버렸기 때문이다.

일단 이 문제를 직면하니 새로운 고민거리가 생겼다.

크롬 뿐만 아니라, 브라우저 마다 모바일에서의 메뉴바의 크기가 다를 것이고, 또한 기기마다 화면의 크기도 다를 것인데, 이를 모두 고려한 미디어 쿼리를 작성하는 것은 너무나 노가다같은 방식같아 보였다.

분명 다른 방식이 있어 보였다.

어떻게 해결할까?

CSS상에서만 스타일링을 진행하는 경우, 보여지는 화면에 동적인 반응을 하여 크기를 정할 수 없다.

우리는 이러한 경우에, 다양한 브라우저의 화면 및 기기의 화면 크기에 맞게 동적으로 요소의 크기를 설정해줘야한다.

동적 스타일링이 담당하는 코드는? 자바스크립트이다.

우리는 지금부터 자바스크립트 코드가 로딩되면 가장 먼저 해줄 일로써, 화면의 크기를 설정해주고, 그 이후에 CSS 파일에서 사용가능한 변수로 이 값을 저장하여 기준 크기로 정해줄 것이다.

더 정확히 말하자면, CSS 상에서 100vh를 적용시켰을 때, vh의 기준이 되는 값을 화면에서 보여지는 부분의 크기로 맞춰주는 것이다.

자바스크립트 상에서 setProperty를 사용하면, CSS 코드에서 접근이 가능한 변수를 저장할 수 있다.

그러므로, 자바스크립트에서 기준점이 되는 window.innerHeight 값을 받아 저장하고, 이 값의 1/100 값을 custom property로 저장한다.

let vh = (window.innerHeight) * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

위의 코드처럼 setProperty를 통해 지정해준 값을 custom property라고 부른다.

이때, custom property의 이름에는 앞에 **‘--’**를 붙여서 구분해줘야한다.

<CSS>

body {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: hidden;
  }

CSS 코드에서 height를 두번 설정했다.

이는, 혹시 특정 브라우저에서 custom property를 지원하지 않는 경우에 기본값을 설정해주기 위해서이다.

이 과정을 통해 동적으로 기준이 되는 vh의 값을 지정해주면, 브라우저와 기기의 크기에 맞게 전체적인 화면의 사이즈를 동적 설정해줄 수 있다.

다행이다. 노가다는 피할 수 있게 되었다.