HTML을 사용하다 보면 < , > , & 같은 특수문자를 입력해야 할 때가 있어요.
하지만 이런 기호들은 HTML 코드에서 특정 기능을 하기 때문에, 직접 입력하면 오류가 발생할 수 있어요.
그래서 HTML 엔티티(Entity) 라는 개념을 사용해야 합니다!
오늘은 HTML에서 특수문자를 안전하게 사용하는 방법을 정리해볼게요.😊
엔티티(Entity)란?
HTML에서 엔티티(Entity)란, 특수문자를 HTML에서 안전하게 표현할 수 있도록 만든 코드입니다.
특수문자를 그대로 입력하면 태그나 코드로 인식될 수 있기 때문에, 이런 문제를 방지하려면 엔티티 코드를 사용해야 해요.
기본 특수 문자 코드
| 특수문자 | 코드 | 표시 |
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
공백과 줄바꿈 코드
HTML에서 여러 개의 공백을 입력해도 자동으로 한 칸만 인식돼요.
공백을 여러개 넣고 싶다면 아래 코드를 사용하면 돼요!
| 코드 | 의미 | 표시 |
| | 공백 (Non-Breaking Space) | |
|   | 반각 공백 (en space) | |
|   | 전각 공백 (em space) |
화폐 및 수학 기호
웹사이트에서 화폐 기호나 수학 기호를 표현할 때도 HTML 엔티티를 사용할 수 있어요.
| 기호 | 코드 | 표시 |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| ¥ | ¥ | ¥ |
| £ | £ | £ |
| ∞ | ∞ | ∞ |
| ± | ± | ± |
| ÷ | ÷ | ÷ |
| × | × | × |
| √ | √ | √ |
카드 및 특수 기호
HTML에는 카드 모양, 화살표 같은 재미있는 기호들도 있어요!
| 기호 | 코드 | 표시 |
| ♠ | ♠ | ♠ |
| ♣ | ♣ | ♣ |
| ♥ | ♥ | ♥ |
| ♦ | &diams | ♦ |
| ← | ← | ← |
| → | → | → |
| ↑ | ↑ | ↑ |
| ↓ | ↓ | ↓ |
엔티티 코드 참고 사이트
문자 엔티티 모음
https://www.freeformatter.com/html-entities.html
Complete list of HTML entities - FreeFormatter.com
ISO 8859-1 Characters Full list of supported ISO-8859-1 characters. Notice that the names are case sensitive, hence if you want an uppercase letter, the name should also start with an uppercase letter. Character Entity Name Entity Number Description Spa
www.freeformatter.com
꾸미기용으로 쓰기 좋은 엔티티 모음
https://html-css-js.com/html/character-codes/icons/
Icons and Symbols - HTML Character Code Picker
Search: ➤Clickto copy Boy Baby Girl Man Woman Old Man Old Woman Alien Monster Man Health Worker Woman Health Worker Man Student Woman Student Man Judge Woman Judge Man Farmer Woman Farmer Man Cook Woman Cook Man Mechanic Woman Mechanic Man Factory W
html-css-js.com
오늘은 HTML에서 특수문자를 안전하게 사용하는 방법을 정리해봤어요!
엔티티 코드만 잘 활용해도 웹 사이트를 훨씬 더 갈끔하게 만들 수 있어요.
추가로 참고하기 좋은 사이트들도 남겨놨으니 잘 사용하셔서 나만의 웹 사이트를 구현하길 바랄게요!