○ 원형 그라데이션
앞서 살펴본 선형 그라데이션은 직선 형태의 방향으로 색상이 변경되었습니다. 원형 그라데이션은 (타)원의 중심으로부터 동심원을 그리며 바깥 방향으로 색상이 변형되는 형태입니다. 일단 아래와 같은 형태로 기본형을 살펴보고, 속성 별로 하나씩 살펴보겠습니다.
선택자 {
background: radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>,...]);
}
- 모양
기본적으로 원형 그라데이션에서 지원하는 모양은 두 가지 입니다. 바로 원형(circle)과 타원형(ellipse)이죠. 참고로 모양을 지정하지 않으면 디폴트 값은 타원형으로 지정됩니다. 아래의 예제를 참고해 주시기 바랍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
div {
width: 550px;
height: 350px;
margin: 10px;
}
.grad1 {
background: red;
background: radial-gradient(white, yellow, blue);
}
.grad2 {
background: red;
background: radial-gradient(circle, white, yellow, blue);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
위의 예제를 실행하면 아래와 같이 두 개의 원형 그라데이션을 확인할 수 있습니다. grad1의 경우, 별도로 원형 모양을 지정하지 않았기 때문에 타원형으로 그라데이션이 생성되었습니다.
- 크기
원형 그라데이션에서의 크기는, 자신을 둘러싼 요소와 관련하여 측면 또는 코너에 닿을지를 결정하여 크기를 정하게 됩니다. 정확한 크기 보다는 일정한 예약 키워드를 통해서 크기를 지정하게 되는, 다소 제약이 많은 구조이지요.
대표적인 구분은 side와 corner입니다. 가장 가까운 위치의 측면 또는 코너에 닿는 크기로 원을 그리거나, 혹은 가장 멀리 떨어진 측면 또는 코너에 닿는 크기로 원을 그리게 됩니다.
* closest-side : 원형일 경우 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 측면에 닿는 크기로 그립니다. 타원형일 경우, 그라데이션 중심에서 가장 가까운 요소의 가로 측면이나 세로 측면이 닿을 때까지 그립니다.
* closest-corner : 그라데이션의 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그립니다.
* farthest-side : 원형일 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 요소의 측면에 닿는 크기로 그립니다. 타원형일 경우, 그라데이션 중심에서 가장 먼 요소의 가로 또는 세로 측면에 닿을 때까지 그립니다.
* farthest-corner : 그라데이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 그립니다. 이 값이 [기본값]입니다.
아래의 적용 예제를 통해 확인해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
li {
display:inline-block;
width:300px;
height:300px;
border:1px solid black;
margin:10px;
}
#div1{
background:yellowgreen;
background:radial-gradient(circle closest-side at 30% 40%, white, yellow, red);
}
#div2{
background:yellowgreen;
background:radial-gradient(circle closest-corner at 30% 40%, white, yellow, red);
}
#div3{
background:yellowgreen;
background:radial-gradient(circle farthest-side at 30% 40%, white, yellow, red);
}
#div4{
background:yellowgreen;
background:radial-gradient(circle farthest-corner at 30% 40%, white, yellow, red);
}
</style>
</head>
<body>
<ul>
<li id="div1"></li>
<li id="div2"></li>
<li id="div3"></li>
<li id="div4"></li>
</ul>
</body>
</html>
div1은 왼쪽의 가장 가까운 측면에 닿는 사이즈이고, div2는 원의 가장 가까운 코너인 왼쪽 위 코너에 닿는 사이즈로 생성됩니다. div3은 가장 먼 우측 측면에 닿는 사이즈이고, div4는 가장 먼 코너인 우측 아래에 적용되었습니다.
- 위치
위의 원형 그라데이션 예시를 보면, 색상이 방사되는 지점은 당연하다는 듯이 원의 중심에서 이루어지고 있습니다. 이 방사 지점의 위치를 속성 값을 통해서 조정할 수 있게 됩니다.
우선 이 위치 속성은 지정된 키워드 [left / center / right]와 [top / center / bottom]으로 지정할 수 있습니다. 혹은 [백분율 백분율] 형식으로도 지정이 가능하죠. 위치 속성 값은 circle at 50% 40% 같은 형태로 지정이 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
div {
width:300px;
height:300px;
border-radius:50%;
box-shadow: 10px 5px 10px #ccc;
}
.grad {
background: yellowgreen;
background: radial-gradient(circle at 20% 20%,white,yellowgreen);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
- 색상 중지점
색상 중지점 역시 선형 그라데이션과 동일한 방식으로, 색상이 바뀌는 지점을 의미합니다. 이 역시 위치 값도 함께 지정이 가능합니다. 원 안쪽부터 노란색 -> 흰색 -> 푸른색으로 색상 중지점을 지정해 보았습니다. 위치값을 지정할 때와 지정하지 않을 때의 차이점도 함께 확인해 보시기 바랍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
div {
width:500px;
height:300px;
margin:10px;
}
.grad1{
background:blueviolet;
background:radial-gradient(yellow, white, blue);
}
.grad2{
background: blueviolet;
background:radial-gradient(yellow, white 10%, blue 50%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
ㅇㅇㅇ
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 6. 고급 선택자(1) - 연결 선택자 1 (0) | 2023.05.20 |
|---|---|
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과3 (0) | 2023.05.16 |
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과1 (0) | 2023.05.13 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 5 (0) | 2023.05.10 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 4 (0) | 2023.05.09 |
