[목적]
홈페이지에 한글을 사용할 경우 인코딩과 관련된 주의사항을 살펴본다.
[이론]
이전 실습 ‘HTML 기본 구조‘에서 주어진 과제의 답은 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>홈페이지</title>
</head>
<body>
HTML5로 홈페이지를 만들자.
</body>
</html>
그러나 Windows 환경에서 Eclipse, Netbeans, Dreamweaver 등과 같은 전용 개발환경이 아닌 메모장과 같은 간단한 편집기를 이용해 작성한 경우라면 많은 경우 아래 그림과 같이 한글이 올바르게 출력되지 않는다. 그 이유는 html 파일 저장 시 한글 문자셋이 <meta> 태그에 지정된 문자셋과 동일하게 설정되어 저장되지 않았기 때문이다. 이를 해결하기 위해서는 HTML 파일 저장 시 올바른 인코딩을 설정해야 한다. 이 문제를 해결하기 위한 방법을 EditPlus를 이용하여 살펴보자.
[실습]
1. EditPlus를 이용하여 ‘exam-04-01.html’을 ‘FTP 원격열기'(참조)로 불러온 후 ‘FTP 원격저장'(참조)을 클릭하면 아래창이 나타난다. 이 창에서 화면 하단의 ‘인코딩’ 항목을 살펴보면 ‘ANSI’로 설정되어 있음을 확인할 수 있다.
2. ‘exam-04-01.html’ Line 4의 <meta> 태그 내 문자셋을 살펴보면 ‘UTF-8’로 되어 있으므로 저장 시에도 ‘인코딩’ 항목을 ‘UTF-8’로 일치시켜야 한다. 만약 <meta> 태그의 문자셋이 ‘EUC-KR’이라면 ‘인코딩’ 항목을 ‘ANSI’로 하여 저장하면 된다.
3. ‘인코딩’ 항목을 ‘UTF-8’로 설정 저장한 후 브라우저로 다시 접속해 보면 아래와 같이 한글이 정상적으로 출력된 것을 볼 수 있다.
[과제]
다음 결과를 출력하는 HTML 파일을 ‘exam-05-01.html’로 작성해 보자.
