[HTML] 에서의 텍스트 표현

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>,...