HTML 이스케이프/언이스케이프, 한 번에 변환하기
웹 페이지에 코드 예제를 그대로 보여주거나, 사용자가 입력한 글을 안전하게 출력하려면 HTML 이스케이프가 필요합니다. 브라우저는 <와 >를 태그의 시작과 끝으로, &를 엔티티의 시작으로 해석하기 때문에, 이 문자들을 그대로 출력하면 의도와 다르게 태그가 실행되거나 레이아웃이 깨질 수 있습니다. 이 도구는 텍스트나 HTML 코드를 붙여넣으면 이런 특수문자를 HTML 엔티티로 바꿔 주는 escape html 변환기이며, 반대 방향인 언이스케이프(엔티티 → 원래 문자)도 지원합니다.
이스케이프란 무엇인가
HTML 이스케이프는 HTML 문법에서 특별한 의미를 가지는 문자를 글자 그대로 표시되도록 '안전한 표기'로 바꾸는 과정입니다. 이 도구는 가장 핵심이 되는 다섯 개 문자를 변환합니다. 앰퍼샌드(&)는 &로, 여는 꺾쇠(<)는 <로, 닫는 꺾쇠(>)는 >로, 큰따옴표(")는 "로, 작은따옴표(')는 '로 바뀝니다. 이때 앰퍼샌드를 가장 먼저 처리하는 순서가 중요합니다. 만약 꺾쇠를 먼저 바꿔 <를 만든 뒤에 앰퍼샌드를 치환하면 이미 만들어진 엔티티의 &까지 다시 바뀌어 &lt;처럼 이중 인코딩되는 오류가 생깁니다. 이 변환기는 항상 앰퍼샌드부터 처리하므로 안심하고 사용할 수 있습니다.
언이스케이프(디코딩)는 언제 쓰나
언이스케이프는 이미 엔티티로 인코딩된 텍스트를 다시 원래 문자로 되돌리는 작업입니다. 예를 들어 데이터베이스나 JSON, 로그에서 <div> 형태로 저장된 값을 사람이 읽기 좋은 <div>로 복원할 때 사용합니다. 이 도구의 언이스케이프 모드는 &, <, >, ", ', ' 같은 명명 엔티티는 물론 <처럼 10진수로 쓴 숫자 엔티티와 <처럼 16진수로 쓴 엔티티까지 모두 인식해 원래 문자로 변환합니다. 변환 결과는 글자 수 정보와 함께 표시되어, 입력과 출력이 얼마나 달라졌는지 한눈에 확인할 수 있습니다.
이 도구 활용법
- 블로그·문서에 코드 스니펫을 넣을 때, 이스케이프해서 태그가 실행되지 않고 그대로 보이게 하세요.
- 사용자 입력을 화면에 출력하기 전에 이스케이프하면 의도치 않은 태그 삽입(XSS) 위험을 줄일 수 있습니다.
- API 응답이나 로그에 남은 엔티티 텍스트는 언이스케이프 모드로 읽기 쉽게 복원하세요.
- 변환된 결과는 '복사하기' 버튼으로 클립보드에 바로 담아 코드 에디터에 붙여넣을 수 있습니다.
참고로 이 도구는 HTML 문서 출력에 필요한 핵심 다섯 문자를 다루는 표준 변환기입니다. 줄바꿈·탭·유니코드 특수기호를 모두 엔티티화하거나, 속성값/자바스크립트 컨텍스트별로 다른 규칙이 필요한 고급 보안 시나리오에서는 전용 라이브러리를 함께 검토하는 것이 좋습니다. 일반적인 코드 표시·텍스트 정리 용도로는 이 변환기로 충분합니다.
자주 묻는 질문 (FAQ)
Q. HTML 이스케이프는 무엇이고 왜 필요한가요?
A. <, >, &, 따옴표 같은 특수문자를 <, >, & 등의 엔티티로 바꾸는 작업입니다. 코드가 태그로 해석되지 않고 글자 그대로 보이게 하며, 사용자 입력 출력 시 XSS 같은 보안 문제도 줄여 줍니다.
Q. HTML 언이스케이프는 어떻게 하나요?
A. '언이스케이프' 모드를 선택하고 엔티티가 포함된 텍스트를 붙여넣으면 됩니다. 명명 엔티티는 물론 <(10진수)·<(16진수) 숫자 엔티티도 원래 문자로 복원합니다.
Q. 어떤 특수문자가 엔티티로 변환되나요?
A. HTML에서 의미가 있는 핵심 5개 문자(& < > " ')를 변환합니다. 한글·영문·숫자·공백은 그대로 유지됩니다.
Q. 이 escape html 도구는 무료인가요? 데이터가 서버로 전송되나요?
A. 무료이며 회원가입이 필요 없습니다. 모든 변환은 브라우저 안에서 순수 자바스크립트로 처리되어 입력한 텍스트가 서버로 전송되지 않습니다.