728x90
반응형
1. background-size 속성
[속성 값]
contain : 가능한 크게 배경 이미지를 확대
cover : 콘텐츠 영역이 완전히 배경 이미지에 포함되도록 처리
[코드 예시]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>2022. 5. 26. - 오전 10:38:15</title>
<style>
body{
margin: 0;
font-family: Arial;
}
.hero-image{
height: 500px;
background: url('../images/img_man.jpg') no-repeat center;
background-size: cover; /* 배경을 내가 만든 영역에 꽉채우겠다. */
position: relative;
}
.hero-text{
text-align: center;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1>I am Sam</h1>
<h3>Lorem ipsum dolor sit.</h3>
<button>Hire me</button>
</div>
</div>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam placeat omnis asperiores incidunt iste molestias!</p>
</body>
</html>
[적용 결과]
2. background-origin 속성
- background-position : 배경 이미지의 위치를 지정하는 속성 (left top, center middle = x,y 좌표 값을 지정해서 위치 지정)
- background-origin : [배경 이미지]의 위치를 지정하는 속성
두 가지 위치 지정 속성의 차이점?
> origin이 가질 수 있는 속성 값
- padding-box : 패딩과 관련, 패딩의 왼쪽 상단에 맞춰서 그려짐(기본값)
- border-box : 테두리와 관련, 테두리의 왼쪽 상단에 맞춰서 그려짐
- content-box : 콘텐츠와 관련, 콘텐츠의 왼쪽 상단에 맞춰서 그려짐
3. background-clip 속성
- 배경색이 그려질 위치를 지정하는 속성
[속성값]
padding-box : 패딩과 관련, 패딩의 왼쪽 상단에 맞춰서 그려짐
border-box : 테두리와 관련, 테두리의 왼쪽 상단에 맞춰서 그려짐(기본값)
content-box : 콘텐츠와 관련, 콘텐츠의 왼쪽 상단에 맞춰서 그려짐
[background-origin과 background-clip 코드 예시]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>2022. 5. 26. - 오전 10:56:34</title>
<style>
div{
border: 10px dotted black;
padding: 50px;
background: yellow url(../images/img_flwr.gif) no-repeat;
}
#demo1{
background-origin: padding-box;
background-clip: padding-box;
}
#demo2{
background-origin: border-box;
background-clip: border-box;
}
#demo3{
background-origin: content-box;
background-clip: content-box;
}
</style>
<body>
<div id="demo1">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis amet nemo doloribus ut neque quo.</p>
</div>
<p></p><!-- 여백 주기용 -->
<div id="demo2">
<h1>Consectetur molestiae unde iste laudantium.</h1>
<p>Provident ea fugit quasi debitis culpa quibusdam quidem reiciendis architecto repellat sint nesciunt ipsum a.</p>
</div>
<p></p><!-- 여백 주기용 -->
<div id="demo3">
<h1>Adipisci hic optio magni nobis!</h1>
<p>Qui quam accusantium dolores asperiores veritatis nisi aspernatur porro illo repudiandae laudantium ipsam quo architecto.</p>
</div>
</body>
</html>
[적용 결과]
4. parallax
- 시차(보는 시각의 차이)
- 보는 시각에 따라서 물체의 위치나 방향의 차이
[적용 결과]
> 여기서 보여지는 배경이미지는 하나의 이미지처럼 보이지만 두개의 이미지이다.
728x90
반응형
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_CSS_days06_CSS로 2D, 3D 변환 작업(transform 속성) (0) | 2022.05.26 |
|---|---|
| [SIST] Web_CSS_days06_gradient 효과 (0) | 2022.05.26 |
| [SIST] Web_CSS_days05_둥근 모서리 설정(border-radius 속성) (0) | 2022.05.26 |
| [SIST] Web_CSS_days05_CSS 특수성(특이성) (0) | 2022.05.26 |
| [SIST] Web_CSS_days05_이미지 스프라이트(image sprites) (0) | 2022.05.26 |