웹사이트가 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을 사용할 수 있습니다. 영문 버전이기는 하지만 한글 사이트도 잘 나옵니다.
코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...
CSS는 변수를 사용할 수 없습니다. 반복적으로 사용되는 코드라도 계속 입력을 해야 합니다. 그 코드가 바뀌면 모든 코드를 수정해야 합니다. 하지만, SASS는 변수를 사용할 수 있습니다. 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있습니다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해집니다. 변수 선언하기 $variable-name: variable-value; 예를 들어 $jb-color: red; 와 같이 하면 jb-color라는 변수에 ...
Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법
사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...
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 ...
Font Awesome 5 / 아이콘으로 체크박스 디자인하기
체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...
아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법
아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...
SASS / 문법 / 조건문 - @if, @else if, @else
SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다. 문법 @if condition1 { A } @else if condition2 { B } @else { C } condition1을 만족하면 A를, condition1을 만족하지 않고 condition2를 만족하면 B를, condition1과 condition2를 모두 만족하지 않으면 C를 사용합니다. @else if는 여러 번 사용할 수 ...
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 ...
대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...
카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고... 그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다. 우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, 다음은 특이하게도 ...