Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 특수문자 완벽 가이드: 문자 엔티티(Entity) 활용법

HTML 페이지에 텍스트를 작성하다 보면 키보드로 바로 입력하기 어려운 문자나, HTML에서 특별한 의미를 가진 예약 문자를 사용해야 하는 경우가 있습니다. 이런 문자들을 엔티티(entity)라고 부릅니다. 이 글에서는 코드에서 특수 문자를 활용하는 방법을 살펴보고, 자주 사용되는 엔티티 목록도 함께 정리해 드립니다.

코드 블록을 화면에 그대로 출력하는 방법

기호 사용법을 설명하는 가장 좋은 예는 화면에 그대로 보여 주고 싶은 코드 블록을 만드는 것입니다. 그런데 여기에는 한 가지 문제가 있습니다. 브라우저는 HTML 코드를 화면에 출력하는 대신 실행해 버린다는 점입니다.

<와 >는 HTML에서 예약된(reserved) 문자입니다. 이 문제를 우회하려면 해당 문자를 HTML 엔티티로 바꿔 주면 됩니다. 엔티티는 곧 HTML 문자 코드의 다른 이름이라고 생각하면 됩니다. 아래는 엔티티를 사용해 원본 코드를 화면에 그대로 출력하는 예제입니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <code>
     <!--The <code> blocks don't prevent this HTML from being rendered-->  <p>Famous Baseball Players</p>
     <ul>
       <li>Babe Ruth</li>
       <li>Mickey Mantle</li>
       <li>Nolan Ryan</li>
     </ul>
   </code>
   &ltcode> <br>
     <!--Replace special characters with character references-->
     <!--
         &nbsp; === non-breaking space (4 spaces === tab)
         &lt; === <
         &gt; === >
         &sol; === /
     -->
     &nbsp;&nbsp;&nbsp;&nbsp;&lt;p>Famous Baseball Players<&sol;p> <br>
     &nbsp&nbsp&nbsp&nbsp&ltul> <br>
       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Babe Ruth<&sol;li> <br>
       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Mickey Mantle<&sol;li> <br>
       &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ltli>Nolan Ryan<&sol;li> <br>
     &nbsp&nbsp&nbsp&nbsp<&sol;ul> <br>
   &lt/code>
 </body>
</html>

첫 번째 코드 블록을 감싼 <code> 태그만으로는 HTML이 실행되는 것을 막지 못했습니다. 반면 문자 코드로 작성된 두 번째 <code> 블록은 HTML을 평가하지 않고 원본 코드 그대로 화면에 렌더링했습니다.

문자 엔티티를 사용하는 3가지 방법

HTML에서 문자를 표현하는 방법은 세 가지입니다. 16진수 코드(hex code), 10진수 코드(number code), 그리고 엔티티 코드(문자 이름)입니다. 세 가지 모두 앰퍼샌드(&)로 시작합니다. 몇 가지 예를 통해 살펴보겠습니다.

기호문자 이름10진수 코드16진수 코드설명
<&lt;&#60;&#x3C;보다 작음(Less than)
©&copy;&#169;&#xA9;저작권(Copyright)
&&amp;&#38;&#x26;앰퍼샌드(Ampersand)

이러한 코드들은 HTML4에서 도입된 엔티티들과 대체로 호환됩니다. 실무에서는 시행착오를 거치며 자연스럽게 익히게 되므로, 모든 기호를 외우려고 시간을 낭비할 필요는 없습니다. 어차피 자주 쓰이지 않는 것이 대부분입니다. W3Schools에는 텍스트에서 사용할 수 있는 모든 엔티티를 정리한 훌륭한 참고 문서가 있으니 적극 활용하세요. 해당 문서는 HTML4에서 도입된 기호부터 시작하며, 이어지는 장에서는 그 이후 추가된 최신 기호들을 다룹니다. 기호에 따라 세 가지 표기법을 모두 지원하기도 하고 일부만 지원하기도 하며, 브라우저 호환 여부 역시 기호마다 다르니 주의가 필요합니다.

부트캠프 참가자의 81%가 수강 후 기술 분야 취업 전망에 대한 자신감이 높아졌다고 답했습니다. 지금 바로 나에게 맞는 부트캠프를 찾아보세요.

부트캠프 수료생은 평균적으로 부트캠프 시작부터 첫 직장 취업까지 6개월 이내에 커리어 전환을 마쳤습니다.

핵심을 정리하면 다음과 같습니다. 기호라는 것이 존재한다는 사실을 인지하고, 필요할 때 코드를 검색해 찾아 프로젝트에 적용할 줄 알면 충분합니다. 사실 그것이 전부입니다. 시행착오를 거듭하다 보면 어느새 익숙해져 있을 것입니다!