[CSS 3-1] 배경 관련 스타일 속성

임승현·2022년 11월 14일

CSS

목록 보기
9/14

🐧배경 관련 스타일 속성-1

🎨background-color : 배경색 관련 스타일 속성 - 색 관련 속성값

📌background-color : 배경색 관련 스타일 속성 - 색 관련 속성값

📃17_background_color.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
body {
	/* background-color : 배경색 관련 스타일 속성 - 색 관련 속성값 */
	background-color: silver;
}
div {
	margin: 0 auto;
	width: 50%;
	height: 150px;
	border: 1px solid red;
	font-size: 30px;
	background-color: #ff0;
}
table {
	margin: 10px auto;
	width: 50%;
}
th {
	color: #fff;
	background-color: #0c5775;
}
tr:nth-child(2n-1) {
	background-color: lime;
}
tr:nth-child(2n) {
	background-color: aqua;
}
</style>
</head>
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<div>배경색을 설정해 보세요.</div>
	<hr>
	<table>
		<tr>
			<th>번호</th><th>이름</th><th>주소</th>
		</tr>
		<tr>
			<td>1000</td><td>홍길동</td><td>서울시 강남구</td>
		</tr>
		<tr>
			<td>2000</td><td>임꺽정</td><td>부산시 사하구</td>
		</tr>
		<tr>
			<td>3000</td><td>전우치</td><td>수원시 팔달구</td>
		</tr>
		<tr>
			<td>4000</td><td>일지매</td><td>부천시 원미구</td>
		</tr>
		<tr>
			<td>5000</td><td>장길산</td><td>인천시 남동구</td>
		</tr>
	</table>
</body>
</html>

🐧배경 관련 스타일 속성-2

🎨background-image : 배경 이미지 관련 스타일 속성

📌background-image : 배경 이미지 관련 스타일 속성

◈ 속성값 : url 함수를 사용하여 이미지 파일의 URL 주소를 설정
◈ 배경 이미지가 박스 모델의 폭 또는 높이보다 작은 경우 가로 방향(X) 또는 세로 방향(Y)으로 이미지가 반복 출력

background-image: url("images/bg-img1.png");


─────────────────────────────────────

background-repeat: no-repeat;

◈ 배경 이미지가 박스모델의 폭 또는 높이보다 큰 경우 박스모델을 벗어난 이미지는 잘라내어 출력

div {
	margin: 0 auto;
	width: 80%;
	height: 400px;
	border: 1px solid red;
	background-image: url("images/bg-img2.png");
}

🐧배경 관련 스타일 속성-3

🎨background-position : 배경 이미지의 출력 위치 관련 스타일 속성

◈ 박스모델의 폭 또는 높이보다 작은 배경 이미지를 반복적으로 출력하지 않을 경우 배경 이미지는 박스모델의 왼쪽 상단을 기준으로 출력

background-image: url("images/bg.png");
background-repeat: no-repeat;

📌background-position : 배경 이미지의 출력 위치 관련 스타일 속성

◈ 속성값 : px, %, 키워드(left, right, top, bottom, center) - 기본값 : left top
◈ 배경 이미지의 출력 위치를 왼쪽 상단을 기준으로 가로(X)와 세로(Y) 방향으로 이동

background-position: 200px 100px;


─────────────────────────────────────

background-position: 30% 60%;


─────────────────────────────────────
◈ 배경 이미지의 출력 위치를 키워드를 기준으로 출력

background-position: center


─────────────────────────────────────

background-position: right bottom;

📃19_background_position.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	margin: 0 auto;
	width: 50%;
	height: 300px;
	border: 1px solid red;
	/* 박스모델의 폭 또는 높이보다 작은 배경 이미지를 반복적으로 출력하지 않을 경우 배경 이미지는 박스모델의 왼쪽 상단을 기준으로 출력 */
	background-image: url("images/bg.png");
	background-repeat: no-repeat;
	/* background-position : 배경 이미지의 출력 위치 관련 스타일 속성 */
	/* 속성값 : px, %, 키워드(left, right, top, bottom, center) - 기본값 : left top */
	/* 배경 이미지의 출력 위치를 왼쪽 상단을 기준으로 가로(X)와 세로(Y) 방향으로 이동 */
	/*background-position: 200px 100px;*/
	/*background-position: 30% 60%;*/
	/* 배경 이미지의 출력 위치를 키워드를 기준으로 출력 */
	/*background-position: center;*/
	background-position: right bottom;
}
</style>
</head>
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<div>오늘은 월요일입니다. 이번주가 시작되는 날입니다.</div>
</body>
</html>

🐧배경 관련 스타일 속성-4

🎨background-attachment : 배경 이미지 고정 관련 스타일 속성

📌background-attachment : 배경 이미지 고정 관련 스타일 속성

◈ 속성값 : scroll(기본 - 스크롤), fixed(브라우저 고정)

body {
	background-image: url("images/bg.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-attachment: fixed;
}


─────────────────────────────────────

📌background : 배경 관련 모든 스타일 속성값 설정

background : url("images/bg.png") no-repeat right bottom;

📃20_background-attachment.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
body {
	background-image: url("images/bg.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	/* background-attachment : 배경 이미지 고정 관련 스타일 속성 */
	/* 속성값 : scroll(기본 - 스크롤), fixed(브라우저 고정) */
	background-attachment: fixed;
	/* background : 배경 관련 모든 스타일 속성값 설정 */
	background : url("images/bg.png") no-repeat right bottom;
}
</style>
</head>
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

🐧배경 관련 스타일 속성-5

🎨background-size : 배경 이미지의 크기 관련 스타일 속성

📌background-size : 배경 이미지의 크기 관련 스타일 속성

◈ 속성값 : auto(기본) - 배경 이미지를 그대로 출력

.bgsize1 { background-size: auto;}


─────────────────────────────────────
◈ 속성값 : 배경 이미지의 폭을 px 단위로 변경 - 이미지 비율에 맞게 높이가 자동 조절

.bgsize2 { background-size: 300px;}


─────────────────────────────────────
◈ 속성값 : 배경 이미지의 폭과 높이를 px 단위로 변경

.bgsize3 { background-size: 400px 350px;}


─────────────────────────────────────
◈ 속성값 : 배경 이미지의 폭을 % 단위로 변경

.bgsize4 { background-size: 90%;}


─────────────────────────────────────
◈ 속성값 : 배경 이미지의 폭과 높이를 % 단위로 변경

.bgsize5 { background-size: 100% 100%;}


─────────────────────────────────────
◈ 속성값 : contain - 배경 이미지의 폭과 높이 중 차이가 작은 부분을 100% 설정 - 차이가 큰 부분은 여백 설정

.bgsize6 { background-size: contain;}


─────────────────────────────────────
◈ 속성값 : cover - 배경 이미지의 폭과 높이 중 차이가 큰 부분을 100%로 설정 - 차이가 작은 부분은 잘림 발생

.bgsize7 { background-size: cover;}

📃21_backgroung_size.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	width: 500px;
	height: 350px;
	border: 1px solid red;
	margin: 20px;
	/* station.jpg : 595*400 - 배경 이미지가 박스모델의 크기보다 큰 경우 이미지 잘림 발생 */
	background: url("images/station.jpg") no-repeat;
}
/* background-size : 배경 이미지의 크기 관련 스타일 속성 */
/* 속성값 : auto(기본) - 배경 이미지를 그대로 출력 */
.bgsize1 { background-size: auto;}
/* 속성값 : 배경 이미지의 폭을 px 단위로 변경 - 이미지 비율에 맞게 높이가 자동 조절 */
.bgsize2 { background-size: 300px;}
/* 속성값 : 배경 이미지의 폭과 높이를 px 단위로 변경 */
.bgsize3 { background-size: 400px 350px;}
/* 속성값 : 배경 이미지의 폭을 % 단위로 변경 */
.bgsize4 { background-size: 90%;}
/* 속성값 : 배경 이미지의 폭과 높이를 % 단위로 변경 */
.bgsize5 { background-size: 100% 100%;}
/* 속성값 : contain - 배경 이미지의 폭과 높이 중 차이가 작은 부분을 100% 설정 - 차이가 큰 부분은 여백 설정 */
.bgsize6 { background-size: contain;}
/* 속성값 : cover - 배경 이미지의 폭과 높이 중 차이가 큰 부분을 100%로 설정 - 차이가 작은 부분은 잘림 발생*/
.bgsize7 { background-size: cover;}
</style>
</head>
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<div class="bgsize1"></div>
	<div class="bgsize2"></div>
	<div class="bgsize3"></div>
	<div class="bgsize4"></div>
	<div class="bgsize5"></div>
	<div class="bgsize6"></div>
	<div class="bgsize7"></div>
</body>
</html>

🐧배경 관련 스타일 속성-6

🎨background-clip : 배경의 적용범위 관련 스타일 속성

📌background-clip : 배경의 적용범위 관련 스타일 속성

◈ 속성값 : border-box(기본) - 외곽선 바깥쪽

.clip1 { background-clip: border-box;}


─────────────────────────────────────
◈ 속성값 : padding-box - 외곽선 안쪽

.clip2 { background-clip: padding-box;}


─────────────────────────────────────
◈ 속성값 : content-box - 내용 출력 영역

.clip3 { background-clip: content-box;}

📃22_backgroung_clip.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	width: 400px;
	margin: 10px;
	padding: 20px;
	border: 10px solid red;
	background: url("images/bg.png") no-repeat right bottom;
}
/* background-clip : 배경의 적용범위 관련 스타일 속성 */
/* 속성값 : border-box(기본) - 외곽선 바깥쪽 */
.clip1 { background-clip: border-box;}
/* 속성값 : padding-box - 외곽선 안쪽 */
.clip2 { background-clip: padding-box;}
/* 속성값 : content-box - 내용 출력 영역 */
.clip3 { background-clip: content-box;}
</style>
</head>
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<div class="clip1">
		<p>border box</p>
		<p>border box</p>
		<p>border box</p>
		<p>border box</p>
		<p>border box</p>
	</div>
	<div class="clip2">
		<p>padding box</p>
		<p>padding box</p>
		<p>padding box</p>
		<p>padding box</p>
		<p>padding box</p>
	</div>
	<div class="clip3">
		<p>content box</p>
		<p>content box</p>
		<p>content box</p>
		<p>content box</p>
		<p>content box</p>
	</div>
</body>
</html>

🐧배경 관련 스타일 속성-7

🎨background 속성값으로 linear-gradient 함수 사용

🎨background 속성값으로 radial-gradient 함수 사용

📌background 속성값으로 linear-gradient 함수 사용

◈ linear-gradient : 엘리먼트에 선형 그라데이션 효과를 제공하는 함수
◈ 그라데이션(Graduention) 효과 : 색이 한쪽방향으로 일정하게 변화되어 출력되는 효과
형식) linear-gradient(진행방향, 시작색, 종료색)
→ 진행방향 : 각도(deg), 키워드(to left, to right, to top, to bottom)

.grad1 {
	background: linear-gradient(45deg, red, white);
	background: linear-gradient(135deg, blue, white);
	background: linear-gradient(to bottom, green, white);
	/* 시작색 뒤에 중간색 중간 표현 가능 - 중간색에 백분율 사용 */
	background: linear-gradient(225deg, olive, white 30%, olive);
	/* 중간색에 백분율이 생략된 경우 자동으로 50%로 사용 */	
	background: linear-gradient(to right, yellow, orange, red);
}

📌background 속성값으로 radial-gradient 함수 사용

◈ radial-gradient : 엘리먼트에 원형 그라데이션 효과를 제공하는 함수
형식) radial-gradient(모양, 시작색, 종료색)
◈ 모양 : circle, ellipse
→ 원의 중심위치는 박스모델의 가운데로 설정
→ 원의 중심위치 변경 가능 - 특정 브라우저에서만 가능

.grad2 {
	background: radial-gradient(circle, white, blue);
	/* CSS 표준규약에 정의되어 있지 않고 특정 웹브라우저에만 사용 가능한 스타일 속성값 존재 */
	/* -webkit- : 웹킷 방식의 웹브라우저 - 크롬, 사파리, 엣지 등 */
	/* -moz- : 개코 방식의 웹브라우저 - 파이어폭스, 모질라 등 */
	/* -o- : 오페라 방식의 웹브라우저 - 오페라 등 */
	/* -ms : 트라이던트 방식의 웹브라우저 - IE 등 */
	background: -webkit-radial-gradient(70% 70%,circle, white, blue);
	background: radial-gradient(ellipse, white, orange 30%, red);
	background: radial-gradient(ellipse, white, aqua, blue);
}

📃23_backgroung_gradient.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	width: 500px;
	height: 300px;
	border: 1px solid black;
	margin: 20px;
}
/* background 속성값으로 linear-gradient 함수 사용 */
/* linear-gradient : 엘리먼트에 선형 그라데이션 효과를 제공하는 함수 */
/* 그라데이션(Graduention) 효과 : 색이 한쪽방향으로 일정하게 변화되어 출력되는 효과 */
/* 형식) linear-gradient(진행방향, 시작색, 종료색) */
/* → 진행방향 : 각도(deg), 키워드(to left, to right, to top, to bottom) */
.grad1 {
	background: linear-gradient(45deg, red, white);
	background: linear-gradient(135deg, blue, white);
	background: linear-gradient(to bottom, green, white);
	/* 시작색 뒤에 중간색 중간 표현 가능 - 중간색에 백분율 사용 */
	background: linear-gradient(225deg, olive, white 30%, olive);
	/* 중간색에 백분율이 생략된 경우 자동으로 50%로 사용 */	
	background: linear-gradient(to right, yellow, orange, red);
}
/* background 속성값으로 radial-gradient 함수 사용 */
/* radial-gradient : 엘리먼트에 원형 그라데이션 효과를 제공하는 함수 */
/* 형식) radial-gradient(모양, 시작색, 종료색) */
/* 모양 : circle, ellipse */
/* → 원의 중심위치는 박스모델의 가운데로 설정 */
/* → 원의 중심위치 변경 가능 - 특정 브라우저에서만 가능 */
.grad2 {
	background: radial-gradient(circle, white, blue);
	/* CSS 표준규약에 정의되어 있지 않고 특정 웹브라우저에만 사용 가능한 스타일 속성값 존재 */
	/* -webkit- : 웹킷 방식의 웹브라우저 - 크롬, 사파리, 엣지 등 */
	/* -moz- : 개코 방식의 웹브라우저 - 파이어폭스, 모질라 등 */
	/* -o- : 오페라 방식의 웹브라우저 - 오페라 등 */
	/* -ms : 트라이던트 방식의 웹브라우저 - IE 등 */
	background: -webkit-radial-gradient(70% 70%,circle, white, blue);
	background: radial-gradient(ellipse, white, orange 30%, red);
	background: radial-gradient(ellipse, white, aqua, blue);
}
</style>
</head>
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<div class="grad1"></div>
	<div class="grad2"></div>
</body>
</html>

profile
임승현
이전 포스트

[CSS 2-6] 글자색 관련 스타일 속성

다음 포스트

[CSS 3-2] 박스모델 관련 스타일 속성

0개의 댓글