본문 바로가기

■ 블로그꾸미기/HTML/css

[ HTML] body 태그

HTML 의 기본 구성은 ?
<html> -------> 웹페이지의 시작을 나타냄
<head> ------> 웹페이지의 문서요약 정보를 적어줌
<title>타이틀</title> ---> 웹페이지의 제목을 넣는 태그 (웹브라우저의 제목표시줄에 나타남)
</head>
<body>  -------->웹페이지의 내용을 넣는 태그
희야의웹하우스
</body>
</html>

이런식으로 구성이 됩니다.


■ <body> 태그

<body> 태그를 어떻게 사용하느냐에 따라서, 웹 문서를 분위기있게 꾸밀수 있습니다.

<body bgcolor="색상값">
           (속성)     (값) 

위 body 태그는 웹문서의 전체 배경을 바꿔주는 태그 입니다.

<body>태그의 속성을 살펴 보겠습니다.
 <body>태그의 속 값  설명 
 bgcolor 색상  웹문서의 배경에 색상을 지정합니다. 
 background  이미지 파일명 웹문서의 배경에 이미지를 지정합니다.
 text  색상 웹문서에 나타나는 글자의 색상을 지정합니다.
 link  색상 웹문서에 나타나는 하이퍼링크 글자의 색상을 지정합니다.
 alink  색상 하이퍼링크 글자가 클릭될 때의 색상을 지정합니다. 
 vlink  색상 하이퍼링크 글자가 클릭된 후의 색상을 지정합니다. 
 topmargin  픽셀 위쪽 여백을 지정합니다. 
 leftmargin  픽셀 왼쪽 여백을 지정합니다. 
 bgproperties  fixed/scroll fixed로 설정하면, 스크롤바를 움직여도 배경 이미지가 고정되어 움직이지 않습니다. 

배경에 색상 대신 이미지를 넣고 싶다면 ?
<body background="이미지">
이런식으로 적어주시면 됩니다.

● 글자의 색상 - text, link, alink, vlink

위에 태그 속성 표에 적은걸 참고로 하여  태그 소스를 한번 만들어 보겠습니다.

<body bgcolor="blue" text="white" link="gray" alink="#33333" vlink="green">
=
위 태그를 보시면, 웹페이지의 배경은 파란배경이고 글자는 흰색 글자이고, 
만약에 페이지에 링크가 있다면, 링크 색상은 회색이 됩니다. 링크부분을 클릭하면 진한 회색으로 바뀌고, 클릭된 후의 링크 색상은 녹색으로 바뀌게 된다는 뜻입니다.

● 문서의 여백 - topmargin, leftmargin

<body>태그에 topmargin과 leftmargin 속성을 쓰면, 화면의 어느 지점부터 웹문서의 내용을 나타낼지 픽셀 단위로 지정할 수 있습니다.
<body background=".....gif" topmargin="30" leftmargin="25">
이런식으로 값을 적어주시면 됩니다.

● 배경 그림 고정 - bgproperties
<body background="...........gif" bgproperties="fixed">

bgproperties 속성을 fixed로 설정하면, 스크롤바를 아래위로 움직여도 배경 그림은 고정이 되어있고, 문서의 내용만 움직이게 됩니다.