웹 스터디

이스케이핑

토픽 웹 스터디 > HTML

이스케이핑이란?

HTML 코드는 브라우저에 의해서 해석되는 약속된 문자들이다. 예를들어 줄바꿈을 의미하는 <br /> 태그를 줄바꿈의 용도가 아니라 화면에 표시하려면 어떻게 해야 할까? 아래와 같이 하면 어떻게 될까?

<!DOCTYPE html>
<html>
    <body>
        <br />은 줄바꿈을 의미하는 태그입니다. 
    </body>
</html>

<br /> 태그는 줄바꿈으로 해석되기 때문에 화면에 표시되지 않을 것이다. 이럴 때 사용하는 방법이 이스케이핑(escaping)이다. 아래와 같이 하면 된다.

<!DOCTYPE html>
<html>
    <body>
        &lt;br /&gt;은 줄바꿈을 의미하는 태그입니다. 
    </body>
</html>

'&lt;'는 '<'를 의미하고, '&gt;'는 '>'를 화면에 표시한다. 따라서 `&lt;br /&gt;'는 화면에 <br />을 표시하면서 HTML 문법에 맞는 코드가 아니기 때문에 해석되지 않는 것이다.

코드 리스트

주요한 이스케이프 코드는 아래와 같다. (출처 : 위키피디아)

  • &amp; → & (ampersand, U+0026), &nbsp;
  • &lt; → < (less-than sign, U+003C)
  • &gt; → > (greater-than sign, U+003E)
  • &quot; → " (quotation mark, U+0022)
  • &apos; → ' (apostrophe, U+0027)

이스케이핑 도구

아래는 온라인 이스케이핑 도구다. 이 도구를 이용해서 문자를 이스케이핑 할 수 있다. 사용법은 동영상을 참고하자.

댓글

댓글 본문
  1. NAMO
    감사합니다!
  2. JustStudy
    고맙습니다
  3. 꿈꾸는책
    처음에 이스케이핑 보고 저런 복잡한 기호는 왜 쓸까 했는데, 이런 이유였군요. 덕분에 이해가 됐어요. 감사합니다.
  4. 김명수
    진짜 잘봣습니다!
  5. 이상훈
    123
  6. 은비
    이스케이핑 도구에서 맨 마지막에 선택 가능한 Escape special characters (& and non latin chars)
    이 부분은 체크하고 체크 안 할 때 어떤 차이가 있는 건가요?ㅠㅠ
  7. 이승훈
    나타나는 건 간단한데 코드는 복잡한거였군요
  8. park-pro
    이스케이핑이 뭔지 몰랐는데
    쉽게 설명해주셔서 감사합니다
  9. 김다혜
    감사합니다 !!!
  10. 보현
    잘듣고있습니다! 감사합니다~
  11. jerry
    좋은강의 감사합니다.
  12. 얼라이브리복
    들을때마다 귀에 쏙쏙 들어와요 감사합니다
  13. 정윤호
    감사합니다
  14. 어부바
    감사합니다.
  15. YellowBall
    이스케이핑 강좌 잘 들었습니다. 좋은 정보 얻고 갑니다. 2015/4/24
  16. 엔터를 땅치면 요롷케
    감사합니다~
  17. 야곱
    강의 잘 보고있습니다. 온라인 이스케이핑도구에서 ' apostrophe는 그대로 표시되네요. 왜 그럴까요?
  18. choigun
    유니코드 변환표를 내다버려도 되겠네요....짱짱짱!!
  19. Finisher
    너무 이해가 잘 되네요. 감사합니다 ^^
  20. 밝게빛나다
    < , < , & 같은 특수문자를 테그로 인식하지 않고, 있는 그대로 나타내주기 위해 사용하는 거군요! (제가 복습 하기 위해^^;;)
  21. 이경민
    정말 유용한 강의에요. 감사합니다.!!
  22. 박종길
    꺽쇠열기 iframe src="http://opentutorials.org" 꺽쇠닫기 다시꺽쇠열기 /iframe 꺽쇠닫기....
    첨엔 요런 식으로 고잉님의 예제를 html파일로 만들다가..
    바로 전에야 알고는 제대로돤 예제 파일을 만들었는데~~~~~
    이럴수가!
    입이 딱 벌어졌네요.
    하하...
    감사합니다.
    잘 배웠습니다.
  23. 캥캥
    2013.10.10
  24. mimiandchopa
    잘보았습니다!!!
  25. manorgass
    저도 업무중에 몰래몰래 *_*
    대화보기
    • 2seeyu
      ' 3'~회사에서 몰래몰래~ 여기까지 왔어요~ frame은 살짝쿵 뛰어넘구요. ㅎㅎㅎ
    • 최상현
      많이 배우고 갑니다 ^^
    • Park Seong Whan
      좋은 강의 감사합니다
    • 앙칼진츄잉껌
      호옹~ 쉽게 말하면 특수문자 같은 걸 대신 표현해주는 것일랑가여..ㅎㅎ;;여기 코멘트 달 때도 태그를 포함해서 입력하면 안 보여지던데, 이스케이핑을 이용해서 하면 되겠네여~! 감사합니다(__)!