[HTML] 특수문자 아직도 헷갈린다고??

 

"<"가 화면에 보이질 않는다고요?
"&"를 쓰면 이상한 기호로 바뀐다고요?

HTML 특수문자, 그거 무시하다가
진짜 필요한 순간에 손 놓게 됩니다.

기호 하나 제대로 출력 못 하는 사이트,
생각보다 많습니다.

오늘은 조용히 숨어 있지만
웹을 지탱하는 작고 중요한 조각들.
HTML 특수문자 이야기입니다.

오늘 배울 건
HTML 특수문자 (Entities)입니다.

 

<p>1 < 2 && 3 > 2</p>

 

 

위 코드는 HTML에서 흔히 쓰이는 기호 문제를 잘 보여줍니다.

<는 less than(<), >는 greater than(>)을 뜻하고, &는 앰퍼샌드(&) 자체를 표시할 때 사용합니다.

그냥 < 같은 기호를 그대로 쓰면 브라우저가 태그로 착각해 에러가 나기 때문에 꼭 이스케이프 문자를 써야 해요.

728x90

<p>저작권 기호: &copy; 2025 All rights reserved.</p>

 

이건 저작권 표시입니다.

©는 ©로 출력되며, 상업 사이트나 블로그 푸터에 자주 사용돼요.

비슷하게 ®는 ® (등록상표), ™는 ™ (상표)와 같이 쓰입니다.
의미를 명확하게 표현할 때 중요한 역할을 해요.

 

 

<p>따옴표: &quot;HTML은 아름답다&quot;</p>
<p>작은따옴표: &apos;태그는 말이야...&apos;</p>

 

인용구나 문자열을 나타낼 때 쓰는 " (")와 ' (')는 태그 안쪽 속성 값에도 유용하게 쓰입니다.

특히 JSON 문자열을 출력할 때나, JS 코드에 HTML을 넣을 때 꼭 필요한 녀석들이죠.
이거 안 써주면 문법 오류 나기 쉽습니다.

 

<p>공백 유지: A&nbsp;&nbsp;B</p>

 

 

 는 non-breaking space로, A B처럼 띄어쓰기를 두 번 이상 넣고 싶을 때 사용됩니다.

HTML에서는 일반 띄어쓰기가 하나 이상이면 무시되기 때문에, 정확한 여백을 표현하려면 꼭 써야 합니다.

디자인 조정할 때 자주 쓰는 특수문자예요.

 

<p>화살표: &larr; &uarr; &rarr; &darr;</p>

이건 방향 화살표 모음입니다.

← ← ↑ ↑ → → ↓ ↓

시각적으로 방향을 안내하거나, 미니 UI 요소(예: 이전/다음 버튼)에 활용하기 좋죠.
아이콘 대신 가볍게 쓰기 좋아요.

 

반응형

 

<p>하트 기호: &hearts;</p>

 

♥는 ♥ 기호입니다.

예전 블로그 시절부터 지금까지 포인트 요소로 꾸미기에 자주 쓰이죠.
단, 너무 남발하면 오글거릴 수 있으니 절제 필수입니다. 😉

 

💡 특수문자 찾기 힘들다면?

그럴 땐 W3 특수문자 리스트같은 사이트를 참고하세요.
복붙만으로 바로 적용 가능한 코드들이 모여있어 편리합니다.

마무리하며 🍀

HTML에서 특수문자는 작은 존재지만,
그 작은 디테일 하나가 코드의 완성도를 결정합니다.

브라우저가 읽을 수 있게, 사용자가 오해 없이 이해할 수 있게 만드는 것.

그 시작이 바로 엔티티 사용이에요.

기호 하나에도 신경 쓰는 당신이라면, 이미 좋은 HTML 개발자입니다.

👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com

배웠다 말았다 다시 시작했다😎