본문 바로가기
HTML, CSS, Javascript

HTML 문자셋과 인코딩 (이클립스 인코딩 설정)

by Davidev 2023. 3. 14.
반응형

 

[웹브라우저를 바라보며]

 

웹 브라우저 위에 보여지는 웹 페이지들은 마치 여러 장의 문서를 미리 준비해두고 사용자가 요청했을 때 해당 내용에 대한 문서를 빠르게 보여주는 식으로 작동되는 A4용지 위에 작성된 문서와 같다. 이 종이 위에는 그림을 그릴 수도 있고, 문서를 작성할 수도 있으며, 다양한 필체와 그림으로 한 장에 빼곡히 채울 수도 있고 사진 또는 표 하나만 보여줄 수도 있다. 작은 모양의 종이를 덧대어 보여주기도 한다. PPT 슬라이드를 만드는 것과 유사하다고 생각하면 쉬울 것이다.

 

 

 

이는 웹 브라우저 '사용자'의 입장에서는 생각조차, 아니 궁금하지도 않았던 것이지만 웹 개발자는 어떤식으로든 인지하고 있어야 하는 백그라운드 지식이 아닐까 싶다. 이 백그라운드 지식중 가장 기초가 되는 것 중에 하나인 HTML 문자셋은 알게모르게 'Hello world' 를 보기 전부터 만나지만 크게 관심 없이 지나가버리게 되는데, 웹 프로그램을 구동시키기 위해서 반드시 알고 있어야 하지 않을까 싶어 정리하게 되었다.

 

 

 

HTML 문자셋은 세계 각국에서 다양한 언어로 작성되는 '문서'를 컴퓨터가 알 수 있는 언어로 바꾸어주는 역할을 한다.

 

 

 

[HTML문자셋의 종류]

 

ASCII : 아스키코드. 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있다. (최초의 문자셋)

ANSI : 윈도우즈에서 만든 문자셋, 총 256개의 문자 코드를 지원한다.

ISO-8859-1 : 256개의 문자코드를 지원하는 HTML4 의 기본 문자셋.

UTF-8 : 이 세상에 존재하는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋.

 

 

 

웹 브라우저 위에 표현하고 싶은 기호, 문자들이 늘어난 것과 비례해 HTML 문자셋 또한 점차 발전을 거듭해 현재는 HTML5권고안에 맞는 'UTF-8' 문자셋을 주로 사용하고 있다. HTML5에서 UTF-8의 문자셋을 이용한다는 것을 반드시 명시해 주어야 하며(웹 표준),  아래와 같이 코드를 작성하도록 표준화 되었다.

 

 

 

<!DOCTYPE html>						<!-- 문서형식 -->
<HTML>
	<HEAD>
		<meta charset="UTF-8">			<!-- HTML 문자셋 지정 -->
	</HEAD>
	<BODY>
	</BODY>
</HTML>

 

 

 

이 HTML문자셋에 대한 설정이 제대로 이루어지지 않는다면 아래와 같은 에러가 발생할 수 있다. 만일 아래와 같이 에러가 발생한다면 코드 내 문자셋 지정이 되었는지 확인 후 IDE 내 인코딩 설정에서 추가로 어떻게 지정되었는지 확인해주어야 한다.

 

 

 

한 번쯤은 봤을만한 인코딩 에러.

 

 

[이클립스 인코딩 설정]

 

IDE에서 인코딩 설정을 확인하는 방법은 아래와 같다. (IDE : 이클립스 기준) 

Windows - Preferences - "encoding"을 검색해 포함된 메뉴를 차례로 확인하되 세팅창 하단에 Default encoding을 직접 입력하거나 default 옵션을 선택해 저장 후 닫기(Apply and Close)를 눌러주면 된다.

 

 

컨텐츠타입에 따른 인코딩 세팅

 

 

 

작업환경의 인코딩 세팅.

 

 

반응형

댓글