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

학원/복기

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

조가루 2023. 5. 30. 23:31

배경 관련 스타일 속성

background-color

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
body { 
	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) { /* tr에 적용하면 상속으로 인해 td에 적용된다. */
	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>

background-image

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

background-repeat

배경 이미지의 반복관 관련된 스타일 속성
속성값 : repeat(기본), repeat-x, repeat-y, no-repeat

배경 이미지가 박스모델의 폭 또는 높이보다 큰 경우 박스모델을 벗어난 이미지는 잘려서 출력처리 된다.

<title>CSS</title>
<style>
body {
	background-image: url("/web/css/images/bg-img1.png");
	background-repeat: no-repeat;
}

div {
	margin: 0 auto;
	width: 80%;
	height: 400px;
	border: 1px solid red;
	/*bg-img2 이미지의 높이가 1199px이고, 박스모델의 높이는 400px 이기 때문에 잘려서 출력된다.*/
	background-image: url("/web/css/images/bg-img2.png"); 
}
</style>
</head>  
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<div></div>
</body>

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

background-position

배경 이미지의 출력 위치 관련 스타일 속성
속성값 : px, %, 키워드(left, right, top, bottom, center) - 기본값 : left top (왼쪽 상단)

<title>CSS</title>
<style>
div {
	margin: 0 auto;
	width: 50%;
	height: 300px;
	border: 1px solid red;
	/* 박스모델의 폭 또는 높이보다 작은 배경이미지를 반복 출력하지 않은 경우 배경 이미지는
	박스모델의 왼쪽 상단을 기준으로 출력된다.*/
	background-image: url("/web/css/images/bg.png");
	background-repeat: no-repeat;
	
	/*background-position: 200px 100px; /* X(가로)방향으로 200px, Y(세로)방향으로 100px 이동 */
	/*background-position: 30%, 60% */
	/* background-position: center; */ /*배경 이미지의 출력 위치를 키워드가 가르키는 위치로 이동해 출력 */
	background-position: right bottom; /* 오른쪽 하단으로 이동 */ 
}
</style>
</head>
<body>
	<h1>배경 관련 스타일 속성</h1>
	<hr>
	<div>오늘은 화요일 입니다. 내일은 쉬는 날입니다.</div>
</body>
</html>

background-attachment

배경 이미지 고정 관련 스타일 속성
속성값 : scroll(기본값 - 스크롤), fixed(브라우저 고정)

background

: 배경 관련 모든 스타일 속성값을 설정할 수 있는 속성

<title>CSS</title>
<style type="text/css">
body {
	background-image: url("images/bg.png");
	background-repeat: no-repeat; 
	background-position: right bottom;  
	background-attachment: fixed; 
	
	background: url("images/bg.png") no-repeat right bottom fixed;  
}
</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>
</body>

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

속성값이 auto(기본값)일 경우, 배경 이미지를 그대로 출력한다.(여백이 발생하거나 이미지가 잘린다.)
속성값을 이용해 배경 이미지의 폭을 px 단위로 변경 - 이미지 비율에 맞게 높이는 자동 변경된다.
속성값을 이용해 배경 이미지의 폭과 높이를 px 단위로 변경
속성값을 이용해 배경 이미지의 폭을 % 단위로 변경 - 이미지 비율에 맞게 높이는 자동 변경된다.
속성값을 이용해 배경 이미지의 폭과 높이를 % 단위로 변경
contain : 배경 이미지의 폭과 높이 중 차이가 작은 부분을 100%로 설정 - 차이가 큰 부분은 여백 발생
cover : 배경 이미지의 폭과 높이 중 차이가 큰 부분을 100%로 설정 - 차이가 작은 부분은 잘림 발생

border는 박스모델의 외곽을 뜻한다.

background-clip

배경 이미지의 적용범위 관련 스타일 속성
속성값
- border-box(기본값) - 외곽선 바깥쪽
- padding-box - 외곽선 안쪽
- content-box - 내용 출력 영역

<title>CSS</title>
<style>
div {
	width : 400px;
	margin: 10px;
	padding: 20px;
	border: 10px solid red;
	background: url("/web/css/images/bg.png") no-repeat right bottom;
}

.clip1 { background-clip: border-box; } 
.clip2 { background-clip: padding-box; } 
.clip3 { background-clip: content-box; } 
</style>
</head>
<body>
	<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>

background 속성값으로 linear-gradient 함수를 사용할 수 있다.

linear-gradient

엘리먼트에 선형 그라데이션 효과를 제공하는 함수
그라데이션(Gradation) 효과 : 색이 한쪽 방향으로 일정하게 변화되어 출력되는 효과
형식) linear-gradient(진행방향, 시작색, 종료색)
→ 진행방향 : 각도(deg), 키워드(to left, to right, to top, to bottom)
시작색 뒤에 중간색 표현이 가능하다 - 중간색에는 백분율을 사용하면 된다
중간색에 백분율이 생략된 경우에 50%로 자동 처리 된다.

radial-gradient

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

CSS 표준규약에 정의되어 있지 않고, 특정 웹브라우저에서만 사용 가능한 스타일 속성값이 존재한다.
-webkit- : 웹킷 방식의 웹브라우저 - 크롬, 사파리, 엣지 등
-moz- : 개코 방식의 웹브라우저 - 파이어폭스, 모질라 등
-o- : 오페라 방식의 웹브라우저 - 오페라 등
-ms- : 트라이던트 방식의 웹브라우저 - IE 등

ex)

background: -webkit-radial-gradient(70% 70%, circle, white, blue);

>> webkit 브라우저에서만 가능

<title>CSS</title>
<style type="text/css">
div {
	width: 500px;
	height: 300px;
	border: 1px solid black;
	margin: 20px;
}

/*linear-gradient*/
.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);	 
}

/*radial-gradient*/ 
.grad2 {
	background: radial-gradient(circle, white, blue);
	/*CSS 표준규약에 정의되어 있지 않고, 특정 웹브라우저에서만 사용 가능한 스타일 속성값이 존재*/
	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>

저작자표시 (새창열림)

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

배경 관련 스타일 속성

background-color

background-image

background-repeat

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

background-attachment

background

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

border는 박스모델의 외곽을 뜻한다. background-clip

linear-gradient

radial-gradient

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

background-position

border는 박스모델의 외곽을 뜻한다.

background-clip