[ 반응형 웹 하위브라우저에 대응하기 ] HTML5/CSS3/미디어쿼리 하위브라우저 대응
1. HTML5 요소를 지원하지 않는 브라우저에 대응하기
-> 접속한 익스플로러 브라우저의 버전이 9보다 낮을 경우에만 해당 스크립트를 내려 받도록 함.
<head>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
2. CSS3 속성을 지원하지 않는 브라우저에 대응하기
-> http://css3pie.com 에서 파일 다운로드
-> 다운로드 받은 파일은 아래와 같이 사용
<style>
section{
behavior:url(PIE.htc);
}
</style>
3. 미디어 쿼리 속성을 지원하지 않는 브라우저에 대응하기
-> https://github.com/scottjehl/Respond 에서 파일 다운로드
-> 다운로드 받은 파일은 아래와 같이 사용
<head>
<!--[if lt IE 9]><script src="respond.min.js"></script><![endif]-->
</head>
미디어 쿼리 지원 스크립트 파일 사용시 주의 사항
1. 로컬환경에서는 작동하지 않음 - 호스팅 서버나 웹서버를 이용한 테스트 필요.
2. 미디어 쿼리 속성을 사용할 때는 all and 구문을 생략하면 안됨.
3. css파일 내에서 css 파일을 불러오는 방식인 임포트 방식으로 미디어 쿼리 속성을 작성하면 작동하지 않음
4. html 문서내에 스타일 코드를 작성하는 방식인 임베디드 방식으로 미디어 쿼리 속성을 작성했을때는 작동하지 않음.
- 참고 도서 ( 추천 합니다!! )-
Doit! 반응형 웹 만들기 by 이지스 퍼블리싱
'웹프로그래밍' 카테고리의 다른 글
Rocky Linux에 Node.js를 설치하는 가장 쉬운 방법: 초보자 가이드 (0) | 2025.01.04 |
---|---|
애플 개발자들을 위한 웹 개발 생산성 200% 꿀팁과 필수 도구 (0) | 2025.01.04 |
[ 컴퓨터 ] 인터넷익스플로러 재설치, 인터넷익스플로러 10 설치하는 법, 인터넷익스플로러 삭제 (0) | 2016.07.15 |
[ 프로그램 설치 ]자바 JDK 다운로드 및 설치 방법 / 자바 환경변수 설정 (0) | 2016.06.21 |
[ 웹프로그래밍 ] 무료호스팅 / notepad++ ftp 연결 / php 무료호스팅 / notepad++ 사용법 / dothome 무료호스팅 / 포트폴리오 호스팅 (0) | 2016.02.17 |