자바스크립트 반응형 레이아웃 구현 방법

반응형 웹페이지/사이트를 구현하는 방법은 CSS 미디어 쿼리를 이용하는 방법과 자바스크립트를 이용하는 방법 2가지가 있습니다.

2가지 방법 모두 브라우저 너비를 기준으로 적용하는 CSS를 다르게 해서 너비, 또는 장치에 따라 알맞는 레이아웃으로 보이도록 합니다.

두 방법은 장단점이 있습니다.

CSS를 이용한 방법은 직관적이고 쉽습니다.

그리고, CSSOM에 기반하기 때문에 자바스크립트보다 속도가 빠릅니다.

자바스크립트를 이용하는 방법은 웹브라우저 크기 변화에 실시간으로 반응할 수 있기 때문에 좀 더 다이나믹한 변화를 줄 수 있습니다.

애니메이션되는 레이아웃의 변화(Masonry 자바스크립트 라이브러리 같은 동적인 레이아웃 변화의 구현이 가능)나, OS 또는 디바이스 정보에 따른 반응형 레이아웃 적용을 할 수 있는 장점이 있습니다.

단점은 자바스크립트로 제어할 수 있는 부분이 생각보다 적습니다.

자바스크립트를 사용해도 일정 부분은 CSS에 의존하기 때문에 CSS 의존성에서 벗어날 수는 없습니다.

자바스크립트는 CSS 미디어 쿼리로 이루어지는 동작을 자바스크립트로 다양하게 제어할 수 있는 장점을 제공하는 것이며, CSS를 완전히 배제하는 것은 아닙니다.

자바스크립트를 사용해 실시간으로 브라우저 윈도우 크기가 변하는 것을 처리하는 코드를 작성해보겠습니다.

var resizeId = "";
window.addEventListener('resize', function(){    clearTimeout(resizeId);    resizeId = setTimeout(doneResizing, 250);});
function doneResizing(){    console.log('doneResizing Window Width: '+window.innerWidth);    //반응형 레이아웃 처리}

doneResizing() 함수는 윈도우 리사이즈 이벤트 발생시 반응형 처리를 하는 실제 함수입니다.

함수 내부에서 윈도우 너비값에 따라 어떤 레이아웃을 사용할지를 정해서 CSS를 추가하거나 삭제하는 식으로 처리를 하면 됩니다.

타이머 객체를 사용하는 것은 윈도우 리사이즈 이벤트가 너무 많이 발생해서 PC에 부하를 주거나, 화면 리프레시가 지속적으로 발생하는 것을 막기위한 지연 처리 기법입니다.

리사이즈 이벤트가 발생하면 일정 시간 후(예제의 기본 설정은 0.25초로 딜레이 시간을 설정했습니다.) doneResizing() 함수를 호출합니다.

타이머가 만료되어 doneResizing() 함수가 호출되기 전에 리사이즈 이벤트가 다시 발생하면 타이머를 제거하고 다시 타이머를 설정합니다.

마우스 드래그로 브라우저 리사이즈 하는 과정이 끝나면 마지막 타이머가 만료되면서 doneResizing() 함수가 비로소 실행됩니다.

리사이즈 이벤트가 0.25초 이상 발생하지 않으면 아래처럼 콘솔에 브라우저 너비값이 출력됩니다.

시간을 짧게 하면 조금 더 레이아웃이 동적으로 반응하겠지만, 화면 리프레시가 그만큼 많이 일어납니다.

제작하는 페이지의 성격에 따라 적절한 시간을 설정해서 사용하는 것이 좋습니다.