HTML 특수문자 이스케이프 변환 원리와 방법
HTML 특수문자 이스케이프는 <, >, &, ", ' 다섯 글자를 <, & 같은 문자 엔티티 코드로 바꾸는 작업입니다. 브라우저가 이 글자를 태그나 속성 구분자로 잘못 해석하지 않고, 화면에 보이는 그대로의 텍스트로 표시하게 만들기 위해서입니다.
블로그에 HTML 코드 예시를 그대로 보여주려는 사람, 반대로 이미 이스케이프된 코드를 원래 문자로 되돌려야 하는 사람 모두의 문제를 다룹니다.
요약 ①
&<>"'다섯 글자는 HTML 파서가 태그·속성 구분 기호로 읽어 충돌이 나는 문자입니다. ② 이스케이프는 이 다섯 글자를 각각&<>"'코드로 1:1 치환합니다. ③ 언이스케이프는 그 반대로 코드를 원래 문자로 되돌리며, 코드 형태가 남아 있지 않은지로 결과를 검증합니다.
코드 예시를 올리면 태그가 사라지거나 깨지는 이유
블로그 글이나 게시판에 <div class="box">처럼 HTML 코드를 그대로 붙여넣으면, 화면에는 그 글자가 보이지 않고 빈 상자만 남거나 레이아웃이 깨지는 경우가 있습니다.
원인은 브라우저나 에디터가 붙여넣은 텍스트를 코드 예시가 아니라 실제 HTML 마크업으로 읽어버리기 때문입니다. <div>라고 쓰면 파서는 "여기서부터 div 요소가 시작된다"고 해석하지, "이건 div라는 네 글자다"라고 받아들이지 않습니다.
같은 문제가 반대 방향으로도 생깁니다. 어딘가에서 복사해온 텍스트가 <div>처럼 이미 이스케이프된 상태라면, 화면에는 코드가 아니라 <div>라는 글자 그대로가 노출됩니다. 이번에는 원래 태그로 되돌리는 언이스케이프 작업이 필요합니다.
도구 없이 손으로 변환하는 방법: 문자 대응표와 순서
HTML 파서가 특별하게 읽는 글자는 정확히 다섯 개입니다. 각 글자가 문제가 되는 이유와 바뀌는 코드는 다음과 같습니다.
| 원본 문자 | 파서가 읽는 의미 | 이스케이프된 코드 |
|---|---|---|
& (앰퍼샌드) | 문자 참조(엔티티)의 시작 기호 | & |
< (왼쪽 꺾쇠) | 태그의 시작 기호 | < |
> (오른쪽 꺾쇠) | 태그의 닫힘 기호 | > |
" (큰따옴표) | 속성값을 감싸는 구분자 | " |
' (작은따옴표) | 속성값을 감싸는 구분자 | ' |
치환 순서: &부터 바꿔야 하는 이유
이 다섯 개를 손으로 치환할 때는 순서가 중요합니다. &부터 바꿔야 합니다.
만약 <를 먼저 <로 바꾸고 나중에 &를 &로 바꾸면, 방금 만들어진 <의 &까지 다시 치환 대상에 걸려 &lt;라는 이중 치환 결과가 나옵니다. 그래서 표준적인 순서는 & → < → > → " → ' 입니다.
예시로 보는 전체 변환 과정
예를 들어 <div class="box">A & B's</div>를 손으로 바꾼다면, 먼저 &를 전부 &로 바꾸고, 그다음 <와 >를 < >로, 마지막으로 큰따옴표와 작은따옴표를 " '로 바꿉니다.
결과는 <div class="box">A & B's</div>가 됩니다.
언이스케이프와 결과 검증
되돌리는 과정인 언이스케이프는 반대 방향입니다. 엔티티 코드를 원래 문자로 하나씩 바꾸면 됩니다.
결과를 검증하는 방법은 간단합니다. 되돌린 텍스트에 < > & " ' 같은 코드 형태 글자가 하나도 남아 있지 않고, 원래 있던 < > & " ' 글자가 그대로 살아났는지 눈으로 대조하면 됩니다.
직접 한 글자씩 치환하는 대신, 아래 도구에 텍스트를 넣으면 같은 변환이 실시간으로 이루어집니다. 저희 도구로 확인하기.
왼쪽과 오른쪽 입력창 중 아무 곳에나 입력하면 실시간으로 반대쪽에 변환 결과가 표시됩니다. 설치나 로그인 없이 무료로 사용할 수 있습니다.
자주 헷갈리는 지점
이미 이스케이프된 텍스트를 다시 이스케이프하면 코드가 겹쳐집니다. 예를 들어 <div>처럼 이미 변환된 텍스트를 원본 입력창에 넣으면, 그 안의 &가 또 한 번 치환되어 &lt;div&gt;가 됩니다.
지금 넣으려는 텍스트가 원본인지 이미 변환된 코드인지 먼저 확인하는 것이 첫 번째로 볼 지점입니다.
작은따옴표는 두 가지 코드로 나타날 수 있습니다. 이스케이프할 때는 숫자 코드인 '가 만들어집니다. 반대로 되돌릴 때는 ' 뿐 아니라 이름 코드인 '도 함께 작은따옴표로 인식됩니다.
| 구분 | ' | ' |
|---|---|---|
| 이스케이프 결과로 생성됨 | 예 | 아니오 |
| 언이스케이프 시 작은따옴표로 인식됨 | 예 | 예 |
HTML 엔티티와 URL 인코딩은 다른 체계입니다. <를 HTML 엔티티로 바꾸면 <이지만, URL 인코딩으로 바꾸면 %3C입니다. 사용되는 위치(문서 본문 vs URL 문자열)가 다른 별개의 변환 규칙이라 서로 바꿔 쓸 수 없습니다.
정리
&<>"'다섯 글자만 HTML 파서와 충돌해 이스케이프 대상이 됩니다. 그 외 글자는 바뀌지 않습니다.- 각 글자는
&<>"'로 1:1 치환됩니다. - 손으로 치환할 때는
&를 가장 먼저 바꿔야 이중 치환을 피할 수 있습니다. - 되돌린 결과를 검증할 때는 코드 형태 글자가 남아 있지 않은지 확인하면 됩니다.
- 되돌리기는
'뿐 아니라'도 작은따옴표로 인식합니다.
왼쪽과 오른쪽 입력창 중 아무 곳에나 입력하면 실시간으로 반대쪽에 변환 결과가 표시됩니다. 설치나 로그인 없이 무료로 사용할 수 있습니다.
자주 묻는 질문
&를 제일 먼저 바꿔야 하는 이유는 무엇인가요?
<나 " 같은 다른 글자를 먼저 바꾸면, 그 결과로 새로 생긴 < " 안의 &까지 다시 치환 대상에 걸립니다. 그러면 &lt;처럼 코드가 겹쳐진 이중 치환 결과가 나옵니다. &를 가장 먼저 바꾸면 이 문제가 생기지 않습니다.
'와 '는 같은 건가요?
둘 다 작은따옴표(')를 나타내는 코드입니다. 이스케이프를 하면 숫자 코드인 '가 만들어집니다. '는 이름 코드로, 이스케이프 결과로 직접 생성되지는 않지만 되돌리는 과정에서는 '와 마찬가지로 작은따옴표로 인식됩니다.
이스케이프와 URL 인코딩은 같은 방식인가요?
다릅니다. HTML 이스케이프는 <를 <처럼 문자 엔티티 코드로 바꾸고, URL 인코딩은 같은 글자를 %3C처럼 퍼센트 코드로 바꿉니다. 두 체계는 쓰이는 위치가 다르고 변환 규칙도 서로 호환되지 않습니다.
되돌리기를 하면 원본과 완전히 똑같아지나요?
이스케이프될 때 바뀐 다섯 글자(& < > " ')에 대해서는 정확히 원래 글자로 돌아옵니다.
다만 이 변환은 이 다섯 글자와 관련된 엔티티 코드만 다루므로, 원본에 애초부터 다른 종류의 엔티티(예: 공백을 나타내는 코드)가 섞여 있었다면 그 부분은 이 변환의 대상이 아닙니다.