[Modernizr] JS - Modernizr (모더나이저 = 마더나이저) - 크로스브라우징 구현 (= 브라우저의 HTML5 CSS3 지원 탐지)

1. Modernizr 용도 - 크로스 브라우징 구현
2. Modernizr 적용

Modernizr 용도 - 크로스 브라우징 구현

 

크로스브라우징 구현용.
(= 사용자의 브라우저가 HTML5 CSS3 지원하는지 탐지해, 지원 여부에 따라서 사용자에게 최적의 홈페이지 화면을 보여주는 코드 분기 가능)

 

---

IE6 이상 거의 대부분 PC 및 모바일 브라우저에서 사용 가능.

 

Modernizr 적용

1. 다운로드

 

공식홈 https://modernizr.com/download

깃허브 https://github.com/Modernizr/Modernizr
 

PS. Modernizer 공식홈에서 체크할 요소 체크 후, 필요한 것만 다운 가능.

---

2. 업로드

※ 다운받은 파일을 아래 구조가 되게 업로드 (그누보드5 경우)

 

 

/js/modernizr-custom.js

 

---

3. 코드 추가

※ 사용 중인 head.sub.php 파일 내 head 태그 내에 아래 코드 추가

 

 

 <script src="<?php echo G5_JS_URL?>/modernizr-custom.js"></script>

 

---

4. 코드 탐지

 

JS 이용해 탐지

https://modernizr.com/docs/#using-modernizr-with-javascript

 

CSS 이용해 탐지

https://modernizr.com/docs/#using-modernizr-with-css