[Javascript] 반응형 페이지에서 화면의 크기와 컨텐츠 크기의 차를 이용해보자!

반응형 페이지에서 접속된 기기에 따라서 화면의 크기가 달라지면 자연스럽게 그에 맞는 css를 적용해야 한다.

CSS의 미디어 쿼리를 사용하여 모든 기기에 적합하게 맞추는게 가장 이쁘고 정확하게 나오겠지만, 해당 컨텐츠의 크기를 기기의 크기에 맞춰서 조절이 동적으로 하고 싶은 경우가 있다.

이 경우에는 자바스크립트를 사용하여 간단히 해결할 수 있다.

아래의 그림은 stackoverflow에서 엘리먼트의 너비와 높이에 대한 문의글에 대한 답변에 포함된 그림인데, 이해하기 쉽게 정리되어있다.

(출처 : https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively)

일단 주목해야 하는 부분은 해당 엘리먼트가 실제로 기기의 화면에서 보여지는 부분이 얼마만큼의 공간을 차지하고 있는지 이다.

저 위의 그림에서 'clientWidth'와 'clientHeight' 속성이 실제로 보여지고 있는 컨텐츠의 크기를 가지고 있다.

그리고 비교해야되는 대상이 되는 'scrollWidth', 'scrollHeight' 속성을 이용한다.

'scrollWidth', 'scrollHeight' 속성은 컨텐츠의 실제 너비와 높이값을 가진다.

이 속성들을 이용하여 자바스크립트 코드를 사용해보자

* 실제보여지는 부분보다 실제 컨텐츠의 영역이 클경우 글자 크기를 80퍼센트로 줄이는 예제 :

function changeFontSize() {

let $selector = document.getElementById("id"); // 셀렉터 지정

$selector.style.fontSize = "100%";

if ($selector.scrollWidth > $selector.clientWidth) {

$selector.style.fontSize = "80%";

}

}

위의 함수를 작성해서 브라우저의 화면의 변화에 따라 자동 실행이 되게끔 해주면 된다.

resize 이벤트를 동작시켜주기 위한 방법은, 이전 포스팅 했던 글을 참고. 

(이전 글 : [HTML-모바일] 스마트폰 기기의 가로/세로 변경시 자동으로 이미지 크기 변경하기 )

위의 속성들을 응용하게되면 다양한 변화를 동적으로 적용할 수가 있게된다.

물론 해당 기능들을 지원하는 편한 플러그인들이 있지만, 소수의 페이지에서만 사용한다면 플러그인보단 위의 소스를 사용하는게 어떨까 싶다.