|
스타일 시트 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>
¤ 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>
¤ 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 방향으로 반복됩니다.
3. repeat-y : 배경 이미지가 y 방향으로 반복됩니다.
4. no-repeat : 배경 이미지가 반복되지 않도록 합니다.
¤ 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>
¤ 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' 카테고리의 다른 글
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
|---|---|
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
| 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 (0) | 2019.05.08 |
