8-1-2.<body>의 속성
문서의 전체적인 속성은 <body> 태그의 속성으로 지정한다. HTML 문서 내용의 루트가 <body>이므로 <body>가 곧 문서이며 <body>의 속성이
곧 문서의 속성이다. 다음 여러 가지 속성이 정의되어 있다.
|
속성 |
설명 |
|
bgcolor |
페이지의 배경 색상이다. |
|
background |
배경에 깔리는 이미지를 지정한다. |
|
bgproperties |
배경 이미지 배치 방법 |
|
text |
링크가 아닌 일반 문자열에 사용될 색상이다. |
|
link |
링크된 글자에 사용될 색상이다. |
|
alink |
링크를 클릭했을 때 사용될 색상이다. |
|
vlink |
이미 방문한 링크의 색상이다. |
|
topmargin |
위쪽 여백 |
|
leftmargin |
왼쪽 여백 |
|
scroll |
스크롤 바 표시 여부 |
배경색, 글자색, 여백, 스크롤 바 여부 등 문서나 창 전반에 걸쳐 적용되는 속성이다. HTML에서는
색상을 다음 포맷으로 지정한다.
RRGGBB
색상을 구성하는 빨간색, 초록색, 파란색의
강도를 조합하여 하나의 색상을 만들어 낸다. 빨간색은 FF0000이고
파란색은 0000FF이다. 16진수의 대소문자는 구분하지
않으므로 ff0000으로 적어도 상관없다. 16진수 하나로
색상을 간편하게 표현할 수 있다.
bgcolor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bgcolor</title>
</head>
<body bgcolor="000000" text="ffff00" link="0000ff" alink="ff0000">
<p>배경색과
글자색을 지정한다.</p>
<p><a href="http://www.naver.com">Naver 바로 가기</a></p>
</body>
</html>
별다른 지정이 없으면 보통 흰바탕에 검정색 글자로 출력되지만
<body>의 bgcolor, text 속성으로 색상을 지정했으므로 배경색은
검정색이고 글자색은 노란색이 된다. 링크는 파란색으로 표시되며 클릭하면 빨간색이 된다.
색상만 바꿔도 페이지의 분위기가 완전히 달라진다. 단색 대신 이미지로
페이지 뒤쪽의 배경을 채울 수도 있다. <img> 태그의
src 속성과 마찬가지로 <body>의
background 속성에 이미지 파일의 경로를 적어 준다. 이미지가 페이지보다 더 작으면
반복적으로 타일링된다. 다음은 페이지 뒤쪽에 옥수수 이미지를 배치하고 그 위에 글자를 출력했다.
bgimage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bgimage</title>
</head>
<body background="corn.jpg">
<h1>옥수수
그림이</h1>
<h1>배경에 출력된다.</h1>
<h1>문서를 스크롤하면</h1>
<h1>이미지도 같이</h1>
<h1>스크롤된다.</h1>
</body>
</html>
배경 이미지 위에 글자가 출력되므로 글자와는 다른 색조의 이미지를 사용하는 것이 좋다. 글자가 검은색이면 밝은 이미지를 깔고 글자가 흰색이면 어두운 이미지를 깔아야 글자가 잘 보인다. 검정 글자라면 대리석, 종이 등이 적당하고 흰색 글자라면 나무결이나
밤하늘 이미지가 적당하다.
창을 스크롤하면 이미지도 글자와 함께 스크롤된다. bgproperties 속성을 fixed로 지정하면 이미지는 스크롤해도 움직이지 않고 고정된다.
bgfixed.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bgfixed</title>
</head>
<body background="corn.jpg" bgproperties="fixed">
<h1>옥수수
그림이</h1>
<h1>배경에 출력된다.</h1>
<h1>문서를 스크롤하면</h1>
<h1>이미지도 같이</h1>
<h1>스크롤된다.</h1>
</body>
</html>
두 예제를 교대로 실행하면서 차이를 관찰해 보자. <body> 태그의
속성만으로도 문서의 전반적인 분위기를 꽤 많이 바꿀 수 있다.