웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

meta charset, 메타태그에서 문자 인코딩 설정하는 방법

Last Modified : 2019-08-06 / Created : 2015-12-16
29,787
View Count

HTML을 사용하여 맨 처음 문서를 작성할 때 하는 몇 가지 중 가장 먼저 문자 인코딩(언어셋) 선언이 필요합니다. 아래는 html에서  문자 인코딩(Encoding)은 무엇이고 어떻게 선언하며 사용하는지 정리한 내용입니다.




# HTML 웹페이지 문서에 문자 인코딩 설정하기

웹페이지를 생성한 소스를 들여보보면 가장 먼저 <head> 그리고 <body> 태그를 볼 수 있습니다. <body>태그 바로 위에 <head> 태그가 위치하는데 문자 인코딩 설정은 바로 <head> 내부의 <meta> 태그 안에 작성하게됩니다. 여기서 <meta>는 여기에는 작성한 또는 작성 할 웹페이지의 여러 메타 정보를 담고 있게됩니다. 이들 정보들은 웹브라우저에 다양한 정보를 전달하는데 현재 웹사이트 방문자(사용자)에게 보여지게 될 내용에도 영향을 주게 되죠.

그럼 메타 태그의 인코딩이 필요한 이유는 무엇일까요? 그리고 왜 인코딩 선언이 필요할까요.


! 인코딩 방식의 선언하는 이유는?

브라우저에 현재 페이지의 인코딩 방식을 알려주는 이유는 현재 사용중인 언어셋 정보를 정확이 알려주기 위함입니다. 즉 이 언어셋을 올바르게 표현할 수 있는 인코딩 방식을 알려주는데 물론 이 메타 정보가 없더라도 브라우저는 대략적으로 추측할 수는 있습니다. 하지만 잘못된 예측으로 다른 인코딩 방식이 적용될 수 있죠.

다시 말해 정확한 인코딩을 알기 위해서는 메타 태그에 반드시 선언되어야 하며 만약 잘못된 인코딩을 선언하거나 인코딩 방식을 설정하지 않으면 문자깨짐 현상 등 심각한 오류로 나타날 수 있게됩니. 즉, 이를 방지하기 위한 가장 기본이 되는 것이 바로 인코딩 선언입니다. 그럼 아래에서 어떻게 인코딩을 선언하여 사용하는지 알아봅니다.



# HTML 문서에 인코딩 설정하기

먼저 인코딩 방식은 예전부터.. 현재의 HTML5까지 조금씩 변해왔습니다. 예를들어 HTML 4.01 및 이하의 인코딩 선언 방법이 다릅니다. 아래는 가장 기본이 되는 html5 그리고 html4.01에 대한 방법을 알아보겠습니다.

@ meta.html
<meta charset="UTF-8" />
<meta charset="EUC-KR" />

먼저 HTML5에서 사용되는 설정방법입니다. 이전의 설정방법은 매우 길었으나 HTML5에서는 매우 간단하게 charset 속성을 메타태그에 설정하면 끝입니다.

<meta charset="UTF-8" />

한국어를 사용하는 경우 UTF-8이나 EUC-KR 방식이 많이 사용됩니다. 그럼 아래는 HTML 4.01입니다. (최근에는 대부분 HTML5를 사용하므로 특별한 경우 이외에는 잘 사용되지 않습니다.)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

이번에도 html5와 똑같은 순서로 UTF-8 다음에 EUC-KR을 선언한 모습입니다. HTML 4.01은 잘 사용되지 않으나 예전에 사용되던 웹사이트를 수정, 변경하거나 EMAIL HTML을 작성할 때 사용되니 참고하시면 좋겠습니다.



# 만약 웹페이지에서 문자깨짐 현상 발견시 해결방법은?

meta 태그에서 charset을 정상적으로 설정하였음에도 여전히 문자가 깨진다면? 브라우저 나타나는 화면에는 알지 못하는 공백이나 특수문자 들이 나타날 수 있습니다. 이런 문제는 여러가지 원인이 있을 수 있는데 우선적으로 다음과 같이 확인해야합니다.

  • HTML meta의 charset 미설정 또는 다른 인코딩 선언
  • 서버언어(java, asj, jsp, php 등등)가 사용된 경우 인코딩 선언의 오류
  • 데이터베이스 인코딩 설정의 오류
  • 텍스트 에디터의 문서 저장시 기본 인코딩 charset 오류

위 방법 중 하나라도 잘못된 경우 문제가 발생할 수 있으므로 모든 점검이 필요합니다. 이처럼 사용되는 모든 언어는 각각의 인코딩 선언이 필요하며 서로 다른 인코딩이 사용된 경우 각각의 언어에서 제공하는 인코딩 변환함수를 적절히 사용함으로써 해결될 수 있습니다.

여기까지 사용 언어셋에 대한 인코딩 방식을 자세히 알아보았습니다.
meta charset 인코딩 메타태그 한글 깨짐 html5
아래의 글도 찾고 계시지 않나요?

Previous

IE에서 유투브 iframe 동영상이 z-index 미적용 되는 경우 해결방법

Previous

[HTML] 드랍다운(Drop down)과 콤보박스(Combo box) 차이점은?