특정 요소의 배경에 그라디언트 색상을 지정하기 위해서는 CSS3의 gradient를 이용하면 간단히 CSS의 코드 수정만으로도 원하는 그라디언트의 모양과 색을 자유자재로 변형할 수 있습니다.
다음의 필수 구문 정리를 통해 gradient의 사용법을 알아보겠습니다
# Contents
- gradient
# gradient
아래는 gradient의 필수 구문입니다.
background: 그라디언트 모양(방향, 색상1, 색상2);
그라디언트 색상의 개수는 원하는 만큼 추가할 수 있습니다. 그라디언트의 모양에는 선형 그라디언트와 원형 그라디언트가 있습니다. 다음의 예제를 통해서 각각의 gradient 속성 값에 따라 달라지는 모양의 변화를 확인해보겠습니다.
먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.html 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
다음은 style.css 코드입니다.
div {
width: 200px;
height: 200px;
margin-top: 10px;
}
div:nth-child(1) {
background: linear-gradient(to right, blue, red);
}
div:nth-child(2) {
background: linear-gradient(45deg, blue, red);
}
div:nth-child(3) {
background: linear-gradient(to left, blue, red);
}
div:nth-child(4) {
background: linear-gradient(blue, red);
}
다양하게 그라디언트의 모양 방향 색상을 변경하여 테스트해보시기 바랍니다.
'기초 문법 > HTML&CSS' 카테고리의 다른 글
| [CSS] 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 (0) | 2021.11.23 |
|---|---|
| [CSS] 특정 요소의 모양을 평면상에서 자유롭게 변형하기 (0) | 2021.11.23 |
| [CSS] box-sizing (0) | 2021.10.15 |
| [CSS] Reset CSS (0) | 2021.10.15 |
| [CSS] Flex (0) | 2021.10.15 |
