Modernizr는 무엇인가?
Modernizr는 HTML5와 CSS3의 특성을 브라우저가 지원하는지의 여부를 알아내는 아주 작은 JavaScript 라이브러리이다.
웹 프로그래밍을 하면서 수많은 브라우저에 대해서 호환성을 확인하면서 작성하는 것은 매우 귀찮고 번거로운 일이다. 또한 이를 완벽하게 하기도 쉽지 않을 뿐더러 실수 할 가능성도 크다. 어떻게 하면 이를 간단하게 할 수 있을까?
답부터 말하자면 바로 Modernizr를 사용하는 것이다.^^
다운로드 받기
Modernizr은 이곳(http://modernizr.com/download/)에서 다운로드 할 수 있다. 다운로드 페이지에 들어가면 자신이 체크하고자 하는 CSS3, HTML5의 특성들이 리스트되어 있다. 여기에서 체크가 필요한 항목을 선택한 다음, 리스트 하단의 'GENERATE!' 버튼을 클릭하면 Modernizr JavaScript 파일이 만들어 진다. 그러면 'DOWNLOAD' 버튼이 활성화되는데 이를 클릭해서 다운로드받을 수 있다.
잘 모르겠으면 개발 버전을 받을 수 있는데, 이 안에는 Modernizr의 모든 체크가 들어가지만 압축되어 있지 않아 용량아 좀 편이다.(2.8.3 버전의 경우 42Kb)
사용하기
Modernizr를 사용하는 것은 매우 간단하다.
먼저 다음과 같이 head 태그 안에 다운받은 Modernizr JavaScript 파일을 지정한 script 태그를 추가한다.
<!DOCTYPE HTML>
<html>
<head>
<title>Modernizr 테스트</title>
<script src="modernizr.js"></script>
</head>
<body>
...
</body>
</html>
이렇게 지정해 놓으면 페이지가 브라우저에서 로딩될 때 Modernizr이 브라우저의 특성을 체크해서 JavaScript Object를 만들어 놓는다..
이렇게 만들어진 JavsScript Object를 이용해서 브라우저의 HTML5와 CSS3의 특성을 지원하는지를 확인할 수 있는데, 이를 활용하는 방법은 다음과 같다.
먼저 CSS 구문을 사용하는 방법이다.
.rgba div {
알파 색상을 지원하는 브라우저의 경우 지정할 스타일들을 여기에 작성한다.
}
.no-rgba div {
알파 색상을 지원하지 않는 브라우저의 경우 지정할 스타일들을 여기에 작성한다.
}
JavaScript를 사용하는 방법은 다음과 같다.
if(Modernizr.rgba) {
알파 색상을 지원하는 브라우저의 경우 실행할 스크립트를 여기에 작성한다.
} else {
알파 색상을 지원하지 않는 브라우저의 경우 실행할 스크립트를 여기에 작성한다.
}
위와 같이 특성의 지언 여부에 따라 쉽게 분기 처리가 가능하다. 이런 체크를 일일이 한다고 생각하면 정말이지 하늘이 노래진다. Modernizr를 작성한 팀에게 정말이지 감사를 표하는 바이다. 복 받으실 꺼에요.
Modernizr는 사실 더 많은 기능을 제공하지만 설명은 여기까지만~
Modernizr의 사용법을 익히는 약간의 노력과 시간을 들인다면 어느 브라우저에서도 깨지지 않고 잘 보이고 동작하는 웹 어플리케이션을 작성할 수 있을 것이다.
