특수문자란 무엇인가?
특수문자는 표준 영숫자 집합(A–Z, a–z, 0–9) 밖에 있는 모든 문자입니다. 이 광범위한 카테고리에는 구두점, 수학 기호, 통화 기호, 강세 문자, 화살표, 저작권 및 상표 기호, 그리고 전 세계 문자 시스템의 수천 가지 유니코드 문자가 포함됩니다.
웹 개발에서 특수문자는 HTML 구문과 상호작용할 때 중요해집니다. HTML에서 예약된 의미를 가진 다섯 가지 문자가 있습니다: 작은따옴표보다 작음 기호(<), 보다 큼 기호(>), 앰퍼샌드(&), 큰따옴표("), 작은따옴표('). HTML 콘텐츠에서 이 문자들을 문자 그대로 사용하면 마크업이 깨지거나 크로스 사이트 스크립팅(XSS)과 같은 보안 취약점이 생길 수 있습니다.
HTML 엔티티: 표준 인코딩 방법
HTML 엔티티는 HTML 문서에서 특수문자를 표현하는 공식적으로 정의된 방법입니다. 명명된 엔티티와 숫자 엔티티 두 가지 유형이 있습니다.
명명된 엔티티는 앰퍼샌드와 세미콜론 사이에 기억하기 쉬운 단어를 사용합니다. 가장 중요한 것들은: &(앰퍼샌드 &), <(보다 작음 <), >(보다 큼 >), "(큰따옴표 "), '(작은따옴표 '), ©(저작권 기호 ©), ®(등록 상표 ®), ™(상표 ™), (줄 바꿈 없는 공백), €(유로 기호 €) 등입니다.
숫자 엔티티는 10진수 또는 16진수를 사용합니다. 예를 들어 저작권 기호 ©는 ©(10진수) 또는 ©(16진수)로 쓸 수 있습니다. 모든 유니코드 문자에는 해당하는 숫자 엔티티가 있어, 명명된 엔티티가 없는 경우에도 14만 개 이상의 문자에 접근할 수 있습니다.
엔티티 vs 직접 문자: 언제 무엇을 쓸까?
현대 UTF-8 인코딩을 사용하면 대부분의 특수문자를 HTML 문서에 직접 붙여넣을 수 있습니다. HTML 파일이 UTF-8로 저장되고 <meta charset="UTF-8">을 선언하면 ©, €, 심지어 중국어나 아랍어 텍스트도 이스케이프 없이 모든 현대 브라우저에서 올바르게 렌더링됩니다.
그러나 인코딩에 관계없이 항상 이스케이프해야 하는 문자들이 있습니다. 다섯 가지 예약된 HTML 문자(<, >, &, ", ')는 태그 속성뿐만 아니라 콘텐츠에 나타날 때마다 이스케이프해야 합니다. 보다 작음 기호(<)는 특히 위험합니다. 콘텐츠에서 그대로 사용하면 브라우저가 그 뒤에 오는 모든 것을 HTML 태그로 파싱하려고 시도합니다.
수학 및 과학 기호
웹의 수학 및 과학 글쓰기에는 표준 키보드에 없는 기호가 필요합니다. HTML은 가장 일반적인 것들에 대한 명명된 엔티티를 제공합니다: 그리스 문자(α, β, γ…)를 위한 α부터 ω, 합계(∑)를 위한 ∑, 무한대(∞)를 위한 ∞, 제곱근(√)을 위한 √, 파이(π)를 위한 π, 곱셈(×)을 위한 ×, 나눗셈(÷)을 위한 ÷, 같지 않음(≠)을 위한 ≠ 등입니다.
더 고급 수학 표기법에는 MathML 또는 MathJax, KaTeX 같은 라이브러리가 필요합니다. 그러나 기사에서 인라인 수식이나 간단한 과학 표기법에는 HTML 엔티티가 빠르고 보편적으로 지원됩니다.
타이포그래피와 구두점 기호
전문적인 타이포그래피는 일반 키보드에서 노출되지 않는 문자들에 의존합니다. 곱슬 따옴표(')는 직선 아포스트로피(')와 다르며, 세련된 편집 콘텐츠에서 잘못된 것을 사용하면 아마추어처럼 보일 수 있습니다. 마찬가지로 em 대시(—)와 en 대시(–)는 단순한 하이픈(-)과는 다른 문법적 역할을 합니다.
다른 중요한 타이포그래피 문자로는 왼쪽/오른쪽 큰따옴표(" ")를 위한 “와 ”, 작은따옴표(' ')를 위한 ‘와 ’, em 대시(—)를 위한 —, en 대시(–)를 위한 –, 줄임말(…)을 위한 …, 가운데 점(·)을 위한 ·, 글머리 기호(•)를 위한 • 등이 있습니다.
보안 고려사항: 출력 이스케이프
웹 개발에서 특수문자 지식의 가장 중요한 응용은 보안을 위한 출력 이스케이프입니다. 크로스 사이트 스크립팅(XSS) 공격은 HTML이나 JavaScript를 포함하는 사용자 제공 텍스트가 적절한 이스케이프 없이 페이지에 삽입될 때 발생합니다.
규칙은 간단합니다: 사용자 입력, 데이터베이스, API, 또는 외부 소스에서 유래한 텍스트는 HTML에 삽입되기 전에 HTML 이스케이프 처리가 되어야 합니다. React, Vue, Angular 같은 현대 프레임워크는 템플릿 시스템을 사용할 때 이를 자동으로 처리하지만, 문자열 연결, innerHTML 할당, eval()은 이러한 보호를 완전히 우회합니다.
지금 사용해보세요 — 무료 온라인 특수문자표
UtiliZest의 특수문자표는 수백 개의 HTML 엔티티, 유니코드 기호, 수학 연산자, 타이포그래피 문자에 즉시 접근할 수 있게 해줍니다. 아무 문자나 클릭하면 문자 자체, HTML 엔티티, 유니코드 코드 포인트를 복사할 수 있습니다. 회원가입 없이 브라우저에서 모든 것이 실행됩니다.