[HTML] HTML - 9. 주석과 엔티티 그리고 문자셋

이번 시간에는 3가지 항목을 배워볼텐데

먼저 내가 짠 코딩에 대한 해석이 필요할 때 사용하는 주석(Comment)

HTML 예약어를 기존에 사용하던 의미 그대로 사용하기

위한 문자셋 엔티티(Entity)

웹 브라우저가 HTML 문서를 정확하게 나타내기 위해

사용되는 문자셋(Character Set)

이 3가지의 항목은 한번 배워보도록 하겠습니다.

1. 주석(Comment)

주석(comment)란 개발자가 직접 작성한 해당 코드에 대해

다른 사용자가 보았을때 직접 해석이 가능할 수 있도록

설명이나 디버깅을 위해 작성하는 구문입니다.

주석은 다른 HTML 코드와는 달리

웹 브라우저 화면상에는 나타나지 않습니다.

HTML에서 주석을 표현하려면 다음과 같습니다.

<!-- html 에서 주석을 사용하는 법  -->
<!-- 단축키 Ctrl + / -->

HTML 주석의 시작 태그(<!--) 에는 느낌표(!)가 있지만

종료 태그에는 ( --> ) 에는 느낌표가 없습니다.

이러한 주석은 HTML 코드 어느 부분에서나

적용이 가능합니다.

또한 여러 줄에 겹쳐서

주석을 작성해도 됩니다.

<!-- 주석은 -->
   <p>하하하

     <!-- 태그 안에서도 가능함 -->
   </p>
<!-- 
   여러줄에 작성해되 되고 줄이 넘어가도 됨 
         
-->

위 예제처럼 HTML 주석은 웹 페이지상에 나타나지 않습니다.

그러나 HTML 코드에 삽입된 주석을 읽고 싶다면

웹 브라우저 상에 페이지 소스 보기( Ctrl + U ) 를 통해

주석 부분을 확인 할 수 있습니다.

2. 엔티티(Entity)

HTML에는 미리 예약된 몇몇 문자가 있는데, 이러한 문자를

HTML 예약어(reserved characters)라고 부릅니다.

이러한 HTML 예약어를 HTML 코드에 사용하면

웹 브라우저 상 평소와 다른 의미로 해석하게 됩니다.

따라서 HTML 예약어를 기존에서 사용한 의미 그대로

사용하기 위해 별도로 만든 문자셋을 바로

엔티티(Entity)라 합니다.

엔티티의 형태는 다음과 같습니다.

&엔티티이름;

or 

&#엔티티숫자;

다음 예제를 통해 HTML 코드 내에

꺽쇠괄호( <> )를 사용해 웹 브라우저가

어떻게 해석하는지 보여줍니다.

<!-- X -->
   <p><p> 태그는 두 번째로 큰 제목을 나타내는 태그</p> 
<!-- O -->
   <p>&lt;p&gt;태그는 단락을 나타내는 태그다</p>

위 예제처럼 HTML 코드에서 사용된

꺽쇠괄호( <> )는 태그의 시작과 끝의 의미로 해석 됩니다.

HTML에서 제공하는 대표적 엔티티(entity)는 다음과 같습니다.

HTML에서 사용할 수 있는 모든 엔티티에 대한

더 자세항 정보는 W3C 공식 사이트에 방문하면 확인 가능합니다.

발음 구별 부호(diacritical marks)

발음을 나타내는 부호를 악센트(accent)라고 합니다.

이러한 악센트는 단독으로는 사용하지 않고, 보통 다른 문자와 함께

사용됩니다.

이것을 정확히 표현하기 위해

HTML은 다음과 같은 발음 구별 부호를 별도 제공하고 있습니다.

<p>O에 악센트가 있다는 발음 기호는 [O&#771;] 입니다 </p>

심볼 (Symbol) 특수문자

HTML 예약어 이외 키보드에 입력할 수 없는 문자를

표현하기 위해서 심볼 특수문자를 사용할 수 있습니다.

이러한 심볼 특수문자에는 수학 용어, 그리스 문자,

국제 통화 등이 있습니다.

HTML에 제공하는 대표적 심볼(Symbol) 특수문자는 다음과 같습니다.

3. 문자셋(Character set)

웹 브라우저가 HTML 문서를 정확히 나타내기 위해

해당 문서가 어떠한 문자셋으로 저장되어 있는지 알아야 합니다.

따라서 HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를

<head>태그 내에 <meta> 태그로 명시합니다.

// html 4 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

// html5 ~
<meta charset="UTF-8">

위 두 예제는 해당 HTML 문서가 UTF-8 문자셋을 사용해 저장되었음을

웹 브라우저에게 명시시켜 줍니다.

문자셋의 종류

현재 사용되는 대표적 문자셋(charater set)은 다음과 같습니다.

ASCII: 가장 처음 만들어진 문자셋
인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어짐
ANSI: 윈도우즈에서 만든 문자셋
총 256개의 문자 코드 지원
ISO-8859-1, -2 : 256개의 문자 코드를 지원하는
HTML4 기본 문자셋
UTF-8: 세상에 있는 모든 문자들을 거의
표현할 수 있는 HTML5 기본 문자셋

참고자료

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

'프론트 엔드 > HTML' 카테고리의 다른 글

[HTML] HTML - 10.스타일 (0)	2023.01.07
[HTML] HTML - 8.인용구 (1)	2023.01.03
[HTML] HTML - 7.서식 (0)	2023.01.02

1. 주석(Comment)

2. 엔티티(Entity)

3. 문자셋(Character set)

참고자료

'프론트 엔드 > HTML' 카테고리의 다른 글

티스토리툴바