| 구분 | 의미 | 표현 방법 |
|---|---|---|
| background-color | 배경색을 지정 | 선택자 { background-color : 색상표현 ; } |
| background-clip | 배경색 범위 조절 구분값 border-box : 박스 모델의 가장 외곽인 테두리까지 적용 padding-box : 테두리를 제외한 패딩 범위까지 적용 content-box : 내용부분만 적용 | 선택자 { background-clip : 구분값 ; } |
| background-image | 요소에 배경 이미지 지정 | 선택자 {background-image : url(경로) ; } |
| background-repeat | 배경 이미지를 반복 출력 구분값 repeat : 브라우저에 가득 찰 때까지 가로/세로 반복 repeat-x : 넓이 만큼 반복 (가로) repeat-y : 높이 만큼 반복 (세로) no-repeat : 이미지를 한번만 출력 | 선택자 { background-repeat : 구분값; } |
| background-size | 배경 이미지의 크기를 조절 구분값 auto : 원래 배경 이미지 크기만큼 표시 contain : 요소안으로 이미지가 들어올 수 있도록 확대/축소 cover : 요소의 범위를 이미지가 덮을 수 있도록 확대/축소 크기값(px) : px 단위 크기로 표현 (가로, 세로) 백분율(%) : % 크기로 표현 (가로, 세로) | 선택자 {background-size : 속성값; } |
| background-position | 배경 이미지 위치를 조정 구분값 수평위치 : left / center / right 수직위치 : top / center / bottom 수치화된 값으로 표현 : (px) / 백분율 | 선택자 {background-position : 수평위치 수직위치; } |
| background-origin | 배경 이미지를 배치 할 때 기준을 지정 구분값 border-box : 테두리가 기준 padding-box : 테두리를 뺀 패딩영역부터 기준 content-box : content부분부터 기준 | 선택자 {background-origin : 구분값; } |
| background-attachment | 웹 페이지에 배경이미지는 움직이지 않게 고정 구분값 scroll : default값, 배경이미지가 움직이게 설정 fixed : 배경이미지가 움직이지 않게 설정 |
|
선형 그라데이션
- 색상이 수직, 수평, 대각선 방향으로 일정하게 변하는 것
👨🎓 작성 방법
선택자 {background : linear-gradient( 각도 | 방향, 시작 색상, \[색상-중간위치], 끝색상; }
| 각도 | 방향 | 색상 | 중간 위치 |
|---|---|---|---|
| - 숫자 deg | - to top : 아래에서 위로 그려지는 그라데이션 - to left : 오른쪽에서 왼쪽으로 그려지는 그라데이션 - to right : 왼쪽에서 오른쪽으로 그려지는 그라데이션 - to bottom : 위에서 아래로 그려지는 그라데이션 | - 색단어 - rgb - 16진수 표기 | - 백분율(%) |
그라데이션 반복 (선형)
- 그라데이션 패턴 요소를 다 채울때까지 반복
👨🎓 작성 방법 (기본 형식)
선택자 { background : repeating-linear-gradient ([각도] , 시작색상, 끝색상 중단위치) ; }
👨🎓 작성 방법 (두가지 색상이 뚜렷하게 하는 방법)
선택자 { background : repeating-linear-gradient (모양, 시작색상, 시작색상 중단위치, 끝색상, 끝색상 중단위치);}
<head>
<meta charset="UTF-8">
<style>
.circle-gradient {
width: 500px;
height: 300px;
border: 1px solid black;
}
#gradient14 {
background: -webkit-repeating-linear-gradient(white, blue, red 30%);
}
#gradient15 {
background: -webkit-repeating-linear-gradient(white, white 10%, blue, blue 20%, red, red 30%);
}
</style>
</head>
<body>
<h4>선형그라데이션 반복</h4>
<div id="gradient14" class="circle-gradient"></div>
<h4>선형그라데이션 반복(색 구분 명확하게)</h4>
<div id="gradient15" class="circle-gradient"></div>
</body>원형 그라데이션
- 색상이 원이나 타원의 중심부터 동심원을 그리며 바깥방향으로 색상 변경
👨🎓 작성 방법
선택자 { background : radial-gradient (위치 | 모양 | 크기 , 시작색상 , 끝색상 [중간위치(%)] ) ; }
| 위치(x, y 좌표) | 모양 | 크기 |
|---|---|---|
| - x축 : left / center / right - y축 : top / center / bottom - 가로, 세로 백분율(%) | - circle : 원형 - ellipse : 타원형 (default 값) | - closest-side : 원 중심에서 가장 가까운 변과의 거리가 원의 지름 크기 - closest-corner : 원 중심에서 가장 가까운 모서리와의 거리가 원의 지름 크기 - farthest-side : 원 중심에서 가장 먼 변과의 거리가 원의 지름 크기 - farthest-corner : 원 중심에서 가장 먼 모서리와의 거리가 원의 지름 크기 |
<head>
<meta charset="UTF-8">
<style>
.circle-gradient {
width: 500px;
height: 300px;
border: 1px solid black;
}
#gradient7 {
background: -webkit-radial-gradient(red, blue, black);
}
#gradient8 {
background: -webkit-radial-gradient(circle, red, blue, black);
}
#gradient9 {
background: -webkit-radial-gradient(left bottom, circle, red, blue, black);
}
#gradient10 {
background: -webkit-radial-gradient(30% 30%, circle closest-side, red 50%, blue 50%);
}
#gradient11 {
background: -webkit-radial-gradient(30% 30%, circle closest-corner, red 50%, blue 50%);
}
#gradient12 {
background: -webkit-radial-gradient(30% 30%, circle farthest-side, red 50%, blue 50%);
}
#gradient13 {
background: -webkit-radial-gradient(30% 30%, circle farthest-corner, red 50%, blue 50%);
}
</style>
</head>
<body>
<h3>원형 그라데이션</h3>
<p>색상이 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 변경되는 것</p>
<h4>색상만 지정</h4>
<div id="gradient7" class="circle-gradient"></div>
<h4>모양 지정</h4>
<div id="gradient8" class="circle-gradient"></div>
<h4>시작점 지정</h4>
<div id="gradient9" class="circle-gradient"></div>
<h4>사이즈 지정</h4>
<div id="gradient10" class="circle-gradient"></div>
<div id="gradient11" class="circle-gradient"></div>
<div id="gradient12" class="circle-gradient"></div>
<div id="gradient13" class="circle-gradient"></div>
</body>
그라데이션 반복 (선형)
- 그라데이션 패턴 요소를 다 채울때까지 반복
👨🎓 작성 방법 (기본 형식)
선택자{background : repeating-radial-gradient(모양, 시작색상, 끝색상 중단위치) ; }
<head>
<meta charset="UTF-8">
<style>
.circle-gradient {
width: 500px;
height: 300px;
border: 1px solid black;
}
#gradient16 {
background: -webkit-repeating-radial-gradient(white, blue, red 30%);
}
#gradient17 {
background: -webkit-repeating-radial-gradient(white, white 10%, blue, blue 20%, red, red 30%);
}
</style>
</head>
<body>
<h4>원형그라데이션 반복</h4>
<div id="gradient16" class="circle-gradient"></div>
<h4>원형그라데이션 반복(색 구분 명확하게)</h4>
<div id="gradient17" class="circle-gradient"></div>
</body>
개발자로 매일 한 걸음