웹 개발/웹 개발 기초

HTML - 특수문자

Blue_bull 2025. 1. 27. 13:34

특수 문자(Special Characters)란?

특수 문자는 일반 텍스트와 구별되는 문자로, HTML에서 특별한 의미를 가지거나 브라우저에 의해 해석됩니다. 따라서 HTML에서 제대로 표시하려면 HTML 엔터티(Entity)를 사용해야 합니다.

주요 HTML 특수 문자와 엔터티

문자 설명 HTML 엔터티 코드
< "Less Than" &lt;
> "Greater Than" &gt;
& "Ampersand" &amp;
" "Double Quote" &quot;
' "Single Quote" (Apostrophe) &apos;
"Non-breaking Space" &nbsp;
© Copyright Symbol &copy;
® Registered Trademark &reg;
¥ Yen Currency &yen;
€ Euro Currency &euro;

특수 문자 <와 브라우저 호환성

  • <가 브라우저에서 표시되지 않을 가능성

    • HTML에서는 <와 >를 태그의 시작과 끝으로 해석합니다.
    • 브라우저 버전이나 렌더링 엔진에 따라 <가 제대로 표시되지 않을 수 있습니다.
    • 이를 방지하기 위해 HTML 엔터티 코드 &lt;와 &gt;를 사용해 안전하게 표현합니다.

  • 예시:

    <p>&lt;div&gt;This is a test&lt;/div&gt;</p>

    출력: <div>This is a test</div>

HTML에서 특수 문자 사용 이유

  1. 브라우저 해석 방지

    • <, >와 같은 특수 문자가 태그로 해석되지 않도록 엔터티를 사용합니다.

  2. 텍스트 안전성

    • 사용자 입력값이나 데이터베이스 값을 표시할 때, 특수 문자를 변환하여 보안 위험(XSS 등)을 방지합니다.

  3. 비표준 문자 표현

    • 키보드로 입력할 수 없는 문자(예: ©, ®)를 표현합니다.

HTML에서 특수 문자 처리 방법

  1. HTML 엔터티 사용

    • <는 &lt;, >는 &gt;로 표시하여 브라우저 호환성을 높입니다.

  2. <code> 또는 <pre> 태그 사용

    • 코드나 포맷된 텍스트는 <code> 또는 <pre> 태그로 감싸 해석되지 않게 합니다.

  3. 자바스크립트로 인코딩

    • 특수 문자를 처리할 때 escape()나 encodeURIComponent()를 사용해 안전성을 확보합니다.

특수 문자와 공백의 활용 예제

<p>&lt;h1&gt;Welcome to My Website!&lt;/h1&gt;</p>
<p>Copyright &copy; 2025 &nbsp; All Rights Reserved.</p>

출력:

<h1>Welcome to My Website!</h1>
© 2025   All Rights Reserved.