HTML meta 태그의 charset 속성이란?
<meta> 요소의 charset 속성은 HTML 문서가 어떤 문자 인코딩(character encoding) 방식으로 작성되었는지 브라우저에 알려주는 역할을 합니다. 이 속성은 <meta> 태그뿐만 아니라 외부 스크립트를 불러올 때 사용하는 <script> 태그에도 적용할 수 있습니다.
문자 인코딩을 올바르게 지정하지 않으면 한글 등 특수 문자가 깨져 보이는 현상(모지바케)이 발생할 수 있으므로, 모든 HTML 문서의 <head> 영역에 반드시 선언하는 것이 좋습니다.
주요 문자 인코딩 종류
- UTF-8 – 전 세계 거의 모든 문자를 지원하는 유니코드 기반 인코딩으로, 현재 웹 표준으로 가장 널리 사용됩니다.
- ISO-8859-1 – 256개의 서로 다른 문자 코드를 지원하며, 주로 서유럽 언어에 사용됩니다.
- ASCII – 128개의 영숫자(alphanumeric) 문자를 정의한 가장 기본적인 인코딩 방식입니다.
- ANSI – Windows 환경에서 사용되는 확장 ASCII 계열 인코딩입니다.
charset 속성 사용 예제
다음은 <meta> 요소의 charset 속성을 실제로 구현한 예제입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>데모 제목</h1> <p>데모 텍스트입니다.</p> <p>HTML meta 요소의 charset 속성에 대해 학습하고 있습니다.</p> </body> </html>
실행 결과
위 예제를 실행하면 브라우저가 문서를 UTF-8 방식으로 해석하여 한글과 영문이 모두 정상적으로 출력됩니다.
위 예제에서는 <meta> 요소를 사용해 다음과 같이 문자 인코딩을 설정했습니다.
<meta charset="UTF-8">
정리
charset 속성은 HTML5부터 간결하게 <meta charset="UTF-8"> 형태로 선언할 수 있으며, 이전 HTML4에서 사용되던 긴 형식(<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">)보다 권장됩니다. 웹 페이지의 문자가 깨지지 않도록 하려면 문서 최상단의 <head> 내부에 charset 선언을 포함하는 습관을 들이는 것이 중요합니다.