웹개발(8)-CSS배경
*이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*
background-color: HTML 요소의 배경색을 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css배경</title>
<style>
body {background-color: deepskyblue;}
div {background-color: white; width:60%; padding:20px; border: 3px solid red;}
</style>
</head>
<body>
<h2>css 배경1</h2>
<div>
<h2>배경 적용하기</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quos asperiores architecto, doloremque eligendi recusandae aspernatur, nam adipisci accusamus quis voluptatum inventore, rerum dicta! Officia odio qui voluptatum excepturi quo.</p>
</div>
</body>
</html>
background-repeat: 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정합니다.(repeat-x, repeat-y, no-repeat)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css배경 2</title>
<style>
body {
background-image: url(./smile.png);
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>css배경 2</h2>
</body>
</html>
background-position
- 반복되지 않은 배경 이미지의 상대 위치를 설정합니다.
- %나 px을 사용하여 상대위치를 직접 설정할 수 있습니다.
- 상대위치를 결정하는 기준은 왼쪽 상단입니다.
left top center top right top
left center center right center
left bottom center bottom right bottom
예)
background-position: center bottom
background-position: 가로위치값 세로위치값 => background-position: 10% 100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 배경3</title>
<style>
div {
width: 60%;
height: 300px;
border: 3px dotted deeppink;
padding: 10px;
margin-bottom: 20px;
background-image: url(./smile.png);
background-repeat: no-repeat;
}
.bg1 {background-position: center bottom;}
.bg2 {background-position: center;}
.bg3 {background-position: 20% 100px;}
</style>
</head>
<body>
<h2>css 배경3</h2>
<div class="bg1">
<h2>background-position 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, nihil rerum dicta quam ab eveniet tenetur quaerat assumenda repellendus sint similique provident magni a sed minima fugit, molestias laborum! Necessitatibus.</p>
</div>
<div class="bg2">
<h2>background-position 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, nihil rerum dicta quam ab eveniet tenetur quaerat assumenda repellendus sint similique provident magni a sed minima fugit, molestias laborum! Necessitatibus.</p>
</div>
<div class="bg3">
<h2>background-position 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio, nihil rerum dicta quam ab eveniet tenetur quaerat assumenda repellendus sint similique provident magni a sed minima fugit, molestias laborum! Necessitatibus.</p>
</div>
</body>
</html>
background-attachment
- 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있습니다.
- 고정된 배경 이미지는 스크롤과 무관하게 화면 위치에서 이동되지 않습니다.
- fixed
background-size
- 반복되지 않은 배경 이미지 크기를 설정합니다.
- px, %, contain, cover
- contain
- 배경 이미지의 가로, 세로 모두 요소보다 작다는 전제하에 설정
- 가로, 세로 비율은 유지
- 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다.
- cover
- 배경 이미지의 가로, 세로, 길이 모두 요소보다 크다는 전제하에 설정
- 가로, 세로 비율은 유지
- 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css배경 4</title>
<style>
div {
background-image: url(./smile.png);
background-repeat: no-repeat;
width: 150px;
height: 150px;
border: 2px solid red;
margin-bottom: 20px;
}
.background1 {background-size: 50px 100px;}
.background2 {background-size: 500px 500px; background-position: center;}
.background3 {background-size: contain;}
.background4 {
width: 100px;
height: 60px;
background-size: cover;
background-position: bottom center;
}
</style>
</head>
<body>
<h2>css배경 4</h2>
<div class="background1"></div>
<div class="background2"></div>
<div class="background3"></div>
<div class="background4"></div>
</body>
</html>
background: 배경 속성을 한꺼번에 적용합니다.
background 파일위치 반복여부 위치 사이즈 ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 배경5</title>
<style>
html {
background: url(./bridge.jpg) no-repeat fixed center bottom/cover;
}
</style>
</head>
<body>
<h2>css 배경5</h2>
</body>
</html>