특수 문자 | Minstudio

특수 문자와 기호 (HTML Entities)

HTML 파일 안에서 스페이스바를 10번 눌러도 화면에는 딱 1칸만 띄어집니다. 컴퓨터가 연속된 공백을 무시하기 때문입니다.
또한, 키보드의 < 와 > 기호를 화면에 출력하려고 썼다가는, 브라우저가 그것을 진짜 HTML 태그로 오해해서 화면이 엉망진창이 됩니다.
이처럼 예약된 문자나 키보드에 없는 특수 기호를 화면에 안전하게 띄우기 위해 사용하는 특별한 암호를 엔티티(Entity)라고 부릅니다.

1. 기호 번역기 (엔티티 규칙)

모든 엔티티 코드는 & 로 시작해서 ; (세미콜론) 으로 끝나는 규칙을 가집니다.

<div> 입력

➡️

(화면 붕괴!) 진짜 태그로 오해함

&lt;div&gt; 입력

➡️

(안전 통과!) 화면에 <div> 출력

2. 자주 쓰이는 필수 엔티티 모음

코드 (암호)	결과 기호	설명
` `	(공백)	일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.
`<` / `>`	< / >	수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.
`&`	&	엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.
`©`	©	웹사이트 맨 밑에 항상 붙는 동그란 저작권 기호(Copyright)를 화면에 출력합니다.

<div class="entity-container">  <div class="card"> <h3>1. 띄어쓰기 제어 (&nbsp;)</h3> <p>HTML에서는 띄어쓰기를 아무리 많이 해도 브라우저는 1칸만 인식합니다.</p> <p class="highlight">강제로    띄우려면 &nbsp; 라는 암호를 씁니다.</p> </div>  <div class="card"> <h3>2. 태그 안전 출력 (&lt; &gt;)</h3> <p>HTML 태그는 <div> 처럼 씁니다. (화면에 <div> 라고 안전하게 출력됨)</p> </div>  <div class="card"> <h3>3. 유용한 특수 기호 모음</h3> <ul class="symbol-list"> <li>카피라이트 심볼: <strong>© 2026 Minstudio</strong></li> <li>앤드 기호: <strong>A & B</strong></li> <li>따옴표: <strong>"안녕하세요"</strong></li> <li>상표권 심볼: <strong>™ / ®</strong></li> <li>화살표: <strong>→ / ←</strong></li> </ul> </div> </div>

코드 (암호)

결과 기호

설명

 

(공백)

일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.

< / >

< / >

수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.

&

엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.

코드 (암호)	결과 기호	설명
` `	(공백)	일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.
`<` / `>`	< / >	수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.
`&`	&	엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.
`©`	©	웹사이트 맨 밑에 항상 붙는 동그란 저작권 기호(Copyright)를 화면에 출력합니다.

코드 (암호)	결과 기호	설명
` `	(공백)	일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.
`<` / `>`	< / >	수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.
`&`	&	엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.
`©`	©	웹사이트 맨 밑에 항상 붙는 동그란 저작권 기호(Copyright)를 화면에 출력합니다.

코드 (암호)	결과 기호	설명
` `	(공백)	일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.
`<` / `>`	< / >	수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.
`&`	&	엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.
`©`	©	웹사이트 맨 밑에 항상 붙는 동그란 저작권 기호(Copyright)를 화면에 출력합니다.

코드 (암호)	결과 기호	설명
` `	(공백)	일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.
`<` / `>`	< / >	수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.
`&`	&	엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.
`©`	©	웹사이트 맨 밑에 항상 붙는 동그란 저작권 기호(Copyright)를 화면에 출력합니다.

코드 (암호)	결과 기호	설명
` `	(공백)	일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.
`<` / `>`	< / >	수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.
`&`	&	엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.
`©`	©	웹사이트 맨 밑에 항상 붙는 동그란 저작권 기호(Copyright)를 화면에 출력합니다.

코드 (암호)	결과 기호	설명
` `	(공백)	일반 띄어쓰기와 달리, 단어 사이가 끊어져서 줄바꿈되지 않게 꽉 잡아주는 특수 공백(Non-breaking Space)입니다.
`<` / `>`	< / >	수학 기호 < (Less than)와 > (Greater than)를 태그로 오해받지 않게 안전하게 그립니다.
`&`	&	엔티티 자체의 시작 기호인 Ampersand를 화면에 출력할 때 씁니다.
`©`	©	웹사이트 맨 밑에 항상 붙는 동그란 저작권 기호(Copyright)를 화면에 출력합니다.