[HTML+CSS] [HTML 기본 다지기] 05 - 엔티티 기호 사용하기

[HTML+CSS] [HTML 기본 다지기] 04 - HTML 문서의 기본구조

[HTML+CSS] [HTML 기본 다지기] 03 - Tag(태그) 개념 및 사용시 주의해야 할 점 [HTML+CSS] [HTML 기본 다지기] 02 - Visual Studio Code 설치 및 확장설치 [HTML+CSS] [HTML 기본 다지기] 01 - HTML에 대하여 HTM..

onelight-stay.tistory.com

HTML 문서를 제작할 때 '<'나 '"'와 같은 특수문자를 사용한다.

이때, 이와 같은 특수문자나 특수기호를 브라우저에 표시하기 위해서는

어떻게 사용해야 할까?

엔티티 기호

'<'나 '"'와 같은 웹문서 제작 시 사용되는 특수문자를 사용하고자 할 때

미리 약속한 이름이나 표기법으로 작성해야 하는 기호

https://dev.w3.org/html5/html-author/charref

Character Entity Reference Chart

dev.w3.org

엔티티 기호는 'W3C'에서 제공하는 엔티티 코드표를 이용해 작성하면 된다.

(엔티티 코드표는 다른 사이트에서도 제공된다.)

단, 엔티티 이름이나 엔티티 코드 뒤에 오는 세미콜론(;)을 꼭 붙여줘야

오류 없이 결과가 나온다.

엔티티 코드를 이용해 직접 확인해 보자.

## 05. HTML 문서 기본구조
- <!doctype> : 문서의 유형(HTML)을 지정하는 선언문
- <html> : 웹 문서 시작을 알리는 태그
    - <head> : 브라우저에게 정보를 주는 태그
        - <title> : 문서 제목을 입력하는 태그
        - <meta> : 문자 세트를 비롯한 문서 정보를 입력하는 태그
    - <body> : 실제 브라우저에 표시되는 태그

위의 해당 작업을 진행했는데 화살 괄호('<>')가

HTML의 태그 기호와 일치하여 결과창이 완전하게 보여주지를 않고 있다.

이럴 때 사용하는 것이 바로 '엔티티 기호'이다.

## 05. HTML 문서 기본구조
- &lt;html&GT; : 웹 문서 시작을 알리는 태그
    - &lt;head&GT; : 브라우저에게 정보를 주는 태그
        - &lt;title&GT; : 문서 제목을 입력하는 태그
        - &lt;meta&GT; : 문자 세트를 비롯한 문서 정보를 입력하는 태그
    - &lt;body&GT; : 실제 브라우저에 표시되는 태그

이렇게 오류를 보이는 화살 괄호를 직접 쓰는 대신에

W3C에서 제공하는 엔티티 기호를 사용하면 원활한 결과창을 보여준다.

이런 식으로 연습할 때 자주 사용해서

엔티티 기호의 원리를 이해하면 다음에 사용할 때에도

문제없이 이용할 수 있을 것이다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] [텍스트 관련 태그] 02 - 인라인 레벨 태그 (0)	2020.06.08
[HTML+CSS] [텍스트 관련 태그] 01 - 블록 레벨 태그 (0)	2020.06.07
[HTML+CSS] [HTML 기본 다지기] 04 - HTML 문서의 기본구조 (0)	2020.06.05
[HTML+CSS] [HTML 기본 다지기] 03 - Tag(태그) 개념 및 사용시 주의해야 할 점 (0)	2020.06.04
[HTML+CSS] [HTML 기본 다지기] 02 - Visual Studio Code 설치 및 확장설치 (0)	2020.06.03

IT Information Notebook

[HTML+CSS] [HTML 기본 다지기] 05 - 엔티티 기호 사용하기

엔티티 기호

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS] [HTML 기본 다지기] 05 - 엔티티 기호 사용하기

엔티티 기호

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바