1. 엔터티코드란?
엔터티코드는 HTML과 XML 문서에서 특수 문자를 표현하기 위한 문자열 코드입니다.
특정 기호나 문자는 HTML 태그로 인식되거나 제대로 표시되지 않을 수 있기 때문에, 이를 안전하게 표시하려면 엔터티코드가 필요합니다.
예시:
- <는 태그의 시작을 의미하지만, 텍스트로 출력하려면 <로 작성합니다.
- 동일하게 >는 >, &는 &로 작성해야 합니다.
2. 엔터티코드 종류 (최대한 많은 코드 소개)
2.1 기본 특수 문자 코드
문자 엔터티코드 설명
| < | < | Less Than (작다) |
| > | > | Greater Than (크다) |
| & | & | Ampersand |
| " | " | Double Quote |
| ' | ' | Apostrophe (작은따옴표) |
2.2 수학 기호
문자 엔터티코드 설명
| + | + | Plus (더하기) |
| - | − | Minus (빼기) |
| × | × | Multiplication (곱하기) |
| ÷ | ÷ | Division (나누기) |
| = | = | Equal Sign |
| ≠ | ≠ | Not Equal |
| ≈ | ≈ | Approximately Equal |
2.3 통화 기호
문자 엔터티코드 설명
| $ | $ | Dollar (달러) |
| € | € | Euro (유로) |
| £ | £ | Pound (파운드) |
| ¥ | ¥ | Yen (엔화) |
| ₹ | ₹ | Indian Rupee |
| ₩ | ₩ | Korean Won |
2.4 기호 및 기호문자
문자 엔터티코드 설명
| © | © | Copyright |
| ® | ® | Registered Trademark |
| ™ | ™ | Trademark |
| ° | ° | Degree (도) |
| µ | µ | Micro Sign |
| • | • | Bullet Point |
| … | … | Ellipsis |
| ± | ± | Plus-Minus (±) |
| ∞ | ∞ | Infinity (무한대) |
2.5 화살표 및 기호
문자 엔터티코드 설명
| ← | ← | Left Arrow |
| → | → | Right Arrow |
| ↑ | ↑ | Up Arrow |
| ↓ | ↓ | Down Arrow |
| ↔ | ↔ | Left-Right Arrow |
| ↵ | ↵ | Carriage Return Arrow |
| ✔ | ✔ | Check Mark |
| ✖ | ✖ | Cross Mark |
3. 엔터티코드 사용법
3.1 HTML에서 사용하기
HTML 태그 안에 특수 문자를 사용하고 싶을 때, 엔터티코드를 사용하여 안전하게 표시할 수 있습니다.
<p>10 < 20</p>
<!-- 출력: 10 < 20 -->
3.2 문자열 변환기 예제 (JavaScript)
특수 문자를 엔터티코드로 변환하는 간단한 JavaScript 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>엔터티코드 변환기</title>
</head>
<body>
<textarea id="input" placeholder="문자를 입력하세요"></textarea>
<button onclick="convert()">변환</button>
<div id="output"></div>
<script>
function convert() {
const input = document.getElementById('input').value;
const output = input
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
document.getElementById('output').innerText = output;
}
</script>
</body>
</html>
3.3 보안 강화
XSS(크로스사이트 스크립팅) 공격을 방지하기 위해 사용자 입력값을 엔터티코드로 변환하는 것이 중요합니다.
4. 마무리
엔터티코드는 HTML과 XML에서 중요한 역할을 하는 기능입니다. 특히 특수 문자를 안전하게 처리하거나 보안을 강화할 때 필수적입니다. 이 글에서 소개한 다양한 코드와 활용법을 참고하여 엔터티코드를 적재적소에 활용해 보세요!
궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.
반응형
'Front End > HTML' 카테고리의 다른 글
| [HTML] a 태그(tag) 속성 (href, target, title 등) (0) | 2024.01.25 |
|---|---|
| [HTML] 뷰포트(viewport) 사용법 (반응형) (0) | 2024.01.12 |
| [HTML] @import vs link tag (장단점 및 사용법) (0) | 2024.01.12 |
| [HTML] input [type="file"] 속성(property) 정리 (0) | 2023.06.14 |