티스토리 뷰
자바스크립트는 전통적으로 동적인 웹사이트를 만들 때 많이 사용되는 클라이언트 기반 웹 프로그래밍 언어입니다. 자바스크립트를 누구나 쉽게 사용할 수 있게 만들어진 라이브러리가 몇 개 있는데, jQuery는 그 중에서도 가장 많이 사용되고 있는 라이브러리 겸 자바스크립트 프레임워크입니다.
jQuery를 이용하면 초보자라 하더라도 동적인 웹사이트를 만드는데 아무런 문제가 없습니다. 사용하기 쉽고 이해하기 쉽기 때문에 많은 사람들이 jQuery를 선호하고 있습니다. 또한 jQuery Mobile을 이용하면 스마트폰에 최적화된 웹사이트를 만드는 것도 가능합니다.
하지만 최근 Bootstrap이라는 새로운 자바스크립트 프레임워크가 등장하였는데, 뛰어난 시각적 효과를 함께 지원하고, 반응형 웹사이트를 쉽게 만들 수 있다는 점에서 지금은 Bootstrap도 많이 이용되고 있습니다.
CSS3부터는 미디어 쿼리라는 것을 사용할 수 있게 되었습니다. 미디어 쿼리는 반응형 웹사이트를 만들 때 필수적으로 사용되는 요소입니다. 웹브라우저의 해상도를 감지하여, 해상도에 따라 다른 CSS를 적용시킬 때 미디어 쿼리가 사용됩니다. 해상도에 따라 레이아웃의 구조를 바꾸어야 하는 반응형 웹사이트에서 미디어 쿼리가 반드시 사용되어야 하는 이유입니다.
CSS 미디어 쿼리는 다음과 같은 문법으로 사용할 수 있습니다. 매우 간단합니다.
@media all and (max-width: 320px) {}
@media all and (min-width: 321px) and (max-width: 768px) {}
@media all and (min-width: 769px) and (max-width: 1024px) {}
@media all and (min-width: 1025px) {}
min-width, max-width 값을 통하여 웹브라우저의 해상도를 지정할 수 있습니다. 위의 조건에 맞는 해상도일 경우에는 중괄호 내부에 있는 CSS가 해당 페이지에 적용됩니다. 해상도 옵션은 사용자가 직접 추가할 수도, 삭제할 수도 있습니다.
반응형 웹사이트에서 가장 중요한 것은 해상도의 너비입니다. 해상도 높이가 상대적으로 중요성이 떨어지는 이유는 반응형 웹사이트의 레이아웃은 일반적으로 해상도 너비에 따라 변동되기 때문입니다. 해상도 높이가 어떻게 변할지라도 너비가 변하지 않는다면 레이아웃에도 아무런 변화가 없기 때문에, 너비보다는 높이의 중요성이 상대적으로 떨어집니다.
jQuery를 이용하여 웹브라우저 해상도의 너비를 구하는 방법은 다음과 같습니다.
var width = $(window).width();
위의 소스코드는 width 변수에 현재 웹브라우저의 해상도 너비를 저장합니다. 단 한 번만 실행되기 때문에 페이지가 열리는 동시의 위의 스크립트는 실행되어야 합니다. 또한 페이지가 모두 로딩된 후에는 사용자가 웹브라우저의 창 크기를 바꾸어도 자바스크립트에서 인식하는 웹브라우저의 해상도 너비는 동일합니다. 변수에 이미 값이 들어가있기 때문입니다.
CSS 미디어 쿼리는 계속적으로 웹브라우저의 창 크기가 변동되어도 실시간으로 해상도를 인식할 수 있습니다. 바로 이것이 해상도의 변화를 감지하기 위해서는 resize 이벤트를 사용해야만 하는 jQuery와의 가장 큰 차이점입니다.
그런데 CSS 미디어 쿼리와 자바스크립트에서 인식하는 해상도에는 약간의 차이가 있습니다. 즉, 미디어 쿼리와 자바스크립트에서 모두 1024px을 해상도 너비로 지정하였다면, 미디어 쿼리와 자바스크립트가 서로 다른 위치에서 반응합니다. 이러한 문제 때문에 반응형 웹사이트 또는 블로그를 개발할 때에는 미디어 쿼리와 자바스크립트 중 어느 한 곳에서만 반응형을 위한 해상도 감지 역할을 할 수 있도록 해야만 합니다.
이 글에서는 CSS 미디어 쿼리에 해상도 감지 역할을 맡기도록 하겠습니다.
CSS 미디어 쿼리를 활용한다면 반응형 웹사이트을 위한 해상도 감지 방법은 매우 쉬워집니다. 일단 모든 페이지에 다음과 같은 CSS 미디어 쿼리가 적용될 수 있도록 합니다. 해상도 너비의 범위 설정은 개발자가 알아서 바꾸어주면 됩니다.
아래의 소스코드 예제에서는 총 4개의 영역으로 구분하였으나, 필요에 따라 범위 수를 줄이거나 늘리는 것도 가능합니다.
#media-320, #media-768, #media-1024, #media-1025 {
display: none;
height: 0px;
overflow: hidden;
}
@media all and (max-width: 320px) {
#media-320 { display: block; }
}
@media all and (min-width: 321px) and (max-width: 768px) {
#media-768 { display: block; }
}
@media all and (min-width: 769px) and (max-width: 1024px) {
#media-1024 { display: block; }
}
@media all and (min-width: 1025px) {
#media-1025 { display: block; }
}
각각의 미디어 쿼리에 있는 #media-XXXX 아이디는 개발자 본인이 쉽게 이해할 수 있는 이름을 사용합니다. 이 글에서는 미디어 쿼리가 적용되는 해상도 너비에 따라 이름을 정의해보았습니다.
위의 예제를 보면 자바스크립트에서 어떤 방법으로 해상도 너비를 감지할 것인지 이제 조금 감이 잡힐 것입니다. 모든 페이지에 위의 미디어 쿼리를 적용했다면, 그 다음으로는 모든 페이지의 HTML을 수정해야 합니다. 아래의 HTML 태그를 <body> 바로 다음에 추가합니다.
<div id="media-320"></div>
<div id="media-768"></div>
<div id="media-1024"></div>
<div id="media-1025"></div>
위의 HTML 요소(DIV)는 웹 브라우저의 해상도 너비에 따라 CSS display 속성이 none, block 둘 중 하나로 변동되기 때문에, 자바스크립트에서는 해당 객체의 현재 스타일을 확인함으로써 해상도 너비를 감지할 수 있습니다. CSS 미디어 쿼리와 자바스크립트에서 인식하는 해상도 너비의 차이를 극복할 수 있는 방법인 것입니다.
아래의 자바스크립트 jQuery 소스코드는 CSS 미디어 쿼리에서 사용하는 해상도 너비를 자바스크립트에서도 그대로 사용할 수 있게 해줍니다.
var responsive;
function setResponsive() {
if ($('div#media-320').css('display') == 'block') responsive = 1;
else if ($('div#media-768').css('display') == 'block') responsive = 2;
esle if ($('div#media-1024').css('display') == 'block') responsive = 3;
else if ($('div#media-1025').css('display') == 'block') responsive = 0;
else responsive = 4;
}
$(window).on('load', function () {
setResponsive();
});
$(window).on('resize', function () {
setResponsive();
});
자바스크립트에서는 responsive 변수를 통하여 현재의 웹브라우저 해상도 너비가 어떻게 되는지 확인할 수 있습니다. CSS에서는 실시간으로 해상도 너비 감지가 가능하지만 자바스크립트에서는 그렇지 않기 때문에 부득이 하게 웹 브라우저의 창 크기가 변동될 때마다 해상도 너비 정보를 가져오도록 하였습니다.
하지만 위의 소스코드에서는 페이지가 모두 로딩되는 때 responsive 변수가 설정되기 때문에, 반응형과 관련된 자바스크립트도 역시 페이지가 모두 로딩된 후에 실행되어야 합니다. 이 점은 자바스크립트와 CSS 미디어 쿼리에서 인식하는 해상도의 차이를 극복하기 위한 방법으로, 이 소스코드의 유일한 단점입니다. 따라서 자바스크립트를 HTML에서 불러올 때 defer 또는 async 속성을 사용함으로써 반응형과 관련된 해당 자바스크립트를 페이지 로딩 후 실행되게끔 하는 작업이 필요합니다.
만약 위의 jQuery가 작동하지 않는다면 다른 자바스크립트 프레임워크와의 충돌이 발생하고 있거나, jQuery 식별자가 생성되지 않은 것입니다. 이때에는 다음과 같은 방법을 사용해야 합니다.
jQuery.noConflict();
(function ($) {
// 이곳에 위의 스크립트를 입력
})(jQuery);
jQuery는 자바스크립트 프레임워크의 한 종류입니다. 따라서 같은 식별자jQuery의 $를 사용하는 다른 프레임워크와의 충돌이 충분히 발생할 수 있습니다. jQuery 뿐만 아니라 다른 프레임워크에서도 $를 프레임워크 식별자로 사용하고 있기 때문입니다.
jQuery 오류가 발생하는 경우에는 noConflict() 메소드를 사용하여 $ 식별자를 삭제하고, 익명 함수를 생성하여 해당 함수 내부에서만 $ 식별자를 사용할 수 있도록 합니다. 이렇게 대응한다면 jQuery 사용에 아무런 문제가 없을 것입니다.
'HTML5-CSS' 카테고리의 다른 글
| 표준 폰트를 기준으로 em 계산시 필요 (px -> em) (0) | 2016.10.30 |
|---|---|
| 관리자 템플릿 참고 사이트 모음 (0) | 2016.07.29 |
| 2.2 meta 요소 (0) | 2016.05.20 |
| 2. metadata Elements (0) | 2016.04.28 |
| 1.4 HTML5 기본 편집기 (0) | 2016.04.28 |
