Modernizr란 무엇인가?
Modernizr는 브라우저가 최신 웹 기능을 지원하는지 손쉽게 감지할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 이를 통해 기능 지원 여부에 따라 적절한 대응을 할 수 있습니다. 예를 들어, 브라우저가 비디오 재생 기능을 지원하지 않는다면 대신 간단한 정적 페이지를 보여주도록 처리할 수 있습니다.
CSS 규칙과의 자동 연동
Modernizr의 강력한 점은 기능 지원 여부에 따라 CSS 규칙을 작성할 수 있다는 것입니다. 브라우저가 특정 새 기능을 지원하지 않는 경우, 미리 작성해 둔 해당 규칙이 웹페이지에 자동으로 적용되므로 별도의 복잡한 조건 처리 없이도 깔끔하게 대체 스타일을 제공할 수 있습니다.
Modernizr 다운로드하기
Modernizr의 최신 버전은 Modernizr 공식 다운로드 페이지에서 내려받을 수 있습니다. 필요한 기능 감지 항목만 선택하여 맞춤형 빌드를 생성하면 파일 크기를 줄이고 성능을 최적화할 수 있습니다.
HTML 문서에 Modernizr 포함하기
Modernizr를 본격적으로 사용하기 전에, 먼저 HTML 문서의 헤더(<head>) 영역에 자바스크립트 라이브러리를 아래와 같이 포함해야 합니다:
<script src = "modernizr.min.js" type = "text/javascript"></script>
위 코드를 <head> 태그 안에 추가하면 페이지가 로드되는 즉시 Modernizr가 실행되며, 브라우저의 기능 지원 현황을 감지하여 html 요소에 관련 클래스를 자동으로 추가합니다. 이후 이 클래스들을 활용해 CSS나 자바스크립트에서 조건별 처리를 구현할 수 있습니다.