[HTML 시작하기] #04 HTML 문서의 특수문자

 

https://youtu.be/77PMoXpLHDk

---

안녕하세요, 토스트 데브입니다!

지난 시간에는 HTML 문서의 기본 구조와 주석 작성 방법에 대해 알아보았죠?
오늘은 HTML 문서를 작성할 때 주의해야 하는 특수문자들에 대해 알아보겠습니다.

---

왜 특수문자에 주의해야 할까?

HTML에서는 일부 문자가 태그나 속성의 구분자로 사용되기 때문에, 콘텐츠로 직접 입력하면 문법 오류를 유발할 수 있습니다.

예를 들어 <, >, " 같은 기호들은 HTML 태그의 시작과 끝, 속성 구분 등으로 사용되므로, 이 기호들을 실제 콘텐츠로 쓰고 싶을 때는 특수문자 코드로 변환해 주어야 합니다.

---

HTML 특수문자 기본 구조

HTML 특수문자는 다음과 같은 형식으로 작성합니다.

&문자코드;

• 시작 : &
• 문자 코드 이름
• 종료 : ;

---

자주 쓰이는 특수문자 코드

기호	코드	설명
<	&lt;	less than (열린 꺾쇠 괄호)
>	&gt;	greater than (닫힌 꺾쇠 괄호)
&	&amp;	ampersand (앰퍼샌드)
"	&quot;	큰따옴표 (double quote)
'	&apos;	작은따옴표 (apostrophe)
	&nbsp;	공백 (non-breaking space)
©	&copy;	저작권 기호
®	&reg;	등록 상표 기호

---

예시로 이해해보자

이렇게 쓰면 위험해요

<p>사용자 입력: <script>alert('hi');</script></p>

스크립트로 인식되어 보안상 위험 발생

이렇게 바꾸면 안전해요

<p>사용자 입력: &lt;script&gt;alert('hi');&lt;/script&gt;</p>

<script>가 그대로 텍스트로 출력됨

---

특수문자 치환 = 보안과 안정성 확보

특히 서버 개발이나 사용자 입력을 처리할 때, 입력값에 <, >, & 같은 문자가 포함되면 XSS(교차 사이트 스크립팅) 같은 보안 문제가 발생할 수 있습니다.

그래서 많은 개발 환경에서는 입력값을 HTML 특수문자로 자동 치환하는 필터링을 사용하기도 해요.

---

정리해볼까요?

• HTML에서는 <, >, ", & 같은 문자는 특수문자 코드로 치환해야 안전합니다.
• 특수문자 코드는 &로 시작해서 ;로 종료합니다.
• 코드의 안정성과 보안을 위해 사용자 입력에 반드시 활용해야 합니다.