반응형
1. 배경색 관련 스타일 속성
17_background_color.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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. 배경이미지 관련 스타일 속성
18_background_image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
body{
/* 🎀 background-image : 배경 이미지 관련 스타일 속성 */
/* 속성값 : URL함수를 사용하여 이미지 파일의 URL 주소를 설정 */
/* 배경 이미지가 박스모델의 폭 또는 높이보다 작은 경우 가로 방향(X) 또는 세로 방향(Y)으로 이미지가 반복 출력 */
background-image: url("images/bg-img1.png");
/* 🎀 background-repeat : 배경 이미지 반복 관련 스타일 속성 */
/* 속성값 : repeat(기본 - 가로와 세로 방향으로 반복), repeat-x (가로방향 반복), repeat-y(세로방향 반복) , no-repeat(미반복) */
background-repeat: no-repeat;
}
div{
margin: 0 auto;
width: 80%;
height: 400px;
border: 1px solid red;
/* 배경 이미지가 박스모델의 폭 또는 높이보다 큰 경우 박스모델을 벗어난 이미지는 잘라내어 출력된 */
background-image: url("images/bg-img2.png");
background-repeat: repeat; /*기본값*/
}
</style>
</head>
<body>
<h1>배경 관련 스타일 속성</h1>
<hr>
<div></div>
</body>
</html>
3. 배경이미지 위치 관련 스타일 속성
19_background_postion.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</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. 배경이미지 고정 관련 스타일 속성
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 fixed;
}
</style>
</head>
<body>
<h1>배경 관련 스타일 속성</h1>
<hr>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
... (스크롤이 생길 만큼 아주 많이..)
</body>
</html>
5. 배경이미지 크기 관련 스타일 속성
21_background_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;
color : white;
font-size : 50px;
/* station.jpg : 1280 * 853px - 배경 이미지가 박스모델의 크기보다 큰 경우 이미지 잘림 발생 */
background: url("https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg") no-repeat;
}
/* 🎀 background-size : 배경 이미지의 크기 관련 스타일 속성 */
/* 속성값 : auto(기본) - 배경 이미지를 그대로 출력 */
.bgsize1 { background-size: auto; }
/* 속성값 : 배경 이미지의 폭을 px 단위로 변경 - 이미지 비율에 맞게 높이 자동 설정 */
.bgsize2 { background-size: 300px; }
/* 속성값 : 배경 이미지의 폭과 높이를 px 단위로 변경 */
.bgsize3 { background-size: 300px 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">bgsize1</div>
<div class="bgsize2">bgsize2</div>
<div class="bgsize3">bgsize3</div>
<div class="bgsize4">bgsize4</div>
<div class="bgsize5">bgsize5</div>
<div class="bgsize6">bgsize6</div>
<div class="bgsize7">bgsize7</div>
</body>
</html>
6. 배경이미지 적용범위 관련 스타일 속성
22_background_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. 배경색 그라데이션 관련 스타일 속성
23_background_gradient.html
1) linear-gradient(45deg, red, white)
<!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);
}
</style>
</head>
<body>
<h1>배경 관련 스타일 속성</h1>
<hr>
<div class="grad1"></div>
</body>
</html>
2) linear-gradient(135deg, blue, white)
.grad1 {
background: linear-gradient(135deg, blue, white);
}
3) linear-gradient(to bottom, green, white)
.grad1{
background: linear-gradient(to bottom, green, white);
}
4) linear-gradient(225deg, olive, white 30%, olive)
/* 시작색 뒤에 중간색 중간 표현 가능 - 중간색에 백분율 사용*/
.grad1{ background: linear-gradient(225deg, olive, white 30%, olive); }
5) linear-gradient(to right, yellow, orange, red)
/* 중간색에 백분율이 생략된 경우 자동으로 50% 사용*/
.grad1{ background: linear-gradient(to right, yellow, orange, red); }
6) radial-gradient(circle, white, blue)
<!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 속성값으로 radial-gradient 함수 사용 */
/* radial-gradient : 엘리먼트에 원형 그라데이션 효과를 제공하는 함수 */
/* 형식)radial-gradient(모양, 시작색, 종료색) */
/* 모양 : circle, ellipse */
/* => 원의 중심위치는 박스모델의 가운데로 설정 */
/* => 원의 중심위치 변경 가능 - 특정 브라우저에서만 가능 */
.grad2 {
background: radial-gradient(circle, white, blue);
}
</style>
</head>
<body>
<h1>배경 관련 스타일 속성</h1>
<hr>
<div class="grad2"></div>
</body>
</html>
7) -webkit-radial-gradient(70% 70%, circle, white, blue)
/* CSS 표준규약에 정의되어있지 않고 특정 웹브라우저에만 사용 가능한 스타일 속성값*/
/* -webkit- : 웹킷 방식의 브라우저 - 크롬(어디서든사용많이함), 사파리(맥), 엣지(윈도우) 등 */
/* -moz- : 개코 방식의 브라우저 - 파이어폭스(리눅스), 모질라(리눅스) 등 */
/* -o- : 오페라 방식의 브라우저 - 오페라 등 */
/* -ms- : 트라이던트 방식의 브라우저 - IE 등 */
.grad2{ background: -webkit-radial-gradient(70% 70%, circle, white, blue); }
8) radial-gradient(ellipse, white, orange 30%, red)
.grad2{ background: radial-gradient(ellipse, white, orange 30%, red); }
9) radial-gradient(ellipse, white, aqua, blue)
.grad2{ background: radial-gradient(ellipse, white, aqua, blue); }
반응형
'web > css' 카테고리의 다른 글
| [css] 7. 테이블 구조 관련 스타일 속성 (0) | 2024.05.03 |
|---|---|
| [css] 6. 박스모델 관련 스타일 속성 (0) | 2024.05.02 |
| [css] 4. 문장(텍스트) | 목록 | 글자색 관련 스타일 속성 (0) | 2024.05.01 |
| [css] 3. 글꼴 | 글자 | 글자간격 | 공백 관련 스타일 속성 (0) | 2024.05.01 |
| [css] 2. 선택자(selector) (1) | 2024.04.30 |
