HTML 이스케이프
HTML 특수문자를 엔티티로 바꾸거나 되돌려요. 블로그 코드 붙여넣기용.
이럴 때 쓰세요
이렇게 사용하세요
결과가 예상과 다를 때
결과가 잘려 보여요
전체 결과는 복사 버튼으로 받을 수 있어요.
입력한 내용이 사라졌어요
이 기기에 자동 저장돼요. 브라우저 저장소를 지우면 함께 사라져요.
자주 하는 실수
- 이미 변환된 문자열에 두 번 적용하면 이중 변환이 됩니다. <가 <로 바뀌어 화면에 기호가 그대로 드러납니다. 화면에서 본 값을 다시 입력란에 붙여 넣는 습관을 피하세요.
- 작은따옴표를 '로 바꾸면 낡은 문서에서 깨집니다. 이 이름은 HTML5에서 추가됐기 때문에 예전 문서와 일부 뷰어는 인식하지 못합니다. '처럼 숫자 참조로 바꾸면 어디서나 안전하게 표시됩니다.
- URL과 스크립트 맥락에서는 다섯 문자만으로는 부족합니다. 속성값 안에 넣을 때는 큰따옴표로 감싸고, 링크 주소에는 javascript: 같은 스킴까지 따로 막아야 합니다. 이스케이프는 문자를 감추는 일이지 안전 검사를 대신하지 않습니다.
- 역변환은 언제나 &를 마지막에 풀어야 합니다. 먼저 풀면 <가 <가 되어 두 번 복원된 셈이 됩니다. ©처럼 원래부터 엔티티였던 문자열까지 되돌리면 값이 깨지니 형식을 모르면 건드리지 마세요.
계산 근거
HTML Living Standard는 &, <, >, ", '를 이름 기반 문자 참조로 정의합니다. &로 시작해 세미콜론으로 끝나며, 문서 안에서 실제 기호 대신 이 표기를 씁니다. 이는 URL의 퍼센트 인코딩과 별개의 체계입니다.
실제로 계산해 보면
div 태그가 있는 코드를 변환하면 어떤 형태인가요?
<div class="...">처럼 꺾쇠와 따옴표가 모두 참조로 바뀝니다. 작은따옴표까지 '가 되므로 붙여 넣은 코드가 태그로 해석되지 않고 문자 그대로 화면에 보입니다.
원래대로 되돌리는 순서가 중요한 이유는?
역변환은 '를 "를 >를 <를 차례로 바꾼 뒤 마지막에 &를 바꿉니다. 순서가 바뀌면 <가 먼저 풀려 <가 남아, 쓴 글자와 실제 꺾쇠가 구분되지 않게 됩니다.
화면에 태그를 그대로 보여 주고 싶다면요?
텍스트로는 언제나 값이 표시되지만 줄바꿈과 공백이 무너집니다. 줄바꿈을 유지하려면 코드 블록으로 감싸야 합니다. 화면 용도라면 값만 확인하고, 그대로 보여 줄 목적이라면 코드 블록이 안전합니다.
더 궁금한 것
URL에 들어가는 한글은 따로 인코딩해야 하나요?
예. 검색은 퍼센트 인코딩으로 %EA%B2%80%EC%83%89가 되지만 문서 이스케이프로는 그대로 남습니다. 질의 문자열은 &를 구분자로 쓰기 때문에 값에는 퍼센트 인코딩이 필요합니다.
제출 폼 값에 적용하면 막힌 주입이 정리되나요?
텍스트 입력과 속성값을 변환하면 태그 주입은 막힙니다. 다만 링크 속성에 넣을 때 javascript: 스킴은 이 변환으로 막히지 않습니다. 속성값에는 별도의 검증과 안전한 스킴 허용 목록을 함께 둬야 합니다.
엑셀 값을 붙여 넣으면 왜 글자가 사라지나요?
값에 들어 있는 &가 엔티티 시작으로 읽히면 뒤 글자가 통째로 없어진 것처럼 보입니다. 붙여 넣은 값을 한 번 변환해 &로 바꾸면 값이 보존됩니다. 반대로 이미 변환된 값을 다시 넣으면 이중 변환으로 화면에 <가 그대로 노출됩니다.
알아둘 경계값
- 숫자 참조와 16진 참조는 해제 대상이 아니라 그대로 남아요. 해제 전에 문서의 참조 형식을 먼저 확인하세요.
- 일반 엔티티도 다섯 종류가 아니라 해제되지 않고 남아요. 그대로 둘지 직접 바꿀지 정하세요.
- 변환과 해제 버튼이 같은 출력칸을 공유해 연속 실행하면 이전 결과가 지워져요. 다음 단계 전에 중간 결과를 복사해 두세요.
- 변환 결과는 원본보다 길어져 저장처 글자 수 제한을 넘길 수 있어요. 저장 전에 결과 길이를 재세요.
- 세미콜론이 빠진 엔티티는 브라우저마다 다르게 보여 변환기로 고칠 수 없어요. 원문에서 세미콜론까지 완결된 형태인지 확인하세요.
- 출력칸에 복사 버튼이 없어 드래그로 옮겨야 하며 세미콜론이 빠지기 쉬워요. 끝의 세미콜론까지 포함됐는지 확인하세요.
결과를 믿기 전 확인 목록
- 태그 샘플로 변환한 뒤 화면에 문자로 보이는지 확인하세요.
- 숫자 참조나 16진 참조 입력이 해제되지 않고 남는지 확인하세요.
- 일반 엔티티 입력이 그대로 남는지 확인하세요.
- 결과 길이가 저장처 제한을 넘지 않는지 재세요.
- 복사 범위에 끝 세미콜론이 모두 포함됐는지 확인하세요.
- 이중 변환 흔적이 남아 있지 않은지 출력에서 검색하세요.
- 변환 전 원본을 별도 파일에 보관하고 나서 실행하세요.
- 세미콜론 빠진 형태가 원문에 없는지 검색하세요.
- 게시판 미리보기에서 실제 렌더 결과를 눈으로 확인하세요.
자주 묻는 질문
언제 쓰나요?
코드를 블로그·게시판에 그대로 보여줄 때 씁니다.
줄바꿈도 변환되나요?
아니요. <, >, &, 따옴표만 변환해요. 줄바꿈은 그대로 유지돼요.