2-1 <BODY>..</BODY>


저번 편 강좌에서 간략하게 <BODY>, <HEAD> 등을 사용해보았다면 이번 편은 한 태그의 정확한 사용법을 익히고, 여러가지 속성들도 같이 익히는 것을 이번 강좌의 목표로 정했습니다. HTML 문서 중 본문을 의미하는 <BODY>..</BODY> 태그에 여러가지 속성을 덧붙여 표현할 수도 있습니다. 그럼 어떤 속성들이 있을까요?

<BODY
bgcolor="#색상코드" 배경 색 지정
link="#색상코드" 방문을 하지 않았을때 색지정
alink="#색상코드" 링크 했을때 색지정
vlink="#색상코드" 한번 방문했을때 색지정 
leftmargin=0 왼쪽 여백
topmargin=0 상단 여백
marginwidth=0 x 좌우 영역
marginheight=0 y 좌우 영역
background="이미지 경로" 배경 이미지
> 


아래는 태그 속성 사용의 예제입니다.

배경 관련 태그 속성(bgcolor, background):


여백 관련 태그 속성(leftmargin, topmargin):

상하좌우 영역 관련 태그 속성(marginwidth, marginheight):

 
 

2-2 <BR>, <P>, <BLOCKQUOTE>


우리가 만나볼 BR(Line Break) 태그는 강제 줄바꿈 태그며, 줄바꿈을 의미합니다. 우리가 줄바꿈 하고 싶은 부분에 이 BR태그를 넣어주면 쉽게 바꿔줄 수 있습니다. 이 태그처럼 단독으로 쓰이는 태그의 경우엔 태그 이름 뒤에 /를 붙입시다.

<HTML>
 <HEAD>
  <TITLE>BR 태그</TITLE>
  </HEAD>

<BODY> 
  1번 줄<BR />
  2번 줄<BR />
  3번 줄<BR />
 </BODY>
</HTML>




이와 비슷한 P(paragraph) 태그는 하나의 문단을 구성하게 만들어주는 태그입니다.

<HTML>

 <HEAD>

  <TITLE>BR 태그</TITLE>

  </HEAD>


<BODY> 

  <P>1번 줄</P>

  <P>2번 줄</P>

  <P>3번 줄</P>

 </BODY>

</HTML>


BR 태그와 다른게 보이시나요? 첫번째 문단과 두번째 문단, 두번째 문단과 세번째 문단 사이에 공백라인이 생겼습니다. <P>..</P> 태그에는 속성이 있는데 대표적으로 정렬(align)이 있습니다. align에서 사용할수 있는 값은 아래에서 확인할 수 있습니다.

<HTML>

 <HEAD>

  <TITLE>P 태그</TITLE>

  </HEAD>


<BODY> 

  <P align="left">1번 줄</P>

  <P align="right">2번 줄</P>

  <P align="center">3번 줄</P>

 </BODY>

</HTML> 




차례대로 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬이며 justify란 값도 있는데 이것은 맞춤 정렬 할때 사용합니다.

BLOCKQUOTE 태그는 뭘까요? 이 태그를 사용하면 그 태그 사이 부분은 들여쓰기가 됩니다.

<HTML>

 <HEAD>

  <TITLE>BLOCKQUOTE 태그</TITLE>

  </HEAD>


<BODY> 

  <BLOCKQUOTE>아아아<br />

  아아아아<br />

  아아아아아</BLOCKQUOTE>

 </BODY>

</HTML>



2-3 <H>, <PRE>, <HR>


<H>..</H> 태그는 본문중에서 주로 제목을 표시할때 사용되는 태그입니다.
(H1부터 H6까지 있고, H1이 가장 큰 글자입니다 그리고 기본적으로 볼드체가 적용됩니다)

<HTML>
 <HEAD>
  <TITLE>H 태그</TITLE>
  </HEAD>

<BODY> 
  <H1>H1</H1>
  <H2>H2</H2>
  <H3>H3</H3>
  <H4>H4</H4>
  <H5>H5</H5>
  <H6>H6</H6>
 </BODY>
</HTML>



 
<PRE>..</PRE> 태그는 입력된 모습 그대로를 출력하고 싶을때 사용되는 태그입니다.
(글꼴의 종류와 크기가 변경될 가능성이 있음.)

<HTML>
 <HEAD>
  <TITLE>PRE 태그</TITLE>
  </HEAD>

<BODY> 
  <PRE>
ABCDEFGHIJKL
 0123456789
  가나다라마바사아자차카타파하
  </PRE>
 </BODY>
</HTML>




<HR> 태그는 수평선을 그을때 사용되는 태그입니다. HR 태그에 사용되는 태그의 속성은 아래와 같습니다.

<HR
width="숫자" 길이를 전체화면에 대한 %로 나타내거나 픽셀로 나타냄
size="숫자" 두께, 픽셀단위
align="left, right, center" 위치 정렬
color="#색상코드" 선의 색깔
noshade 입체감 제거
> 


사용 예:

<HTML>
 <HEAD>
  <TITLE>HR 태그</TITLE>
  </HEAD>

<BODY> 
  <HR width="50%" size="3" align="center" color="#111111" noshade>
 </BODY>
</HTML>

 


저작자표시

'프로그래밍 관련 > HTML' 카테고리의 다른 글

HTML 강좌 6편. <EMBED>..</EMBED>, <TABLE>..</TABLE>  (8) 2012.02.14
HTML 강좌 5편. HTML 색상표, 링크 걸기  (2) 2012.02.14
HTML 강좌 4편. <UL>, <OL>, <LI>, 특수문자 표시, 이미지 넣기  (2) 2012.02.14
HTML 강좌 3편. <FONT>, <BIG>, <STRONG>, <CENTER>, <SUB>..  (2) 2012.02.14
HTML 강좌 1편. HTML란 뭘까?  (4) 2012.02.14

티스토리툴바