몇몇 특정 문자열은 HTML 코드 내에 사용 시 예약어(Reserved Characters)로 지정되어 있다.
예를 들어 “<” 나 “>“는 브라우저가 태그로 해석(parse)하여 정상적으로 출력 되지 않는다.
<a href="#"><go to top</a>
<!-- 아래의 경우 출력은 제대로 되나, 마크업 검증에서 오류로 뜬다 -->
<a href="#"><위로가기</a>
이러한 HTML 마크업 태그와의 충돌을 방지하고 텍스트 그 자체로 사용하기 위해서 별도로 만든
규칙 문자셋(CharacterSet)을 HTML 엔티티라고 한다.
HTML Entities(개체)는 “&“(앰퍼샌드)로 시작해 “;“(세미콜론)으로 마무리하는 형태를 가진 문자열(String)로서,
주로 예약어(reserved characters)와 공백(invisible character/non-breaking space) 또는 표준 키보드에서 입력하기
어려운 문자셋을 대체하기 위해 사용된다.
엔티티는 “&엔티티이름;” 또는 “&엔티티숫자;” 두가지 형태로 입력이 가능하다.
| Character | Entity | Entity Number | Unicode | Browser Interprets | Entity stands for |
|---|---|---|---|---|---|
| |   | U+000A0 | 공백 | & + non-breaking space + ; | |
| & | & | & | U+00026 | 엔티티의 또는 문자셋의 시작 | & + Ampersand(앰퍼샌드) + ; |
| < | < | < | U+0003C | 태그 시작 | & + less than + ; |
| > | > | > | U+0003E | 태그 끝 | & + greater than + ; |
| “ | " | " | U+00022 | 속성 값의 시작 또는 끝 | & + quotation + ; |
이 외에도 공통적으로 자주쓰이는 문자셋도 대체 입력이 가능한데,
자주 쓰이는 대표적인 문자셋에는 심볼, 국제 통화, 그리스 문자, 수학 용어 등이 있다.
| Character | Entity | Entity Number | Unicode | Entity stands for |
|---|---|---|---|---|
| · | · | · | U+000B7 | & + middle dot + ; |
| © | © | © | U+000A9 | & + copyright + ; |
| ® | ® | ® | U+000AE | & + registered trade mark + ; |
| ™ | ™ | ™ | U+02122 | & + trade mark + ; |
| @ | @ | @ | U+00040 | & + (commonly) at + ; |
| $ | $ | $ | U+00024 | & + dollar + ; |
| £ | £ | £ | U+000A3 | & + pound + ; |
| € | € | € | U+020AC | & + euro + ; |
| ¥ | ¥ | ¥ | U+000A5 | & + yen + ; |
| ₩ | – | ₩ | U+020A9 | – |
각 엔티티가 가지고 있는 유니코드(unicode) 값을 이용하여 CSS pseudo class ::before 와 ::after를 이용하여 엔티티를 활용 할 수 있다.
유니코드에서 U+0 앞의 3자리 코드만 제외한 코드를 “\(백슬래시)+고유 유니코드“의 형태의 값으로
content 값으로 치환해주면 엔티티를 사용 할 수 있다.
그 이외의 사용 가능한 엔티티 reference는 아래의 링크에서 확인 가능.
Resources
- https://www.toptal.com/designers/htmlarrows/symbols/
- https://www.w3.org/TR/2011/WD-html5-20110525/named-character-references.html
- https://html.spec.whatwg.org/multipage/named-characters.html
Leave a Reply