HTML 의 특수 코드 정리 < >   & " (HTML 문자 엔티티)

이번 포스팅은 약간은 개인적인 용도로 작성합니다. 한 편 필요하신 분들께 도움도 되었으면 합니다.

 

HTML 코드를 작성하다 보면 꺽쇠(부등호)를 화면에 출력하기 원할 때가 있습니다. (JSP 개발자가 myBatis 나 Freemarker 등을 사용하다가도 겪게 되는 것이죠^^)

 

바로 < > 이것입니다.

그런데 이는 HTML 태그의 시작과 끝을 나타내는 특수 문자(Entity Name)입니다. 그래서 이를 그대로 작성하게 되면 HTML요소로 인식해버려 화면에 출력이 제대로되지 않습니다.

공백 또한 마찬가지입니다. HTML은 길게 연속된 공백 문자를 하나의 공백 문자로 인식합니다.

 

아래와 같이

<span>안녕               하세요</span>

HTML코드를 작성하면

 

안녕 하세요

위와 같이 단 한칸의 공백만 인식되어 출력됩니다. 그러면 어떻게 공백을 길게 넣을 수 있을까요?

 

이러한 특수 코드들을 정리하였습니다.

제가 이 포스팅을 한 이유는 부등호 꺽쇠 기호를 사용하는 경우가 많은데, 매번 외워도 자꾸 헷갈려서입니다. ㅠ.ㅠ

(myBatis 로 쿼리를 작성할 때, 부등호를 많이 쓰는데, 매번 어떤 값이 < 이고, > 이것인지 항상 헷갈 랍니다.^^)

마치 식당에서 문을 열고 들어갈 때, PUSH, PULL 을 보고 갑자기 문을 당겨 열어야 되나, 밀어서 열어야 되나 갑자기 생각나지 않는 것과 같은 것 같습니다. ㅎㅎㅎ

 

아래는 이를 정리한 표입니다. 정리해 두고 필요할 때 참조하시면 좋습니다.^^

 

특수코드 값	실제 표현	뜻 / 용도
&lt;	< (부등호 꺽쇠)	오른쪽으로 열린 부등호.  수식에서 A < B 와 같은 형태로 사용.  HTML 코드에서 모든 태그의 시작 기호.
&gt;	> (부등호 꺽쇠)	왼쪽으로 열린 부등호.  수식에서 A > B 와 같은 형태로 사용.  HTML 코드에서 모든 태그의 끝 기호.
&nbsp;	' ' (공백, Space 한칸)	공백 문자 한칸을 의미.  연속하여 쓰면 여러 공백 문자를 삽입할 수 있음.
&amp;	& (앰퍼샌드)	앰퍼샌드(Ampersand) 라 불리며 & 문자를 뜻함.  AND 라는 의미를 포함하여 javascript나 java 등에서 AND 연산 기호로 사용되기도 함.  & 문자를 화면에 출력하고 싶으면 &amp; 를 사용.
&quot;	" (큰따옴표 하나)	쌍따옴표는 HTML에서 특정 속성 값들을 묶기 위한 용도로 사용되기 때문에 쌍따옴표를 화면에 출력하려면 &quot;를 사용.   (Ex. <a href="javascript:test("hello");return false;">테스트 링크</a> 와 같이 사용 시, href 속성 안에 또다른 따옴표가 존재하므로 문제가 발생. HTML 파싱 시, test(" 의 따옴표가 href=" 시작 따옴표와 쌍을 이룬다고 판단하여 오류 발생.  이럴때 <a href="javascript:test(&quot;hello&quot;);return false;"> 사용. 또는 <a href="javascript:test(\"hello\");return false;">와 같은 형태도 사용 가능함.)

 

 

그리고 위의 HTML 특수 코드를 정확한 용어로는 HTML Character Entity(HTML 문자 단위(엔티티)) 라고 합니다.