Charset
Meta 태그의 Charset 은 페이지의 문자 인코딩을 선언한다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 “utf-8” 의 대소문자 구분 없는 ASCII 표현이어야 한다.
HTML5 사양은 웹 개발자가 세계의 거의 모든 문자와 기호를 포함하는 UTF-8 문자 집합을 사용하도록 권장하고 있다.
해당 태그가 없으면 인코딩을 명확하게 알려주지 않아, 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리해주는데, 처리가 정확할 경우도 있지만, 그렇지 못한 경우 한글과 특수문자가 깨져서 나올 수 있으므로,
다양한 경우에서도 한글이 깨지지 않고 잘 보이기 기대한다면 해당 태그를 꼭 적어주는 것이 좋다.
html 파일이 utf-8 이 아닌 다른 인코등 (euc-kr 등)으로 작성되어 있는 경우에는 해당 인코딩으로 명시를 해줘야 한다. mysql 같은 DB 와 연동해서 결과를 출력할 때에는 해당 DB 인코딩도 맞춰주지 않으면 DB 출력결과가 깨지는 문제가 생길 수도 있다.
euc-kr 은 예전 레거시코드를 다룰 일이 있다거나 할때 흔히 나오는 인코딩이라고 한다.
HTML 4.01 까지는 http-equiv 속성을 통해서 선언했었다. HTML 4.01 은 잘 사용되지 않으나 예전의 웹사이트를 수정 작업하거나, EMAIL HTML 을 작성할 때 사용되기도 한다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
HTML5 에 와서는 charset 속성을 메타 태그에 설정하면 끝이다.
<head>
<meta charset="utf-8">
</head>
Syntax
<meta charset="character_set">character_set :
HTML 문서의 문자 인코딩을 지정한다. (ex. utf-8, euc-kr)
Browser Support
| Attribute | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
| charset | Yes | Yes | Yes | Yes | Yes |
ASCII
미국정보교환표분부호(American Standard Code for Information Interchange) 또는 ASCII 는 문자, 숫자, 구두점, 제어문자를 디지털 형태로 바꾸어주는 대표적인 문자 인코딩 방식이다. 2007년부터 웹에서는 UTF-8 이 주로 쓰이고 있다.
UTF-8
처음 128개의 UTF-8 문자는 처음 128개의 ASCII 문자 (숫자 0-127) 와 정확히 일치하며, 이는 기존 ASCII 텍스트가 이미 유효한 UTF-8 임을 의미한다. 다른 모든 문자는 2~4 바이트를 사용한다. 각각의 바이트는 인코딩 목적으로 남겨진 비트가 있다. 비 ASCII 문자가 저장을 위해 1바이트 이상을 요구하기 때문에, 바이트가 분리되고 재결합되지 않은 상태로 실행하면 손상될 위험이 있다.
문자 인코딩 (character encoding)
인코딩은 바이트와 텍스트 간의 매핑을 정의한다. 바이트 시퀀스는 다양한 텍스트 해석을 허용한다. 특정 인코딩(예를 들면 UTF-8 등) 을 지정함으로써 바이트 시퀀스를 해석하는 방법을 지정한다.
예를 들어, HTML 에서 우리는 일반적으로 아래 줄과 같이 UTF-8 의 문자 인코딩을 선언한다 :
<meta charset="utf-8">이것이 우리가 우리의 HTML 문서에서 인간 언어의 문자를 사용할 수 있도록 보장하며, 그것들이 신뢰성있게 표시되게 해준다.
참고 문서:
https://github.com/codingeverybody/codingyahac/issues/107
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
https://www.w3schools.com/tags/att_meta_charset.asp
https://developer.mozilla.org/ko/docs/Glossary/ASCII
https://developer.mozilla.org/ko/docs/Glossary/UTF-8
https://developer.mozilla.org/ko/docs/Glossary/character_encoding
'스터디 > 웹개발' 카테고리의 다른 글
| 리액트 프로젝트 시작하기 (0) | 2022.08.30 |
|---|---|
| 나만의 홈페이지 만들기 - GitHub.io (0) | 2022.08.28 |
| HTML (1) - head 태그란? (0) | 2022.06.16 |
| 혼자 공부하는 자바스크립트 2주차! 03. 조건문 (0) | 2022.01.24 |
| 자바스크립트 시작하기: 오류와 표준 스타일 (0) | 2022.01.11 |
