0031 약어(character entity)로 특수문자 표시하기
HTML에서 예약된 문자(reserved characters)들은 어떤 기능을 하도록 되어 있기 때문에 해당 문자를 그래도 사용하면 브라우저는 이를 읽어서 엉뚱한 행동을 할 수 있다.
가령, 다음과 같은 내용을 보자 <p>요소 안에 <html>이라는 문구를 넣고 싶다. 이때, <html>이라는 문구는 말 그대로 글자 그대로 화면에 보이길 바라면서 쓴 문구다. 하지만 실제로는 해당 문구는 브라우저 화면에 표시되지 않는다.
<p>루트 요소인 <html>요소를 누락하는 실수를 저질러선 안된다.</p>
그러면 아래와 같이 <html>이라고 작성된 단어만 사라진다.
위의 경우에는 브라우저가 꺽쇠(< >)와 html이라는 단어의 조합을 문자가 아닌 태그라고 판단한 것이다.
브라우저는 오류가 있더라도 최대한 되는 방향으로 해석하기 때문에 HTML 태그가 정확하지 않아도 표시가 된다. 이 경우에는 그냥 <html>이라고 쓴 부분이 표시되지 않고 끝났지만 복잡한 웹 페이지가 될 수록 어떤 문제가 발생할지 알 수 없다. 특히, 브라우저는 그냥 텍스트도 표현되기 때문에 제대로 HTML 태그가 반영된 것인지 알 수 없는 경우가 많아 문제가 발생하더라도 오류가 어디서 생긴 것인지 알기 어려운 경우가 많으므로 항상 기본을 지켜 작성하도록 해야 한다.
이렇게 예약된 문자들을 오류 없이 안전하게 사용하려면 약어(character entity)를 사용해야 한다. 또한, 이 약어를 사용하면 키보드에 없는 다양한 특수 문자들도 사용할 수 있어 알아두면 매우 유용하다.
약어는 약어명(entity name)이나 약어값(entity number)으로 다음과 같은 형식으로 구성되어 있다.
&entity_name;
or
&#entity_number;
이제 자주 사용되는 필수적인 몇 가지 약어명만 익혀보고 나머지는 필요할 때마다 찾아보는 것이 좋을 것 같다.
< : 약어명(< less than)
> : 약어명(> greater than)
& : 약어명(& ampersand)
" : 약어명(" double quotation mark)
' : 약어명(' apostrophe)
약어명은 보통 해당 기호의 영문명을 축약해놓은 버전이라 기억하기 쉽지만 해당 약어명을 지원하지 않는 브라우저가 종종 있을 수 있다. 반면, 약어값은 기억하기 어렵지만 거의 대부분의 브라우저가 약어값을 지원한다.
마지막으로 약어명은 대소문자를 구분한다는 점을 유념하자.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0031 약어(character entity)로 특수문자 표시하기.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0033 HTML에 CSS 적용하고 기본 문법 알아보기 (0) | 2018.12.06 |
|---|---|
| 0032 CSS 소개 (0) | 2018.12.04 |
| 0030 HTML 주석(comment) 달기 (0) | 2018.12.02 |
| 0029 정의 목록(description list) 요소 다루기 (0) | 2018.12.01 |
| 0028 HTML 순서가 있는(ordered) 목록의 글머리 기호 바꾸기 (0) | 2018.11.30 |