✔ 사이트 호환성 테스트를 해보자 |
IE (Internet Explorer)에서 사이트나 블로그를 이용할 경우 IE 버전마다 화면이 다르게 보인다거나 JavaScript가 정상으로 동작하지 않거나 하는 경우가 생기는데요. 특히, 반응형으로 개발된 사이트는 IE 버전별 화면이 다르게 보여지는 경우가 많기 때문에 IE 버전별 호환성 테스트를 꼭 해야합니다. 그래서 프로그램 설치 없이 IE 개발자도구를 이용해서 IE 버전별 사이트 호환성 테스트를 할 수 있는 방법에 대해서 알려드립니다.
✔ IE 개발자도구 사용하기 |
IE (인터넷 익스플로러) 자체에 개발자도구가 탑재되어 있습니다. 이 개발자도구를 이용해서 호환생 테스트를 해보겠습니다. (IE 11 버전에서 테스트를 진행하였습니다.)
✔ 설정 > F12 개발자 도구 또는 키보드에서 F12를 클릭하면 개발자 도구 화면이 나타납니다. |
✔ 문서 모드에서 IE 버전 선택하기 1. 에뮬레이션 탭을 선택합니다. 2. 테스트할 문서 모드를 선택하면, 인터넷 익스플로러에 선택한 문서 모드로 화면이 랜더링되어 보여집니다. -. 문서 모드 중 Edge (기본값)은 가장 최신 표준 모드를 말하는 것입니다. 여기서는 IE11 버전이 되겠습니다. |
✔ 제 블로그를 문서 모드 8 (IE 8 버전)로 선택해서 호환성 테스트를 해본 화면인데 깨져서 나오는 걸 확인할 수 있습니다. 반응형 사이트인 경우 미디어쿼리(@media)를 이용하여 만들어지는데 미디어쿼리(@media)는 IE 8 버전 이하에서는 지원되지 않기 때문에 화면이 깨지게 되고 정상적인 동작을 하지 못하게 됩니다. 그 이상 버전에서는 정상적으로 나오고 있습니다. |
✔ 마치면서 |
이상으로 개발자도구를 이용해서 호환성 테스트하는 방법에 대해서 알아보았습니다. 직접 반응형 스킨을 만들거나 개발을 하는 사람에게는 문서 모드만 변경하면 확인이 가능하니 유용하게 쓰일 수 있을 것 같습니다.
다른글 보기 |
마우스 오른쪽 버튼 잠금 해제 방법 - 크롬 확장프로그램 Pig Toolbox 블로그 소스 코드를 보기좋게 Color Scripter 사용법 반응형 스킨 해상도별 미리보기 사이트 - 트로이(Troy)
블로그 운영을 위한 HTML, CSS, JS 파일 소스 코드 정렬하기 블로그 속도 향상을 위한 HTML, CSS, JS 파일 용량 줄이기 |
