반응형
HTML에서 <, >, &, 공백과 같은 문자는 브라우저에서 특별한 의미를 가지기 때문에, 이를 문자 그대로 출력하려면 HTML 엔터티(Entity) 형식으로 변환해야 합니다. 이 글에서는 HTML에서 사용하는 모든 주요 특수 문자와 그 사용처를 정리하고, 표 형태로 설명 + 사용 예제 코드도 함께 제공합니다.
✅ HTML 특수 문자란?
HTML에서 문법 요소와 겹치는 기호나 특수한 의미를 가진 문자를 표현할 때 사용하는 코드입니다. 보통 &문자이름; 또는 &#코드; 형태로 사용됩니다.
📋 특수 문자 종류 및 설명
| 표현 문자 | 숫자 표현 | 문자 표현 | 설명 | 사용 예시 및 상황 |
| |   | Non-breaking space | 줄바꿈이나 공백 제거를 방지하는 빈칸 | 문단 정렬, 강제 공백 등 |
| < | < | < | less than: HTML 태그 열기 기호 | 코드 출력 시 <div> 표시 |
| > | > | > | greater than: HTML 태그 닫기 기호 | if (a > b) 출력 시 |
| & | & | & | ampersand: AND 기호 | URL 파라미터 a=1&b=2 |
| " | " | " | 큰 따옴표 | 속성 값 표시에 사용 title="내용" |
| ' | ' | ' | 작은 따옴표 (HTML5부터 지원) | value='홍길동' 표시 |
| © | © | © | 저작권 표시 | 페이지 하단 © 2024 |
| ® | ® | ® | 등록 상표 표시 | 상표 표기 제품명® |
| ™ | ™ | ™ | 상표권 표시 | 이름™ 처럼 사용 |
| € | € | € | 유로화 통화 기호 | 가격: €99.99 |
| ¥ | ¥ | ¥ | 엔화 기호 | ¥1000 |
| ¢ | ¢ | ¢ | 센트 표시 | 50¢ |
| £ | £ | £ | 파운드 기호 | £20 |
| – | – | – | 짧은 대시 (En dash) | 범위: 2020–2024 |
| — | — | — | 긴 대시 (Em dash) | 강조 문장 삽입용 |
| … | … | … | 생략 부호 (ellipsis) | 이어지는 문장 계속하려면… |
💻 HTML 사용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 특수문자 예제</title>
</head>
<body>
<p><div> 태그는 블록 요소입니다.</p>
<p>가격: ¥1000, €20</p>
<p>© 2024 나의 웹사이트</p>
<p>조건문: if (a > b)</p>
<p>공백 표시: 한칸 두칸</p>
</body>
</html>📝 마무리
HTML 특수문자는 웹페이지에서 정확한 정보를 전달하고, 구조적 오류를 방지하는 데 필수입니다. 특히 코드를 출력하거나 소셜 콘텐츠, 저작권, 통화 등 특수 기호가 필요한 콘텐츠를 구성할 때 표준 HTML 엔터티를 적절히 사용하는 습관이 중요합니다.
반응형
'Programing > HTML' 카테고리의 다른 글
| HTML <input> 시간 관련 타입 완전 정복: time, month, week, date, datetime-local (2) | 2025.04.26 |
|---|---|
| 🌐 메타 태그(meta tag) 종류와 사용법 정리 (0) | 2025.04.18 |
| HTML5 Video - DOM 속성 및 이벤트. (0) | 2012.01.26 |
| HTML5 mobile meta 태그 (0) | 2011.01.11 |
| table border (0) | 2010.04.07 |
| html target 옵션 (0) | 2009.12.29 |
| 페이지 로딩중(로딩바) 표시 (0) | 2009.11.26 |
| 메모 (0) | 2009.06.01 |