그라데이션 자체를 실제로 CSS 요소를 사용해서 많이 사용하지는 않을 것입니다. 이번 아티클부터 다루는 다양한 그라데이션 효과 표현은 CSS의 구성 요소의 다양한 기능을 익혀보고 사용해 보는데 의의를 두고 가볍게 학습하시기 바랍니다.
○ 선형 그라데이션(linear-gradient)
우선 가장 기본적인 그라데이션 형태인, 선형 그라데이션을 살펴보겠습니다. 일단 기본적인 속성 형태는 아래와 같습니다. 실제 사용 방식은 하나씩 짚어보겠습니다.
선택자 {
background: linear-gradint(to <방향> | <각도>, <색상 중지점>, [<색상 중지점>, ...]);
}
위에서 background 속성 값에 선형 그라데이션을 적용한 케이스로 예시를 들었습니다. 실제로 사용하면서 속성 값을 적용하는 방식을 알아보겠습니다.
- 선형 그라데이션 방향
방향은 예약어를 사용해 지정합니다. left or right, 그리고 top or bottom을 사용하게 됩니다. 예약어 to를 이용해 표현하게 되는데, 예를 들어 to left, to top bottom, to bottom right... 이런 식으로 그라데이션 적용 방향을 설정할 수 있습니다. 만일 이를 생략하게 되면 적용되는 디폴트 값은 to bottom입니다.
아래와 같이 적용한 사례를 보겠습니다. to right top을 적용하면, 자연스럽게 왼쪽 하단에서 우측 상단 방향으로 그라데이션이 적용됩니다. (더불어 이 경우, div의 백그라운드 컬러를 yellow로 지정한 것은 CSS3를 지원하지 않는 경우를 위한 것입니다)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
div {
width: 600px;
height: 400px;
border-radius: 15px;
}
.grad {
background: yellow;
background: linear-gradient(to right top, yellow, white);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
- 선형 그라데이션 각도
각도를 이용해서도 선형 그라데이션의 방사 방향을 지정할 수 있습니다. deg단위로 표시해 지정할 수 있고, 사용 방법은 위치 지정 방식과 비슷합니다. 각도를 작성하면 아래의 그림에 따라 해당하는 위치로 향하게 됩니다. 45deg를 적용해 방사되는 방향을 확인하고, 활용해 보도록 합시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
div {
width: 600px;
height: 400px;
border-radius: 15px;
}
.grad {
background: blue;
background: linear-gradient(45deg, blue, white);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
- 색상 중지(stop)점
두 가지 이상의 색을 이용한 선형 그라데이션을 지정해 만들 때, 색상이 바뀌는 지점이 존재하게 됩니다. 그라데이션에서 바뀌는 색을 색상 중지점(color-stop)으로 표시하는데, 중지점의 색상과 위치까지 지정할 수 있습니다. 그리고 이 경우에는 쉼표를 사용하죠.
바로 위에서 만들었던 예시에 적용해 살펴보겠습니다. 바로 위의 예제에서 중간의 컬러 지정만 바꾸어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
div {
width: 600px;
height: 400px;
border-radius: 15px;
}
.grad {
background: blue;
background: linear-gradient(45deg, blue, white 50%, blue);
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
45도 방향으로 방사하는데, 파란색으로 시작해서 50%(중간) 지점에서 하얀색으로 중지점이 발생하고 끝나는 지점의 색이 파란색이 됩니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과3 (0) | 2023.05.16 |
|---|---|
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과2 (0) | 2023.05.15 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 5 (0) | 2023.05.10 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 4 (0) | 2023.05.09 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 3 (0) | 2023.05.06 |
