반응형
border-radius와 마찬가지로 특정 요소의 배경에 그라디언트 색상을 지정하기 위해서는 일일이 포토샵에서 이미지 작업을 한 뒤, CSS에서 background 속성을 지정해 줘야 했습니다. 하지만 CSS3 gradient를 이용하면 간단히 CSS의 코드 수정만으로도 원하는 그라디언트의 모양과 색을 자유자재로 변형할 수 있습니다.
(1) background : 그라디언트 모양(방향, 색상1, 색상2);
※ 그라디언트의 색상의 개수는 원하는 만큼 추가할 수 있습니다.
그라디언트의 모양에는 선형 그라디언트와 원형 그라디언트가 있습니다.
다음의 예제를 통해 gradient 속성 값에 따라 달라지는 모양의 변화를 확인해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>gradient</title>
<style>
div {
width: 200px;
height: 200px;
margin: 50px;
float: left;
}
div:nth-child(1) { background:linear-gradient(to right, pink, dodgerblue);}
div:nth-child(2) { background:linear-gradient(to bottom, pink, dodgerblue);}
div:nth-child(3) { background:linear-gradient(45deg, pink, dodgerblue);}
div:nth-child(4) { background:radial-gradient(pink, dodgerblue);}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>4개의 <div>를 생성한 후 <div>에 공통으로 넓이와 높이 값을 지정해 준 후, nth-child를 이용하여 각각의 <div>에 gradient 속성을 달리 적용해줍니다. 첫 번째 <div>는 오른쪽으로 선형의 그라디언트 색을 지정, 두 번째 <div>는 아래 방향으로 선형의 그라디언트 색을 지정, 세 번째 <div>는 각도 값을 지정해 45도 방향의 사선으로 그라디언트 색을 지정해줍니다. 마지막 네 번째 <div>는 원형의 그라디언트 색을 지정합니다.
각각의 결과 값은 위와 같습니다. 다양하게 그라디언트의 모양, 방향, 색상을 변경하여 테스트 해보기 바랍니다.
반응형
'💕IT 공부하기 > CSS3' 카테고리의 다른 글
| [CSS3] box-sizing : 볼록 요소의 넓이와 높이 값 안에 padding과 border 값 포함하기 (0) | 2023.04.25 |
|---|---|
| [CSS3] background-size : 배경 이미지의 크기 조절하기 (0) | 2023.04.24 |
| [CSS3] border-radius : 사각형의 모서리를 둥글게 하기 (0) | 2023.04.19 |
| [CSS3] text-shadow, box-shadow 글자와 박스에 그림자 생성하기 (0) | 2023.04.17 |
| [CSS3] CSS가상 선택자 정리 및 비교 (first-child, last-child, nth-child, nth-of-type, ) (0) | 2023.04.12 |