HwiDoorumi

1. 엔티티코드(Entity Code)란?

HTML문서나 XHTML 문서를 코딩하면서 특수문자를 사용할 때가 있다.

가장 많이 사용하는 엔티티코드(Entity Code)로는 & 나 <, > 같은 특수문자가 있다.

이러한 특수문자를 사용할 때에는 엔티티코드 혹은 엔티티넘버로 변환해서 입력해 주어야 한다.

그 이유는 변환하지 않고 입력했을때, 컴퓨터 브라우저가 HTML문서를 읽을때 실제 문서 내용이 아닌 HTML코드로 인식할 수 있는 문제가

발생하기 때문이다.

가령  '<' (꺽쇠 괄호) 를 HTML 시작태그 기호로 받아들인다거나, 큰따옴표 ' " ' 를 HTML 속성값으로 인식하거나, ' & ' 를 엔티티 기호의 시작으로

인식하는 경우가 발생할 수 있다는 것이다.

실무를 하며 가장 많이 사용했던 엔티티코드는 크게 <, >, &, ",  ©, 공백 등이다.

보편적으로 사용되는 엔티티코드를 알아보고, 또다른 어떤 코드들이 있는지 알아보려고 한다.

업체마다 다르겠지만 필자의 경우 크게 위의 5~6가지의 코드를 엔티티코드(Entity Code)를 많이 사용하였다. 그리고 숫자식 표현보다는 문자식 표현을 사용하였다.

(카피라이트의 경우 실제로 에디터에서 html로 변환하여 입력하였다...ㅁ한자인지 확실하지 않아서 ㅠㅠ)

추가적인 Entity자료는 http://entitycode.com/ 에서 참고할 수 있다.

[출처 및 참고]  http://entitycode.com/ (엔티티코드 자료 사이트)

1. 텍스트 표현

- HTML 주석

> 문서 소스의 이해를 돕기 위한 설명을 추가할 때 사용

> 화면상에는 아무것도 표시되지 않음, 소스에서만 확인 가능

> <!--  주석 내용 -->

- <br> 태그

> 편집기에서 엔터키와 같은 기능

> 종료태그 </br> 없이 사용한다. => <br/>

- <p> 태그

> 문단을 나누어 독립된 단락을 생성

> 단락 전후에서 줄바꿈이 수행됨

> 스타일이 지정되지 않은 p 태그를 여러번 사용해도 한번 사용한 것과 같은 효과를 가진다.

(<p><p><p></p></p></p>)

※ 공백 및 특수 문자 입력

> 공백, 예약어로 사용하는 문자 또는 키보드로 직접 입력할 수 없는 문자

> 연속된 여러개의 공백 = &nbsp;

> <, >, ", & = $#10진수코드;

> ☞, ♡, ￥ ... = &#x16진수코드;

- <hr>태그

> 텍스트 사이에 수평선을 그리는것

> 단락의 주제를 구분하는 용도로 사용

> 자동 줄바꿈, 종료태그 없이 사용

- <hn> 태그

> n = 1,....6 => <h1>, <h2>, <h3>....<h6>

> 굵은숫자 (bold), 자동 줄바꿈

- <pre>태그

> 편집기에서 문자가 입력된 형식을 그대로 유지하여 출력

> 특수문자가 많은 텍스트(ex) 프로그램 소스) 를 표시할 때 유용

- <blockquote> 태그

> 상하여백으로 구분되는 단락의 생성 및 들여쓰기 기능(<p>태그와 유사)

> 주로 인용문을 만들때 사용, cite 속성

> 예시)

<blockquate cite="http://nm817.tistory.com">

휘두루미의 티스토리 입니다.

</blockquate>

2. 글자 스타일 지정

- 물리적 스타일 관련 태그

> 단순히 웹브라우저에 표시되는 출력 모양만을 지정하는 태그

> <b>, <i>, <s>, <u>, <sup>, <sub>, <small>

- 논리적 스타일 관련 태그

> 출력 형태보다는 태그 자체에 의미가 부여되는 태그

> <cite>, <code>, <samp>, <var>, <dfn>, <em>, <strong>, <addr>, <address>, <kbd>, <q>

3. 목록 지정

- 순서가 없는 목록

> 글머리기호( · ) 를 붙여 목록의 각 항목을 표시

> <ul> ~ </ul>

> 자식요소 -> li

> ex)

<ul>

<li>목록</li>

<li>목록</li>

<ul>

- 순서가 있는 목록

> 순서(1, 2, 3, ...) 를 매겨서 목록의 각 항목을 표시

> <ol> ~ </ol>

> 자식요소 -> li

> type="값" => 순서있는 기호의 유형을 지정

> start="숫자" => 시작할 항목 번호를 지정

> reversed => 항목 번호를 역순으로 지정

> ex)

<ol>

<li>목록</li>

<li>목록</li>

</ol>

- 서술목록

> 어떤 용어나 이름에 대해서 서술하는 형식

> <dl> ~ </dl>

> 자식요소 -> dt, dd

> <dt> 태그 => 태그용어/이름을 나열. 자동줄바꿈

> <dd> 태그 => 나열된 용어/이름에 대한 설명을 표시. 자동줄바꿈 및 들여쓰기 기능

> ex)

<dl>

<dt>용어</dt>

<dd>설명</dd>

</dl>

※ <li> 태그

> <ul>과 <ol> 태그 내에서 공통으로 사용

> 목록에서 각 항목의 내용을 표현할 때 사용

> 들여쓰기 및 자동 줄바꿈 기능

> 종료태그 없이 사용 가능

(이부분 좀 의아해서 테스트 해봤는데 안써도 DOM에서는 자동으로 만들어주더군요..

실제로 실무 작업할때는 안쓰는 사람을 보지 못했습니다. 유지보수측면도 감안하면 써주는게 좋을것 같습니다 ㅎㅅㅎ)

> value="숫자" => 항목 번호를 중간에 변경하는 경우 (부모태그가 ol 일때에만 사용)

4. 콘텐츠 그룹핑

- 인라인요소

> 텍스트요소 -> 기존 내용에 이어서 작성됨

> 입력 내용만큼의 공간을 차지해서 내용을 표시

> 줄바꿈이 수행되지 않아 앞뒤 내용이 이어져서 한 줄에 표시됨

> <span>, <img>, <strong>, ...

- 블록요소

> 문서 구조 요소 -> 새로운 행에 작성됨

> 하나의 줄을 전부 차지해서 내용을 표시

> 자동으로 줄바꿈 수행

> <div>, <p>, <h1>,...