HTML 특수문자 출력, 공백을 적용할 수 있는 코드

HTML

HTML 특수문자 출력, 공백을 적용할 수 있는 코드

 

환경: Eclipse Mars, HTML5

 

HTML 에서는 태그로 인식하는 기호를 웹 브라우저에 표현하는 방법이 있습니다. 대표적인 기호인 “<” 는 부등호로 많이 쓰는데, 변환없이 HTML 에 넣게 되면 태그로 인식합니다. 그래서 의도하지 않은 결과를 나타내게 됩니다. 이런 기호들이 몇 가지 있는데 어떻게 정상적으로 표현할 수 있는지 알아 보겠습니다.

 

 HTML 문서에 태그를 표시해야 되는 경우 샘플처럼 태그명을 그대로 입력하면 텍스트만 나타납니다. 브라우저는 "<", ">" 기호들을 태그로 인식합니다. 만약 HTML 태그를 문서에 표시하고 싶다면 어떻게 해야 할까요? 

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> 특수문자 </title>
</head>
<body>
<p> 태그에 대한 설명<br/>
<br> 태그에 대한 설명
</body>
</html>

 

HTML 특수문자 출력, 공백을 적용할 수 있는 코드

 

“<” &lt; 이며 “>” &gt; 로 변경해 줍니다. 아래 샘플처럼 소스를 변경하게 되면 브라우저에서 볼 수가 있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> 특수문자 </title>
</head>
<body>
<p> 태그에 대한 설명<br/>
<br> 태그에 대한 설명
</body>
</html>

HTML 특수문자 출력, 공백을 적용할 수 있는 코드

 

이렇게 특수 기호를 HTML 에 표시할 때 변경해야 되는 것들이 있습니다. 아래 표를 참고해서 어떤 것들이 있는지 확인하시고 Entities name 으로 변경해 주시면 됩니다.

화면 출력

설명

Entities name

공백

스페이스키를 누른 것과 같은 효과

&nbsp;

< 

작다를 표현하는 부등호

&lt;

> 

크다를 표현하는 부등호

&gt;

&

엠퍼센트(ampersand)

&amp;

쌍따움표(quotation mark)

&quot;


Posted by 녹두장군