[HTML 기초 강좌] 3.문자 형태 태그와 문장 형식 태그

1. 문자 형태 태그

 

문자를 입력 할 때 진하게 또는 기울임 또는 밑줄 등 여러 형태로 나타낼 수 있는 태그들이 있습니다.

 

b : 글자를 진하게 bold 효과를 주는 태그이다.

strong : 진하게 bold 효과를 주는 태그이다.

 

i : 기울임꼴 글자를 나타내는 태그이다.

em : 기울임꼴 글자를 나타내는 태그이다.

 

u : 밑줄문자 태그이다.

 

s : 취소선 문자 태그이다.

strike : 취소선 문자 태그이다.

 

tt : 타자체 태그이다.

 

sup : 위첨자 태그이다.

sub : 아래첨자 태그이다.

 

 

Html 문서에서는 특수문자를 입력할 때 엔티티 코드를 사용합니다.

 

태그에도 < > & 와 같은 특수문자가 들어가기 때문에 이를 혼동하지 않게 하기 위함입니다.

 

또한 아무리 많은 공백(사이띄움 ? 스페이스바 ? )를 주어도 1칸만 나타나게 됩니다.

 

그래서 공백문자를 엔티티코드로 사용하여 많은 공백을 줄 수 있습니다.

 

가장 많이 사용하는 엔티티 코드는

&lt;   == <
&gt;   == >
&amp;  == &
&quot; == "
&nbsp; == 공백문자(사이띄기)

이며 더 많은 엔티티 코드가 필요하면 http://entitycode.com/#math-content 에서 확인할 수 있습니다.

 

다음과 같이 코딩합니다.

ex) 문자형태.html

 

 

 

출력 결과물은 다음과 같습니다.

 

 

 

2. 문장 형식 태그

 

문자 형태 태그와 마찬가지로 문장에 영향을 주는 태그들도 존재합니다.

문장 형식 태그는 문장을 묶음으로 처리하는 목적으로 사용됩니다.

 

nobr : 문장이 화면 끝을 넘어서는 길이에서는 보통 자동으로 줄바꿈이 일어나는데 이를 방지하고 줄바꿈하지 않는태그입니다.다. 이 태그 안에서 강제 줄바꿈 </br> 태그는 사용 가능합니다.

 

p : 줄바꿈 기능이 있고 태그 앞 뒤에 빈 줄이 생깁니다. align 속성을 이용하여 left, center, right 정렬을 할 수 있습니다. 이 태그를 영역(<p></p>)으로 사용하지 않고 단독(<p>)으로 사용하면 줄바꿈 용도로 사용될 수 있습니다. 하지만 연속으로 사용해도 한번의 효과만 나타납니다.

 

div : 줄바꿈 기능이 있지만 빈 줄을 출력하지는 않습니다. p 태그와 마찬가지로 align 속성을 이용하여 정렬을 할 수 있습니다.

 

blockquote : 자동으로 들여쓰기가 되는 태그입니다. 줄바꿈 기능도 있습니다. 줄바꿈 형태는 p 태그와 동일합니다.

 

center : 가운데 정렬이 되는 태그입니다. 줄바꿈 기능도 있는데 이는 div 태그와 같습니다.

 

pre : 줄바꿈, 공백(사이띄우기) 등을 입력한 형태 그대로 유지시켜주는 태그입니다.

 

span : 보통 문장과 어울리면서 영역을 구성하는 태그입니다. 이 태그는 문장을 유지하면서 style 등을 적용할 때 사용됩니다. 줄바꿈 기능은 없습니다.

 

 

다음과 같이 코딩합니다.

ex) 문장형식.html

 

 

 

 

출력 결과물은 다음과 같습니다.