본문으로 건너뛰기
LifeTools

HTML 특수문자 변환기

꺾쇠나 따옴표처럼 HTML에서 뜻이 있는 글자를 안전한 표기로 바꾸거나 되돌립니다. 코드를 글 속에 그대로 보여줄 때 씁니다.

코드나 태그가 든 글을 붙여넣으세요.

글을 넣으면 결과가 나옵니다.

광고

광고 자리

이렇게 계산돼요

HTML에서 꺾쇠 괄호는 태그의 시작과 끝을 뜻합니다. 그래서 코드를 글 속에 그대로 적으면 브라우저가 그것을 태그로 읽어 화면에서 사라지거나 글이 깨집니다. 이스케이프는 이런 글자를 뜻이 없는 표기로 바꿔 두는 일입니다. 꺾쇠는 <와 >, 따옴표는 "와 ', 앰퍼샌드는 &로 바꿉니다. 순서가 중요합니다. 앰퍼샌드를 가장 먼저 바꿔야 합니다. 나중에 바꾸면 앞서 만들어 둔 표기의 앰퍼샌드까지 다시 바뀌어 두 번 변환된 값이 나옵니다. 화면에 < 대신 <가 그대로 보이는 증상이 이것이고, 직접 만든 변환 코드에서 가장 흔히 나오는 실수입니다. 되돌릴 때는 반대로 앰퍼샌드를 가장 마지막에 풉니다. 몇 글자가 바뀌었는지도 함께 보여줍니다. 바뀐 글자가 없다면 그 글은 원래 그대로 넣어도 되는 내용입니다. 게시판이나 블로그에 코드를 붙였는데 일부가 사라졌다면 대개 꺾쇠가 태그로 읽힌 경우이므로, 여기서 변환한 뒤 붙이시면 그대로 보입니다.

자주 묻는 질문

꺾쇠 괄호가 태그로 읽혀서 그렇습니다. 예를 들어 div 태그를 적으면 브라우저가 그것을 실제 태그로 해석해 화면에서 지워 버립니다. 이 도구로 변환한 뒤 붙이면 글자 그대로 보입니다. 편집기에 코드 블록 기능이 있다면 그쪽을 쓰는 편이 더 간단합니다.

이미 변환된 글을 한 번 더 변환한 경우입니다. 앰퍼샌드가 다시 바뀌면서 두 겹이 됩니다. 되돌리기로 한 번 풀고 나서 다시 변환하시면 정상으로 돌아옵니다. 원본이 어느 상태인지 헷갈릴 때는 되돌리기를 먼저 해 보시면 알 수 있습니다.

막히지 않습니다. 이 도구는 글자를 바꿔 보여주기 위한 것이지 보안 대책이 아닙니다. 사용자가 입력한 값을 화면에 그리는 프로그램이라면 서버나 프레임워크가 제공하는 처리를 쓰셔야 하고, 붙여넣을 위치가 태그 안인지 스크립트 안인지에 따라 필요한 처리가 달라집니다.

HTML은 이어진 공백을 하나로 줄여 그립니다. 들여쓰기를 그대로 살리려면 공백 유지를 켜세요. 이어진 공백을 줄어들지 않는 표기로 바꿔 줍니다. 다만 코드를 보여줄 목적이라면 코드 블록을 쓰는 편이 정렬이 더 잘 유지됩니다.

광고

광고 자리

이 변환은 글을 화면에 그대로 보여주기 위한 것이며 보안 처리가 아닙니다. 사용자 입력을 페이지에 넣는 프로그램에서는 넣는 위치에 맞는 처리를 프레임워크 기능으로 하시기 바랍니다.