메타태그, 글자가 깨어진다면 Charset를 확인하라
HTML 문서 작성시에 <head></head>에 코딩을 하는 중요한 부분이 있습니다. Meta Tag(메타 태그)입니다.
메타 태그 중에는 description, keywords, author 등도 있지만, 가장 먼저 코딩을 해야 하는 것이 charset 이며, 상당히 중요한 것 중의 하나입니다.
메타 태그는 HTML 문서의 head 헤드 부분에 포함이 되어, 문서에 직접적으로 나타나지는 않지만, 해당 문서의 정보를 제공하는 태그입니다. 네이버, 다음, 구글과 같은 검색의 노출을 보다 효과적으로 하기 위해서는 반드시 포함시켜야 하거나, 문서가 어느 나라 언어로 되었는지도 알려줍니다.
물론 메타 태그를 사용하지 않는다고해도 보여지는 화면상에서는 이상이 없지만, 반드시 포함을 시키는 것이 좋습니다.
메타 태그는 일반적으로 <head>메타 태그</head> 를 코딩합니다.
CHARSET (인코딩 설정)
Charset는 해당문서가 어떤 언어로 인코딩이 되었는지를 알려줍니다. 즉, 한국어, 일본어, 중국어 또는 유니코드 등으로 인코딩이 되었는지 알려줍니다.
<meta charset="UTF-8"> // HTML5 방식
과 같이 코딩을 합니다.
HTML5 이전에는 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 과 같이 코딩을 하였지만, HTML5에서는 간편하게 charset="UTF-8" 과 같이 사용이 가능합니다.
왜 Charset 를 설정하지 않으면 안되는 것일까요?
body 에 안녕하세요 qOOp의 HTML강좌에 오신것을 환영합니다 라고 입력 후 저장후 브라우저에서 실행을 하면 위와 같이 한글이 정상적으로 나타나야 합니다.
동일한 코드이지만, 영어를 제외한 글자가 깨어져서 알아 볼수가 없습니다. 이러한 경우, 인코딩이 제대로 설정이 되지 않아서 위와 같이 나타날 경우가 있습니다.
한글 윈도우, 한글 브라우저를 사용할 경우는 인코딩을 설정을 하지 않아도 정상적으로 나타나는 경우도 있지만, 영문 브라우저, 혹은 일본 브라우저 등 다른 나라 언어로 설정된 브라우저를 사용할 경우, 인코딩을 설정을 하지 않으면 글자가 깨어져서 나오는 일이 허다합니다.
최근의 웹페이지들은 언어와 상관없이 어떤 언어를 사용하여도 정상적으로 출력이 가능한 UTF-8 을 많이 사용을 하고 있지만, 이전에는 각 국가별로 다른 인코딩을 사용하였기 때문에 charset를 정확하게 설정을 하지 않으면, 글자가 깨어지는 경우가 많았습니다.
몇년 전만해도 한국의 대기업 홈페이지도 글자가 깨어지더군요...
지금도 찾아보면 심심찮게 볼수 있습니다. 이러한 것은 모두 Charset 설정이 잘못되었거나 하지 않았기 때문입니다.
요즘의 charset는 UTF-8을 많이 설정을 하지만, 이전에는 그렇지 않았습니다.
한국의 경우 가장 많이 사용했던 charset 는 euc-kr 이었으며, 일본의 경우, shift_jis , 중국의 경우 big3 등을 사용을 했었습니다.
이러한 Charset 를 사용했어도, 각 나라의 브라우저를 사용할 경우 글자가 깨어지지 않았던 이유는 사용하는 PC가 그 나라 언어일 경우, 브라우저에서 알아서 인식을 했기 때문입니다. 그러나, 만약 다른 나라의 브라우저를 사용할 경우에는 당연히 글자가 깨어져서 알아 볼수가 없이 출력이 되구요.
<!DOCTYPE html>
<html>
<head>
<title>타이틀</title>
<meta charset="UTF-8"> // euc-kr, shift_jis ...
</head>
<body>
</body>
</html>
한국에서 많이 사용하는 charset은 euc-kr 이지만, 최근에는 UTF-8을 더 많이 사용합니다.
오랜 기간동안 개발을 해왔던 프로그래머들 중에서도 외국어 사이트를 개발해보지 않았던 분들은 가끔씩 고생을 하고는 한답니다.
그럼, 단지 문서에 <meta charset="UTF-8"> 로 설정만 하면 되는 것일까요?
위의 페이지는 html 작성시에 <meta charset="UTF-8"> 을 코딩을 하였습니다. 그러나, 글자가 깨어져서 나옵니다. 왜 그럴까요?
실제 html 파일에는 charset가 코딩이 되어 있어도, 실제 파일이 UTF-8로 저장이 되지 않고, ANSI로 저장이 되었기 때문입니다.
많은 텍스트 에디터에서는 문서 저장시에 인코딩도 지정이 가능한데, charset를 UTF-8로 설정시에는 저장시에도 UTF-8로 저장하셔야 합니다.
<meta charset="euc-kr"> 로 설정시에는 텍스트 에디터에서 저장시 인코딩을 ANSI로, <meta charset="UTF-8">로 설정시에는 저장시 UTF-8로 저장을 하여야 합니다.
정말 단순한 설정이지만, 이것을 잘 몰라서 며칠을 고민하는 경우도 있습니다. ^^
'Web > Html' 카테고리의 다른 글
| [HTML강좌] 헤드의 마지막 자바스크립트와 CSS (1) | 2015.01.12 |
|---|---|
| [HTML강좌] 헤드 메타태그 종합 name, content ... (0) | 2015.01.08 |
| [HTML강좌] DOCTYPE 이란? (2) | 2015.01.04 |
| [HTML 강좌] <head> -> <title> (헤드-> 타이틀) (0) | 2015.01.02 |
| [HTML 강좌] HTML의 구조 html, head, body (0) | 2014.12.30 |