Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

CSS 속성중에 공통적으로 사용하는 background 에 대해 알아 보겠습니다. 5개의 속성으로 구분되는데 background-color, background-image, background-repeat, background-position, background-attachment 를 사용해서 샘플 코드를 만들어 보겠습니다.

 

¤ background-color

 

태그의 공통 속성 중에 하나로 배경색을 지정할 수 있습니다. background-color 의 값으로 색상명이나 16진수형태의 RGB값을 넣을 수 있습니다. 소스에서 처럼 body 태그에는 16진수 값을 넣었고 p 태그에는 색상명을 사용했습니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	p {
		background-color: palegreen;";
	}
</style>
</head>
<body>
	<p>태그의 공통속성중 하나인 background-color</p>
</body>
</html>

 

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

¤ background-image

 

배경에 이미지를 적용할 때 사용합니다. 이미지의 크기가 태그 영역보다 작다면 반복해서 나타나게 됩니다. 값에는 url(이미지 파일 경로명) 을 입력하면 됩니다. 상대 경로와 절대 경로가 있는데 현재 문서를 기존으로 해서 이미지의 위치를 지정하면 됩니다. 예를 들어 url(img\butterfly.ico) 가 되겠죠. 절대 경로는 드라이브명이 들어간 컴퓨터에서의 폴더 위치를 말합니다. 같은 폴더에 있을 때는 파일명만 있으면 됩니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
		background-image: url(butterfly.ico);
	}
	p {
		background-color: palegreen;";
	}
</style>
</head>
<body>
	<p>background-color 배경색 넣기</p>
	<p>background-image 배경에 이미지를 반복해서 넣습니다.  </p>
</body>
</html>

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

¤ background-repeat

 

배경 이미지의 반복을 지정할 수 있는 옵션은 총 4가지입니다. 4가지 값을 하나씩 변경해서 적용했을 때 어떻게 변경되는지 하나씩 알아 보겠습니다. 아래 소스에서 background-repeat 값에 반복 옵션을 바꿔 넣고 테스트 해 봅니다.  

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
		background-image: url(butterfly.ico);
		background-repeat: repeat-x ;
	}
	p {
		background-color: palegreen;";
	}
</style>
</head>
<body>
	<p>background-repeat 배경에 이미지를 반복옵션중 반복 중단  </p>
</body>
</html>

 

1. repeat : 배경 이미지가 반복됩니다. 기본값입니다.

2. repeat-x : 배경 이미지가 x 방향으로 반복됩니다.

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

3. repeat-y : 배경 이미지가 y 방향으로 반복됩니다.

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

4. no-repeat : 배경 이미지가 반복되지 않도록 합니다.

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

¤ background-position

 

반복되지 않는 이미지일 때 위치를 지정할 수 있는 속성입니다. background-repeat 의 값으로 no-repeat 가 지정되면 하나의 이미지만 표현이 됩니다. 이때 화면에서 위치 시키고 싶은 곳으로 background-position 사용해서 보낼 수가 있습니다. 들어가는 값은 방향 문자 조합입니다. 아래 표에 위치와 값을 넣었습니다.

 

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	
	table {
		background-image: url(butterfly.ico);
		background-repeat: no-repeat;
		background-position: center left;
	}
</style>
</head>
<body>
	<table width="100%" border="1">
		<tr height="100">
			<td width="33%"> </td>
			<td width="33%"> </td>
			<td width="34%"> </td>
		</tr>
		<tr height="100">
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr height="100">
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</table>
</body>
</html>

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

¤ background-attachment

 

문서가 스크롤될 때 배경 이미지의 스크롤 여부를 지정할 수 있습니다. 쉽게 말해서 값을 fixed 로 지정하게 되면 스크롤이 되더라도 화면에 그대로 위치하게 되는 것이죠. 주로 페이지 위/아래 이동에 많이 사용합니다. background-position 으로 위치를 지정한 뒤 background-attachment: fixed 로 셋팅 하면 웹 페이지에 위/아래 버튼을 만들 수 있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
		background-repeat: no-repeat;
     	background-attachment: fixed;
     	background-image: url(butterfly.ico);
	}

	div {
		width:100%; 
		height:1000px;
	}
</style>
</head>
<body>
	<div>
		배경이미지가 스크롤을 따라 움직입니다. 
	</div>
</body>
</html>

스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기

 

반응형
Posted by 녹두장군

댓글을 달아 주세요