본문 바로가기

Programming/HTML

[4]HTML 문서 레이아웃 태그

M1S Secur 입니다.


오늘은 HTML의 문서 레이아웃 태그에대해 정리해보겠습니다.

 

 

 

 

문서 레이아웃태그가 필요한이유는

HTML문서에서는 공백이나 줄 바꿈등을 인식하지 못하기때문에 공백이나 줄 바꿈을 표현하기 위해서는 문서 레이아웃 태그가 필요합니다.

 

①BR 태그

BR태그는 HTML에서 매우 많이 사용하는 태그중의 하나이며 여기서, BR은 Line Break(줄바꿈)의 의미를 나타낸다. 즉 BR태그는 문장의 줄을 바꾸고자 할떄 문장 끝에 <BR>표시로 표시하며 저에 설명했던 일부태그들처럼 단독태그로써 종료 태그 </...>없이 쓰인다.

 

②P 태그

P 태그는 Paragraph(문단 구분)의 의미로써 줄 바꿈과 동시에 한줄 띄게 할때 사용하며 문장 끝이 <P>로 표시한다. P 태그는 <BR>태그와 마찬가지로 단독 태그로써 종료태그 없이 쓰인다. 문단정렬을 나타내는 ALIGN 속성이 포함될 수 있으며, 좌측정렬, 우측정렬, 가운데 정렬에 따라서 align=left 또는 align=right 또는 align=center로 표시한다.

 

③DIV 태그

DIV 태그는 DIVision(구역 구분)의 의미로써 구역을 구분하고자 할떄 사용하며 문장 끝에<DIV>로 표시로 표시한다. DIV 태그는 <P> 태그와 거의 비슷한 역할을 하지만, 마지막에 줄을 띄워주지는 않는 것이 차이이다. DIV 태그 또한 문단 정렬을 나타내는 Align 속성이 포함될수있다.

 

④CENTER 태그

CENTER 태그는 문단 및 객체를 중앙에 정렬 시킬 때 사용하며, <CENTER>.......</CENTER>로 표시한다.

 

⑤HR태그

HR 태그는 HoRizontal(수평선)의 의미로써 문장 구분을 위해서 수평선을 그을 떄 사용하며 <HR>로 표시한다. HR태그는 단독 태그로써 종료 태그</...>없이 쓰인다. HR태그에는 다음과 같은 속성이있다.

 

(1)Width="숫자 또는 %" : 수평선의 폭을지정

(2)Align="Lefit/Center/Right" : 수평선을 왼쪽, 가운데, 오른쪽으로 정렬

(3)Size="숫자" : 수평선의 두께를 지정(기본 두께는 2)

(4)Noshade : 수평선에 음영효과를 주지 않음.

 

⑥PRE 태그

PRE 태그는 PREsentation의 의미로써 편집한 그대로를 브라우저에서 보여줄 떄 사용하며 <PRE>로 표시한다. 줄을 바꾸거나 띄울 때 <BR>이나 <P>를 사용하지 않아도 되므로 편리하다.

 

⑦주석문 달기

주석(comment)는 HTML 소스를 작성할때 문서의 수정사항이나 태그의 설명 등을 보기 편하기 위해 사용한다. 소스가 아주 길고 복잡해질 경우에 주석문을 달아놓으면 작성자의 의도를 알기 쉽게해준다. 또한 여러사람이 하나의 소스를 공동으로 작업하는 경우에도 일관된 원칙으로 주석을 달아놓으면 효율성이 증대된다. HTML 문서에서 주석을 사용하려면 <!-- 와 -->사이에 내용을 넣으면된다.

 

 

 

이상 HTML 문서 레이아웃 태그 설명이었습니다.

-M1S Secur-