HTML Academy · 강의

charset과 유니코드 처리 특수 문자

UTF-8과 HTML 엔터티로 모든 문자를 올바르게 표시하기

charset과 유니코드 처리 특수 문자은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

charset 선언

모든 HTML 문서는 문자 인코딩을 선언해야 합니다. 표준은 UTF-8이며, <head>의 가장 첫 요소로 <meta charset="utf-8">를 지정합니다. 이를 지정하지 않으면 브라우저가 추측하는데, ASCII가 아닌 텍스트에서는 잘못 추측하는 경우가 많습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page</title>

왜 UTF-8인가요?

UTF-8은 모든 유니코드 문자를 인코딩합니다. 모든 문자 체계, 모든 이모지, 모든 기호를 포함합니다. ASCII와 하위 호환되므로(a-z와 0-9는 1바이트로 유지됩니다) 최신 웹에서 가장 널리 사용되는 인코딩입니다. 2024년 기준 페이지의 98% 이상이 UTF-8입니다.

배치가 중요합니다

charset 메타 태그는 문서의 처음 1024바이트 안에 있어야 하며, 일반적으로 <head>의 첫 번째 줄에 배치합니다. 브라우저는 해당 바이트에서 인코딩을 감지하므로 charset을 나중에 선언하면 감지 결과에 영향을 주지 못할 수 있습니다.

파일을 UTF-8로 저장하기

메타 태그는 인코딩을 선언할 뿐이며, 편집기가 실제로 파일을 해당 인코딩으로 저장해야 합니다. 최신 버전의 VS Code, IntelliJ, Sublime은 모두 기본적으로 UTF-8을 사용합니다. Windows-1252 또는 ISO-8859-1로 저장된 파일은 메타 태그가 올바르더라도 모지바케(문자가 깨져 보이는 현상)를 일으킵니다.

HTML 엔티티

특수 HTML 문자(<, >, &, ")는 구문 분석기가 혼동하지 않도록 이스케이프해야 합니다. <에는 <, >에는 >, &에는 &, "에는 "를 사용합니다. 속성 값 내부에서 값을 큰따옴표로 감싸면 "는 반드시 사용해야 합니다.

숫자 문자 참조

유니코드 문자는 무엇이든 코드 포인트로 참조할 수 있습니다. 눈사람(☃)에는 ☃ 또는 ☃를 사용할 수 있습니다. 문자를 직접 입력하기 어려운 경우(희귀한 기호, 제어 문자)에 사용하되, 편집기가 지원한다면 실제 유니코드 문자를 그대로 사용하는 편이 좋습니다.

이모지와 서로게이트 쌍

이모지는 U+FFFF보다 큰 유니코드 문자이며, UTF-16(JavaScript 문자열 내부에서 사용하는 인코딩)에서는 서로게이트 쌍으로 표현됩니다. UTF-8에서는 4바이트 시퀀스로 인코딩됩니다. charset="utf-8"을 설정하면 이모지가 엔티티 없이 원래 형태로 표시됩니다.

일반적인 인코딩 버그

"Don't"가 "Donât"로 표시된다면 파일이 UTF-8로 저장되었지만 Latin-1로 해석되고 있다는 뜻입니다. 파일을 UTF-8로 저장하고 <meta charset="utf-8">가 있는지 확인하여 해결하십시오. 최신 브라우저는 메타 태그가 없고 파일이 UTF-8일 가능성이 높을 때에만 UTF-8을 기본값으로 사용합니다.

HTTP Content-Type 헤더

서버는 응답 헤더를 통해서도 인코딩을 선언할 수 있습니다: Content-Type: text/html; charset=utf-8. 헤더가 메타 태그보다 우선하므로, 서버가 잘못 구성되어 있으면 HTML을 완벽하게 작성했더라도 인코딩 버그가 발생할 수 있습니다.

양식 다루기

양식은 기본적으로 페이지의 인코딩을 사용하여 제출됩니다. UTF-8 페이지는 UTF-8 양식 데이터를 보내며, 서버는 이를 UTF-8로 디코딩해야 합니다. 페이지 인코딩과 서버의 디코딩 방식이 일치하지 않으면 여러 언어를 사용하는 사이트에서 사용자 입력이 깨지는 일반적인 원인이 됩니다.

BOM 피하기

UTF-8 파일은 바이트 순서 표시(BOM, 0xEF 0xBB 0xBF)로 시작할 수 있습니다. 대부분의 브라우저는 이를 허용하지만 일부 도구와 CDN은 허용하지 않으며, 일부 텍스트 편집기에서는 BOM이 눈에 보이는 문자로 나타납니다. 예기치 않은 문제를 피하려면 파일을 "UTF-8 without BOM"으로 저장하십시오.

지식 확인

왜 <meta charset="utf-8">는 HTML 문서의 처음 1024바이트 안에 있어야 합니까?

요약

<head>의 첫 번째 자식으로 <meta charset="utf-8">를 선언하고 파일을 UTF-8로 저장하십시오. UTF-8은 이모지와 모든 문자 체계를 포함한 모든 유니코드 문자를 인코딩합니다. <, >, &, "는 엔티티로 이스케이프하고, 희귀한 문자에는 숫자 참조를 사용하십시오. HTTP Content-Type이 메타 태그를 덮어쓸 수 있고 일부 도구에서 BOM이 눈에 보이는 문자로 나타날 수 있다는 점에 주의하십시오.

자주 묻는 질문

“charset과 유니코드 처리 특수 문자” 강의는 무료인가요?

네 — “charset과 유니코드 처리 특수 문자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“charset과 유니코드 처리 특수 문자”에서 뭘 배우나요?

UTF-8과 HTML 엔터티로 모든 문자를 올바르게 표시하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“charset과 유니코드 처리 특수 문자” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기