CSS day7
| background-color | background-image | background-repeat | .. etc |
배경
배경 관련 스타일
background-color
배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 사용한다. 배경색 또한 color 속성과 마찬가지로 rgba, 16진수, 색상명 표기법 중 한 가지로 표현 가능하다.
기본형
background-color: <색상>
background-color : color: #ffff00 | rgb(0,0,255) | blue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경</title>
<style>
div{
background-color: deepskyblue;
width: 80%;
padding: 20px;
border: 3px dotted red;
}
</style>
</head>
<body>
<div>
<h2>배경색 적용하기</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, a iure vel nostrum est quos? Alias nulla voluptatum laboriosam cumque aspernatur at eos cupiditate consequatur quidem! Architecto cum ipsum velit?</p>
</div>
</body>
</html>
div 태그 내 배경이 deepskyblue로 변경되었다.
background-image
웹 요소에 배경을 이미지를 넣을 때 사용하는 속성으로 url()에 이미지 경로를 넣어서 사용한다.
기본형
background-image: url(파일 경로)
background-repeat
배경 이미지를 사로와 세로 중에서 어떤 방향으로 반속할지 지정하거나, 반복 하지 않고 한번만 나타내고 싶을 때 사용한다.
기본형
| 종류 | 설명 |
|---|---|
| repeat | 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복한다.(기본값) |
| repeat-x | 브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다. |
| repeat-y | 브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다. |
| no-repeat | 한 번만 표시하고 반복하지 않는다. |
background-position
반복 되지 않는 배경 이미지의 수평 위치 또는 수직 위치 값을 지정 할 수 있다. % 또는 px, 키워드(left, right, top, bottom, center)을 사용하여 상대 위치를 직접 설정할 수 있고 상대 위치를 결정하는 기분은 해당 요소의 왼쪽상단이다. 속성값을 2개로 지정할 경우 첫번째 값은 수평 위치의 값이 되고 두번째 값은 수직 위치의 값이다. 속성 값을 하나만 지정한다면 웹 브라우저에서는 지정 값을 수평 위칫값으로 간주하고 수직 위치값은 50%나 center로 간주한다.
기본형
background-position: <가로위치값>, <세로위치값> | 상대위치값
| left top | center top | right top |
|---|---|---|
| left center | center | right center |
| left bottom | center bottom | right bottom |
background-attachment
위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있다. 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동하지 않는다.
기본형
background-attachment: scoll(기본값) | fixed
scroll의 경우 화면을 스크롤하면 배경 이미지도 스크롤 된고 fixed 일 경우 화면을 스크롤하더라도 배경이미지는 고정된다.
background
지금까지 위에서 설명한 배경이미지 관련 속성을 한번에 표기하고 적용가능한 속성이다.
background: url('images/bg1.png') no-repeat center bottom fixed
이런 식으로 표현 가능하며 순서는 크게 상관하지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경</title>
<style>
body{
background-image: url(./img/flag.png);
background-repeat: no-repeat; /*반복하지 않음*/
background-position: right top; /*위치 결정*/
background-attachment: fixed; /*위치 고정함*/
/* background: url(./img/flag.png) no-repeat right top fixed; 이렇게도 표현 가능함.*/
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p>
<!-- ... -->
<!--웹 문서 내에 많은 content를 넣어 일부로 scroll할 수 있는 환경을 만든다.-->
<!-- ... -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p>
</body>
</html>
결과를 보면 아무리 scroll를 해도 배경의 위치가 고정되어 움직이지 않는 것을 볼 수 있다.