[웹브라우저를 바라보며]
웹 브라우저 위에 보여지는 웹 페이지들은 마치 여러 장의 문서를 미리 준비해두고 사용자가 요청했을 때 해당 내용에 대한 문서를 빠르게 보여주는 식으로 작동되는 A4용지 위에 작성된 문서와 같다. 이 종이 위에는 그림을 그릴 수도 있고, 문서를 작성할 수도 있으며, 다양한 필체와 그림으로 한 장에 빼곡히 채울 수도 있고 사진 또는 표 하나만 보여줄 수도 있다. 작은 모양의 종이를 덧대어 보여주기도 한다. PPT 슬라이드를 만드는 것과 유사하다고 생각하면 쉬울 것이다.
이는 웹 브라우저 '사용자'의 입장에서는 생각조차, 아니 궁금하지도 않았던 것이지만 웹 개발자는 어떤식으로든 인지하고 있어야 하는 백그라운드 지식이 아닐까 싶다. 이 백그라운드 지식중 가장 기초가 되는 것 중에 하나인 HTML 문자셋은 알게모르게 'Hello world' 를 보기 전부터 만나지만 크게 관심 없이 지나가버리게 되는데, 웹 프로그램을 구동시키기 위해서 반드시 알고 있어야 하지 않을까 싶어 정리하게 되었다.
[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)를 눌러주면 된다.
'HTML, CSS, Javascript' 카테고리의 다른 글
[jQuery] $ / $.fn 은 뭐고 함수는 어떻게 쓰는 걸까? (0) | 2023.07.06 |
---|---|
[JavaScript] Uncaught ReferenceError: **** is not defined (0) | 2023.07.05 |
[JavaScript] 웹 브라우저에 대한 기초 지식, DOM (0) | 2023.03.21 |
[JavaScript] 웹 브라우저에 대한 기초 지식, BOM (0) | 2023.03.20 |
javascript 변수 선언시 var, let, const의 차이 간단 요약 (0) | 2022.07.29 |
댓글