HTML 태그 body 여러가지 속성 알아보기

HTML

HTML 태그 body 여러가지 속성 알아보기

 

환경: Eclipse Mars

 

HTML body 태그는 HTML 문서에서 몸통을 이루는 부분입니다. 이곳에 브라우저에서 표현할 소스가 들어가는 것이죠. 여기에는 다양한 속성들이 존재하는데 하나하나씩 그 사용법을 알아 보겠습니다. 그런데 문제는 body 속성이 HTML5 에서는 지원하지 않는다는 것입니다. 앞으로 사용할 일이 있으면 조금씩 줄이고 다른 것으로 대체해야겠군요.

 

먼저 body 의 속성들에 대해서 간략하게 알아 보겠습니다. 9가지이며 크게 3가지로 분류가 됩니다. 첫 번째가 배경 관련 속성, 두 번째가 링크, 세 번째는 여백을 조절하는 속성들로 이루어져 있습니다. 문법은 아래와 같습니다.  

 

<body 속성1=”속성값1” 속성2=”속성값2”...></body>

 

1. 배경 지정하기

 

먼저 배경을 지정하는 bgcolor background 속성에 대한 간략한 설명입니다. 샘플에서 배경색과 배경 이미지를 지정했습니다. 배경 이미지는 하나만 그려 지는 것이 아니라 반복해서 채우게 됩니다.

 

¤ bgcolor : 배경 색상명 이나 16진수 코드값으로 배경색을 지정합니다.

¤ background : 배경 이미지를 지정하게 됩니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> HTML 예제 </title>
</head>
<body bgcolor="#e7e7e7" background="butterfly.ico">
 <p>
   South Korea’s suicide rate remained highest 
   among members of the Organization for Economic 
   Cooperation and Development, while its health 
   status was among the lowest, a recent OECD data showed.
 </p> 
</body>
</html>

 

HTML 태그 body 여러가지 속성 알아보기

 

2. 링크 속성

 

링크 속성은 3가지로 분류할 수 있습니다. a 태그의 속성에 대해서 아신다면 쉽게 이해가 가실 겁니다. 방문한 적이 없거나 방문한 적이 있는 경우, 링크를 클릭한 상태로 나누어 집니다. 각각에 별도의 색상 값을 줄 수 있습니다. 샘플에서처럼 한번도 방문한 적이 없는 URL 이면 link 의 녹색이 적용되고 방문한 적이 있으면 파란색으로 표시가 됩니다.

 

¤ text : 글자의 색상을 지정합니다. 색상명 이나 16진수 코드값으로 세팅합니다.

¤ link : 링크로 설정한 글자의 색을 지정합니다. 방문하지 않았을 때의 색상입니다.

¤ alink : 링크를 클릭했을 때 변화되는 색을 지정합니다.

¤ vlink : 방문한 적이 있는 링크일 때 지정되는 색상입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> HTML 예제 </title>
</head>
<body bgcolor="#e7e7e7" 
	  text="red"
	  link="green"
	  alink="yellow"
	  vlink="blue" >
 <p>
   <a href="http://www.korea.com">South Korea’s</a> suicide 
   rate remained highest among members of the Organization 
   for Economic Cooperation and 
   <a href="http://mainia.tistory.com">Development</a>, 
   while its health status was among the lowest, a recent OECD data showed.
 </p> 
</body>
</html>

HTML 태그 body 여러가지 속성 알아보기

 

3. 여백 관리

 

body 4가지 방향의 여백을 조절하는 속성입니다. 여백은 아무것도 입력하지 않아도 기본적으로 값이 들어가서 공간이 생깁니다. 이런 공간을 없애기 위해 아래 속성을 주로 사용합니다. 모두 0 으로 세팅 해 주면 여백이 사라집니다.

 

¤ topmargin : 위쪽 여백

¤ rightmargin : 오른쪽 여백

¤ bottommargin : 밑쪽 여백

¤ leftmargin : 왼쪽 여백

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> HTML 예제 </title>
</head>
<body bgcolor="#e7e7e7" 
	  topmargin="30px"
	  rightmargin="50px"
	  bottommargin="0"
	  leftmargin="40px">
 <p>
   <a href="http://www.korea.com">South Korea’s</a> suicide 
   rate remained highest among members of the Organization 
   for Economic Cooperation and 
   <a href="http://mainia.tistory.com">Development</a>, 
   while its health status was among the lowest, a recent OECD data showed.
 </p> 
</body>
</html>

HTML 태그 body 여러가지 속성 알아보기

Posted by 녹두장군