background-color 속성
웹 문서의 요소에 배경색을 지정할 때
16진수나 rgb값, rgba(투명도까지), 색상이름으로 지정 가능
**배경은 상속되지 않는다!
background-clip 속성
배경을 어디까지 적용할 것인지
border-box : 테두리(border포함)까지 적용
padding-box : 테두리만 뺀(padding 포함) 영역까지 적용
content-box : 내용 부분만 적용
background-image 속성
배경 이미지 파일 경로를 지정하여 사용
background-image: url(파일경로);
background-repeat 속성
배경 이미지 반복 여부와 방향
repeat, no-repeat, repeat-x, repeat-y
background-size 속성
배경 이미지 크기 조절
auto, contain(요소 안에 다 들어오도록 확대 혹은 축소, 큰폭에 맞춰 들어감), cover(배경이미지로 요소를 모두 다 덮도록), 크기값, 백분율
background-position 속성
이미지를 반복하지 않을 경우, 표시할 위치 설정
background-position: 수평위치 수직위치;
각각 left, center, right, 백분율, 길이값 중 하나를 넣으면됨
background-origin 속성
배경 이미지를 배치하기 위한 기준을 설정하는 속성
border-box, padding-box, content-box
background-attachment 속성
배경 이미지를 고정하는 속성
스크롤할 때 고정하는지 여부
scroll, fixed
background 속성
묶어서 나열하여 표기할 수 있음
그라데이션
1. 선형 그라데이션
수직이나 수평, 대각선 방향으로 색상이 일정하게 그라데이션
linear-gradient( 각도 to 방향, color-stop, [color-stop, ..]);
방향 : 끝지점을 기준으로 'to'키워드와 함께 사용
각도 : 그라데이션이 끝나는 각도 (deg 단위)
색상 중지점 : linear-gradient(top, blue, white 30%, blue);
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>선형 그라데이션</title>
<style>
div {
width: 500px;
height: 300px;
}
.grad {
background: linear-gradient(to bottom, yellow, white 30%, lime);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>선형 그라데이션</title>
<style>
div {
width: 500px;
height: 300px;
border-radius: 10px;
}
.grad {
background: linear-gradient(to right bottom, purple, blue);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
border-radius: 10px; -> 테두리 둥글게 하는 것.
2. 원형 그라데이션
원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀌는 그라데이션.
모양 : circle, ellipse(기본형)
위치 : radial-gradient(circle at 10% 10%, white, blue);
크기 : closest-side, closest-corner, farthest-side, farthest-corner
색상 중지점 : 색이 바뀌는 지점, radial-gradient(red, yellow, skyblue);
radial-gradient(red, yellow 20%, blue);
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>원형 그라데이션</title>
<style>
div {
width: 500px;
height: 300px;
margin: 10px;
}
.grad {
background: radial-gradient(circle at 70% 70%, blue, purple);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
3. 그라데이션 반복
그라데이션을 반복하는 것이 아닌, 패턴을 만들어 반복시키는 것이다.
background: repeating-linear-gradient(yellow, red 20px);
background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>선형 그라데이션 반복</title>
<style>
div {
width: 500px;
height: 300px;
border-radius: 10px;
margin: 10px;
}
.grad1 {
background: repeating-linear-gradient(lime, green 20px);
}
</style>
</head>
<body>
<div class="grad1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>선형 그라데이션 반복</title>
<style>
div {
width: 500px;
height: 300px;
border-radius: 10px;
margin: 10px;
}
.grad2 {
background: repeating-linear-gradient(lime, lime 20px, green 20px, green 40px);
}
</style>
</head>
<body>
<div class="grad2"></div>
</body>
</html>
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #09 : CSS Layout (0) | 2022.12.13 |
|---|---|
| HTML & CSS #08 : CSS 박스 모델 (0) | 2022.12.13 |
| HTML & CSS #06 : 텍스트 스타일 (0) | 2022.12.13 |
| HTML & CSS #05 : CSS 기본 (0) | 2022.12.13 |
| HTML & CSS : 산술연산 계산기 만들기 (0) | 2022.12.13 |
댓글