RedPlus 개인 블로그

시삽: 레드플러스 님 
게시판 이동:
 제목 : Modernizr 소개 : HTML5 Semantic 태그 하위 호환성 유지
글번호: 243
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2011/05/10 오후 3:06:08 (2011/05/10 오후 3:06:08 수정)
조회수: 4823

 

소개

HTML5에는 HTML4.01과 달리 새롭게 Semantic 태그들이 도입되었습니다.

header, footer, nav, section 등의 HTML5 전용 태그들을 사용하다보면, 최신 웹 브라우저가 아닌 구 버전의 웹 브라우저에서는 정상적으로 표현되지 않습니다.

이때 구버전의 웹브라우저에서도 HTML5 시맨틱 태그가 호환되도록 할 수 있는 방법 중 가장 간단하면서도 유용한 방법이 JavaScript 라이브러리인 Modernizr의 사용입니다.

 

Modernizr 다운로드 사이트

http://www.modernizr.com/

Modernizr_01

 

데모

 

1. 아래 HTML5 문서처럼, heaer, nave, section, footer 등의 태그가 사용된 웹 페이지를 만들었습니다. 관련 스타일을 부여했습니다.

Modernizr_02

 

2. IE9처럼 HTML5의 Semantic 태그를 지원하는 웹브라우저로 실행하면 아래 그림처럼 정상적으로 실행됩니다.

Modernizr_03

 

3. 만약, IE8 또는 기타 구 버전의 웹브라우저를 사용하면 HTML5 Semantic 태그를 정상적으로 처리하지 못하므로 아래와 같이 원하는 모양의 웹페이지가 표현되지 않습니다.

Modernizr_04

 

4. IE9을 사용하여 정상적으로 표현되는 웹 페이지에서 아래 그림처럼, [호환성 보기] 버튼을 클릭하면, IE9 이하의 버전으로 호환되어 표현됩니다.

Modernizr_05

 

5. 호환성 보기 버튼을 클릭한 후 IE9에서 HTML5 Semantic 태그를 표현하지 못한 그림은 아래와 같습니다.

Modernizr_06

 

6. 자~ 그럼, IE8과 같이 낮은 버전의 웹브라우저에서 정상적으로 HTML5 Sematic 태그를 호환되도록 실행하고자 한다면, 앞서 제시한 Modernizr 사이트에서 최신 버전의 Modernizr JavaScript 라이브러리를 다운로드 받아서 해당 페이지에 아래 그림처럼 링크만 걸면 해결됩니다. 그러면, IE8에서도 정상적으로 웹 페이지가 보여짐을 알 수 있습니다.

Modernizr_07

 

마무리

지금부터는 HTML5 전용 태그를 사용하여 웹 사이트를 만들어보시기 바랍니다. 그리고, modernizer-1.7.min.js와 같은 자바스크립트 라이브러리를 기본값으로 인클루드 시켜놓으시면 하위 호환성은 유지됩니다.

 

끝.

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 DotNetNuke 5.6.2로 업그레이드 - Administrator 2011-05-12 5223
현재글 Modernizr 소개 : HTML5 Semantic 태그 하위 호환성 유지 - Administrator 2011-05-10 4823
다음글 코드샘플 : Classic ASP 3.0으로 가장 최근에 로그인한 사용자 리스트 출력 - Administrator 2011-05-10 4249
관련 페이지 리스트
numtitlenamedateview
388 C 언어에서 값 전달과 참조 전달(Call By Value and Call By Re... Administrator 2023-03-09 3564
387 병합 알고리즘 순서도 2022-10-22 5100
386 C 언어 강의: scanf를 엔터키를 기준으로 여러 행으로 값을 입력 받기 Administrator 2022-01-09 4407
385 C 언어: scanf 사용해서 표준 입력인 콘솔로부터 나이를 정수로 입력 받아 출력 Administrator 2022-01-07 3218
384 Java 코드 샘플 - Function 인터페이스로 람다 식 만들기 Administrator 2022-01-04 3114
383 C# 코드 샘플 - 널 조건부 연산자 사용하기 Administrator 2022-01-02 3155
382 C# 코드 샘플 - 널 병합 연산자와 default 키워드 Administrator 2022-01-02 3065
381 C# 코드 샘플 - 널 병합 연산자로 문자열 변수의 NULL 값 확인하기 Administrator 2022-01-02 2979
380 C# 강의 - 14세 미만 체크 메서드 구현 Administrator 2022-01-01 3031
379 C 언어 천 단위 콤마 찍기 thousands_separator.c Administrator 2021-12-30 4164
378 for 문 순서도 - for 문(for loop) 순서도(flowchart) Administrator 2021-12-28 6879
377 C 언어 코드 샘플 - 전처리기 - 조건부 컴파일 Administrator 2021-12-27 3056
376 C 언어 코드 샘플 - 전처리기 - 매크로 함수 Administrator 2021-12-27 3023
375 http-server 설치하기 - 로컬 루프백 주소로 웹페이지 실행 2021-12-27 3027
374 C 언어 코드 샘플 - N명의 학생의 점수를 입력받아 1차원 배열에 저장 후 총점 구... Administrator 2021-12-27 3080
373 Java 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 2958
372 C 언어 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 2999
371 C# 교과서 강좌 - LINQ - Select 확장 메서드에 익명 형식 사용하기 Administrator 2021-12-26 3117
370 C# 교과서 강의 - LINQ - Select 확장 메서드를 사용하여 새로운 형태로 ... Administrator 2021-12-26 3033
369 C 언어 코드 샘플 - static-shared - 정적(공유) 변수 사용하기 Administrator 2021-12-26 3052
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home