반응형
|
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>
▼ “<” 는 < 이며 “>” 는 > 로 변경해 줍니다. 아래 샘플처럼 소스를 변경하게 되면 브라우저에서 볼 수가 있습니다.
<!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=euc-kr"> <title> 특수문자 </title> </head> <body> <p> 태그에 대한 설명<br/> <br> 태그에 대한 설명 </body> </html>
▼ 이렇게 특수 기호를 HTML 에 표시할 때 변경해야 되는 것들이 있습니다. 아래 표를 참고해서 어떤 것들이 있는지 확인하시고 Entities name 으로 변경해 주시면 됩니다.
|
화면 출력 |
설명 |
Entities name |
|
공백 |
스페이스키를 누른 것과 같은 효과 |
|
|
< |
작다를 표현하는 부등호 |
< |
|
> |
크다를 표현하는 부등호 |
> |
|
& |
엠퍼센트(ampersand) |
& |
|
“ |
쌍따움표(quotation mark) |
" |
반응형
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
|---|---|
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
| HTML 텍스트 입력할 때 이용되는 태그들 사용법 (0) | 2018.05.02 |
| HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기 (0) | 2018.03.20 |
| HTML 기본 구조 알아 보기 (0) | 2018.01.30 |
| HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법 (0) | 2015.09.25 |
