HTML 엔티티 변환기

HTML 엔티티란?

HTML 엔티티는 웹 문서에서 특수한 의미를 가지는 문자를 안전하게 표현하기 위한 코드입니다. &로 시작하고 세미콜론(;)으로 끝나는 형태이며, 브라우저가 이를 해석하여 원래 문자로 화면에 표시합니다. <, >, & 같은 HTML 예약 문자뿐만 아니라 저작권 기호(©), 화폐 기호(€) 등 키보드로 직접 입력하기 어려운 특수 문자도 엔티티를 통해 사용할 수 있습니다. 웹 개발에서 HTML 엔티티를 올바르게 사용하는 것은 페이지의 정상 렌더링과 보안 양쪽 모두에 중요합니다.

반드시 변환해야 하는 다섯 글자

HTML에서 특별한 의미를 갖는 문자는 사실 몇 개 되지 않습니다. 이것만 기억하면 대부분 해결됩니다.

• < → < · > → > — 태그의 시작과 끝으로 해석되는 것을 막습니다.
• & → & — 가장 먼저 변환해야 합니다. 나중에 하면 앞서 만든 <의 앰퍼샌드까지 바뀌어 <가 됩니다.
• " → " · ' → ' — 속성값을 감싼 따옴표를 닫아버리는 것을 막습니다.

이름 표기와 숫자 표기

엔티티를 적는 방법은 두 가지입니다.  처럼 이름을 쓰는 방식과  처럼 코드 포인트 번호를 쓰는 방식입니다. 십육진수로  이라고 적어도 같습니다.

이름 표기가 읽기 쉽지만 모든 문자에 이름이 있는 것은 아닙니다. 한글이나 이모지처럼 이름이 없는 문자는 숫자 표기를 써야 합니다. 반대로 숫자 표기는 어떤 유니코드 문자든 표현할 수 있어 범용적입니다.

공백 엔티티의 함정

 는 이름 그대로 줄바꿈되지 않는 공백입니다. 일반 공백과 달리 그 위치에서 줄이 나뉘지 않습니다. "10 kg"처럼 숫자와 단위가 떨어지면 안 되는 곳에 쓰면 유용합니다.

문제는 이것을 여백을 만드는 용도로 남용하는 경우입니다. 들여쓰기나 간격을 주려고 여러 개를 연달아 넣으면 화면 크기에 따라 레이아웃이 무너지고, 화면 낭독기가 공백을 읽어버려 접근성도 나빠집니다. 여백은 CSS로 처리하세요.

자주 묻는 질문

한글도 엔티티로 바꿔야 하나요?

필요 없습니다. 문서가 UTF-8로 저장되어 있고 <meta charset="UTF-8">이 선언되어 있으면 한글을 그대로 쓰면 됩니다. 엔티티로 바꾸면 파일만 커지고 읽기 어려워집니다.

엔티티 변환으로 XSS를 막을 수 있나요?

출력 위치에 맞게 썼을 때만 막힙니다. HTML 본문에 넣는 값에는 효과가 있지만, 자바스크립트 코드 안이나 속성값 일부로 들어가는 값은 규칙이 달라 별도 처리가 필요합니다. 이스케이프는 만능 방어가 아니라 문맥에 맞춰야 하는 작업입니다.

세미콜론을 빼먹으면 어떻게 되나요?

브라우저가 관대하게 해석해 주는 경우도 있지만 표준은 아닙니다. 뒤에 오는 글자와 붙어 엉뚱한 엔티티로 읽힐 수 있으니 반드시 붙이세요.

이런 도구도 추천

• 텍스트 이스케이프 - 특수문자 이스케이프 처리
• HTML 압축기 - HTML 코드 압축 및 최적화

더 읽어볼 만한 글

• 화면 녹화 방법