웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법

웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다.

각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 있는 에뮬레이션 기능을 이용하는 겁니다. 그런데 이게 문제가 많아요. 에뮬레이션에서 IE8로 맞추었을 때 잘 나오는 사이트가 진짜 IE8에서는 엉망으로 나오는 경우가 있습니다.

따라서 제대로 테스트하기 위해서는 PC에 구 버전의 윈도우를 설치하고 사이트에 접속해서 확인을 해야 합니다. 보통은 실제 PC보다는 가상 머신을 이용하죠.

하지만 여기서 또 하나의 문제가 생겨요. 가상 머신이라 하더라도 윈도우를 설치하려면 해당 윈도우에 대한 라이센스가 있어야 한다는 거죠.

이러한 문제를 MS도 알고 있겠죠? 그래서 MS에서는 IE 테스트를 위한 가상 머신 파일을 제공하고 있어요. 윈도우가 체험판이라 약간 불편한 점도 있지만, IE 테스트하기에는 충분합니다.

마이크로소프트의 가상 머신 제공 페이지로 갑니다.

Virtual machine에서 IE 버전과 OS를 선택합니다. 이제 윈도우 XP나 윈도우Vista는 볼 수 없어요.

Select platform에서 가상 머신 소프트웨어를 선택합니다.

그리고 다운로드 합니다.

예를 들어 IE8 on Win7의 VirtualBox용 파일을 다운로드 하고 압축을 풀면 IE8 - Win7.ova 파일이 생깁니다.

VirtualBox에서 가져오기를 합니다.

설치된 윈도우는 정품이 아니라 체험판이에요. 부팅을 하고 90일이 지나면 정품 등록을 하라는 메시지가 계속 나올 겁니다. 이 때 다시 가져오기를 하는 번거로움을 없애기 위해 시스템을 부팅하기 전에 스냅샷을 찍어둡니다. 정품 복원 메시지가 나오기 시작하면 스냅샷으로 복원해버리면 돼요.

이제 Windows 7에서 돌아가는 Internet Explorer 8을 사용할 수 있습니다. 영문 버전이기는 하지만 한글 사이트도 잘 나옵니다.

같은 카테고리의 다른 글
SASS / 변환 스타일 - nested, expanded, compact, compressed

SASS / 변환 스타일 - nested, expanded, compact, compressed

변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...

SASS / 변수 선언하고 사용하기

SASS / 변수 선언하고 사용하기

CSS는 변수를 사용할 수 없습니다. 반복적으로 사용되는 코드라도 계속 입력을 해야 합니다. 그 코드가 바뀌면 모든 코드를 수정해야 합니다. 하지만, SASS는 변수를 사용할 수 있습니다. 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있습니다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해집니다. 변수 선언하기 $variable-name: variable-value; 예를 들어 $jb-color: red; 와 같이 하면 jb-color라는 변수에 ...

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...

크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법

크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법

웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다. 이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데... 원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다. 해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 ...

SASS / Mixin 정의하고 사용하기

SASS / Mixin 정의하고 사용하기

Mixin 정의하기 Mixin은 다음과 같은 형식으로 정의합니다. @mixin mixin-name {   // code } 인자를 포함하여 다음과 같이 정의할 수도 있습니다. @mixin mixin-name( $arg1, $arg2, ... ) {   // code } Mixin 사용하기 Mixin을 사용할 때는 다음과 같이 합니다. @include mixin-name; 인자가 있는 mixin이라면 다음과 같이 합니다. @include mixin-name( value1, value2, ... ); 예제 1 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SCSS @mixin jb ...

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...

cwebp를 이용하여 이미지를 WebP 형식으로 변환하는 방법

JPG, PNG 등의 이미지를 WebP 형식으로 변환하는 방법은 여러 가지가 있습니다. 그 중 구글이 제공하는 cwebp라는 프로그램으로 변환하는 방법을 알아보겠습니다. 다운로드 아래의 링크에서 다운로드를 할 수 있습니다. https://developers.google.com/speed/webp/docs/precompiled?hl=ko Windows용, Linux용, macOS용을 제공하고 있으니, 사용하는 OS에 맞게 다운로드합니다. 여기서는 Windows용으로 설명합니다. 압축 풀기 Windows용 파일을 다운로드한 후 압축을 풉니다. 압축만 풀면 되고, 설치는 따로 할 필요가 없습니다. D:\cwebp에 압축을 ...

SVG 이미지 파일 만드는 방법

SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...