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

티스토리툴바