1. 엘리먼트의 배경 설정하기
엘리먼트의 배경에 컬러를 설정하거나 이미지를 표시하고자 할때 background 효과를 사용합니다.
이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나 반복 할 수 있습니다.
2. 배경컬러
background-color:컬러값
|
Hex |
16진수로 컬러 값을 표현,ff0000(붉은컬러), 00ff00(초록컬러), 0000ff(파란컬러) |
|
RGB |
붉은색,초록,파란색의 컬러값을 조합하여 색상 값을 표현합니다., RGB(255,0,0) RGB(0M,255,0) RGB(0,0,255) |
|
별명 |
red,blue,green등 다양한 컬러 코드가 있습니다. |
3. 배경 이미지
background-image:url(이미지 url)
4. 배경 이미지의 반복
background-repeat: 반복방식
|
repeat |
수직,수평 모두 반복합니다. |
|
repeat-x |
수평만 반복합니다. |
|
repeat-y |
수직만 반복합니다. |
|
no-repeat |
반복하지 않습니다. |
5. 배경이미지의 위치
background-position:위치값
|
left top left center left bottom right top right center right bottom center top center center center bottom |
배경 위치를 지정합니다. |
|
x% y% |
x%는 수평위치를 y%는 수직 위치를 의미하며, 이미지의 상대적인 위치를 설정합니다. |
|
xpos ypos |
이미지의 절대적인 위치를 지정합니다. |
6. 단축속성
body {background:#429511 url('images01.png') no-repeat right top;}
예문
1)이미지의 대체 기법을 활용하여<img> 태그가 없이 로고를 만드는 방법
----------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
#logo {
background: url('http://dungx2.co.kr/images/logo.png') no-repeat;
width: 120px;
height: 175px;
}
.hidden_text {
display: none;
}
</style>
</head>
<body>
<div id="logo">
<span class="hidden_text">dungx2</span>
</div>
</body>
</html>
2)조각이미지를 활용하여 그라디언트 효과를 이용한 배경 만들기 방법
----------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
body{
background-image:url('http://dungx2.co.kr/images/logo.png');
background-repeat:repeat-x;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1>dung dung2</h1>
</body>
'IT > CSS' 카테고리의 다른 글
| css기초 boxmodel에 대해서 (0) | 2015.03.23 |
|---|---|
| box-sizing에 대해 알아봅시다. (0) | 2015.03.13 |
| 링크와 표를 꾸미기 (0) | 2015.03.11 |
| 폰트(텍스트) 활용하기 (1) | 2015.03.10 |
| css로 텍스트 꾸미기 (2) | 2015.03.09 |