생각 작업실 The atelier of thinking

25. <HTML> 특수문자 - 엔티티코드 본문

웹(Web) 이야기

25. <HTML> 특수문자 - 엔티티코드

knowledge-seeker 2024. 3. 9. 10:10

 

1. 모달의 <HTML>부분

 

앞서 소개했던 JavsScript 예제로 소개한 모달에서 HTML 부문만 따로 떼어내서 보면 아래와 같습니다.

 

2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal

 

24. <JavaScript> 예제 - 모달 Modal

지금까지 HTML, CSS에 이어 JavaScript를 HTML에 연결시키는 방법에 대해 알아봤습니다. 처음 JavaScript를 접했을 때 제일 어려웠던 부분이 변수, 객체, 배열, 반복문, 조건문 등등 생소한 용어들인데다

thinking-atelier.tistory.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<h2>Image Modal</h2>

<p> Modal</p>
<p> 1. HTML에 이미지와 모달창을 만든다.</p>

<img id="myImg" src="images/typewriter.jpg" alt="" 
      style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
   <!-- The Close Button -->
   <span class="close">&times;</span>

   <!-- Modal Content (The Image) -->
   <img class="modal-content" id="img01">
 
   <!-- Modal Caption (Image Text) -->
   <div id="caption">모달이 나타날 부분</div>

</div>


</body>
</html>

모달의 원리는,
<img id="myImg"> 부분을 클릭하면,
<div id="myModal" class="modal"> 부분이 큰 창으로 나타나는 것입니다.
그리고 "X" 를 클릭하면 모달창이 닫히도록 할 것입니다.

코드를 가져올 때 제일 먼저 살펴봐야 할 부분이 HTML 부분입니다. JavaScript나 CSS는 홀로 작동하지 않습니다. 이 둘은 HTML을 동적 움직임을 주거나 꾸미거나 하는 도구이기 때문에 먼저 틀이 되는 HTML 코드가 어떻게 구성되어 있는지 살펴보는 것이 중요합니다.

 

2. <HTML> 특수문자 - 엔티티 코드

 

위 코드에서 "&times;"은 "X"를 나타냈습니다.

HTML에서는 몇몇 특수 문자들이 특별한 표기법으로 사용되기 때문에 특수 문자를 텍스트로 표현하려면 엔티티 코드(entity code)를 사용해야 합니다. 엔티티 코드는 특정 문자를 나타내는 코드로, 이를 사용하면 HTML 문서에서 특수 문자를 표현할 수 있습니다.

컴퓨터가 문서를 읽을 때 예약문자와 문서내용을 구분하지 못해 생기는 문제를 해결하기 위해서 입니다.

예를 들어 문자로 "<"를 입력한다면 컴퓨터는 해당 < 이 HTML 태그의 시작인지, 입력인 지 확인할 수 없습니다.

예를 들어, 가장 일반적인 엔티티 코드는 다음과 같습니다

 &lt : < 기호
 &gt : > 기호
 &amp : & 기호
 &quot : " (큰따옴표)
 &apos : ' (작은따옴표)

 

이를 통해 HTML 문서에서 특수 문자를 텍스트로 나타낼 수 있습니다. 아래는 예시입니다.

 

<p>이것은 &lt; 엔티티 &gt; 예시입니다.&nbsp;&copy;</p>

이것은 < 엔티티 > 예시입니다. ©

 

위의 예제에서는  < ,  > , &, ` ` (공백), © 를 각각 엔티티 코드를 사용하여 나타냈습니다. 브라우저는 이를 해석하여 실제 특수 문자로 표시합니다.

대부분의 경우, 특수 문자를 직접 사용하는 것이 코드를 이해하기 쉽게 만들 수 있습니다. 엔티티 코드는 주로 HTML에서 특수 문자를 나타낼 때나, 특정 상황에서 특수 문자가 제대로 표시되지 않을 때 사용됩니다.

아래는 특수문자 코드를 모아놓은 사이트입니다. 참고하시기 바랍니다.

 

https://www.toptal.com/designers/htmlarrows/

 

HTML Symbols, Entities, Characters and Codes — HTML Arrows

Easily find HTML symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values for HTML arrow, ASCII arrow, and more in grid or table format.

www.toptal.com

 

HTML에서 사용하는 예약 문자(Reserved Characters)는 특수한 용도로 이미 예약되어 있는 문자들을 말합니다. 이러한 문자들은 HTML 문서 구조를 나타내거나 특수한 의미를 갖기 때문에 그냥 텍스트로 사용하면 문제가 발생할 수 있습니다. 따라서 텍스트 내에서 이러한 문자들을 나타내기 위해 엔티티 코드를 사용합니다.

가장 일반적으로 사용되는 HTML의 예약 문자는 다음과 같습니다:

(1) <  (작은 꺽쇠) : HTML 엘리먼트의 시작을 나타내는 태그 기호입니다. 예약 문자로서 텍스트 내에서 직접 사용할 경우, `<`를 나타내기 위해 `&lt`로 사용합니다.

(2)  >  (큰 꺽쇠) : HTML 엘리먼트의 종료를 나타내는 태그 기호입니다. 예약 문자로서 텍스트 내에서 직접 사용할 경우, > 를 나타내기 위해 &gt 로 사용합니다.

(3) & (앰퍼샌드): HTML 엔티티 코드의 시작을 나타내는 문자입니다. 예약 문자로서 텍스트 내에서 직접 사용할 경우, & 를 나타내기 위해 &amp으로 사용합니다.

(4) " (큰 따옴표): 속성값을 감싸는 데 사용되는 따옴표입니다. 예약 문자로서 텍스트 내에서 직접 사용할 경우, " 를 나타내기 위해 &quot으로 사용합니다.

5. ' (작은 따옴표): 속성값을 감싸는 데 사용되는 따옴표입니다. 예약 문자로서 텍스트 내에서 직접 사용할 경우, ' 를 나타내기 위해 &apos; 으로 사용합니다.

이러한 예약 문자들은 텍스트 내에서 그대로 사용하면 HTML 문서의 의미를 해석하는 데 문제가 발생할 수 있기 때문에, 엔티티 코드로 대체하여 사용됩니다.


앞서 모달창을 닫을 때 사용할 "X"를 기호의 의미로 "&times;"를 사용하였습니다.

 

Entity Code
 &lt; : `<` 기호
 &gt; : `>` 기호
 &amp; : `&` 기호
 &quot; : `"` (큰따옴표)
 &apos;: `'` (작은따옴표)
 &times; : 'x' 표시
 &nbsp; : 빈칸
 &copy; : © 표시

'웹(Web) 이야기' 카테고리의 다른 글

27.<JavaScript> 변수(Variable) : 모달 Modal  (0) 2024.03.14
26. <CSS> display 속성 : 모달(Modal)  (0) 2024.03.13
24. <JavaScript> 예제 - 모달 Modal  (0) 2024.03.05
23. <JavaScript> 제어할 태그  (0) 2024.03.04
22. <HTML> Input 태그와 <JavaScript> 이벤트  (1) 2024.03.01
'웹(Web) 이야기' Related Articles more