Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 문자 집합(Charset) 완벽 정리: 인코딩 지정 방법과 예제

문자 집합(Character Set)은 웹 문서의 텍스트가 브라우저에서 올바르게 해석되고 표시되도록 만드는 핵심 요소입니다. 대표적인 문자 집합으로는 ASCII, ANSI, ISO-8859-1, UTF-8 등이 있으며, 각각 지원하는 문자의 범위와 용도가 다릅니다.

주요 문자 집합의 종류

  • ASCII: 알파벳 대소문자, 숫자, 기본 특수 기호 등 총 128개의 영숫자 문자를 정의한 가장 오래된 문자 인코딩 방식입니다.
  • ANSI: ASCII를 확장한 형태로, 과거 Windows 환경에서 널리 사용되었습니다.
  • ISO-8859-1(Latin-1): 256개의 서로 다른 문자 코드를 지원하며, 서유럽권 언어를 표현하는 데 적합합니다.
  • UTF-8: 전 세계 거의 모든 언어의 문자를 표현할 수 있는 유니코드 기반 인코딩으로, 현재 웹 표준으로 가장 널리 사용됩니다.

charset 속성이란?

HTML에서 charset 속성은 <meta> 태그와 함께 사용되어 해당 문서의 문자 인코딩 방식을 지정합니다. 이 속성이 제대로 설정되지 않으면 한글 등의 문자가 깨져 보일 수 있으므로 반드시 명시하는 것이 좋습니다.

기본 문법은 다음과 같습니다.

<meta charset="char_set">

여기서 char_set은 HTML 문서에 적용할 문자 인코딩 방식을 의미합니다. 일반적으로 "UTF-8" 값을 사용합니다.

예제

다음은 HTML 문서의 head 영역에서 UTF-8 문자 인코딩을 선언하고, textarea와 버튼을 함께 배치한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>Example</h2>
<p>We have added demo text −</p>
   <textarea rows="4" cols="50">
    Here, we are mentioned the demo content. This is just to display an example of charset in an HTML document.
   </textarea>
   <br>
    <button type="button">Previous</button>
    <button type="button">Next</button>
</body>
</html>

실행 결과

브라우저에서 위 코드를 실행하면 UTF-8 인코딩이 적용된 문서가 정상적으로 출력되며, textarea 안의 데모 텍스트와 Previous, Next 버튼이 화면에 표시됩니다.

HTML 문자 집합(Charset) 완벽 정리: 인코딩 지정 방법과 예제