linear-gradient는 표면에 그라데이션 효과를 주는 background내의 요소입니다. linear-gradient를 사용하면 단편적이었던 색이 여러가지 색깔과 투명도를 통해 아름다운 색깔을 낼 수 있습니다. 사용방법은 생각보다 엄청 간단한 편입니다.
사용방법은
background : linear-gradient(방향, 색상지정점1, 색상지정점2, ...) 이와 같다.
이제 유형별로 실제 사용하는 방법을 알아보겠습니다.
1. linear-gradient로 무지개를 만드는 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Linear Gradients</title>
<style>
#grad{
height: 200px;
background: red;
background: linear-gradient(to top right, red, orange, yellow, green, blue, indigo, purple);
}
</style>
</head>
<body>
<h1>선형 그래디언트 - 무지개</h1>
<div id="grad"></div>
</body>
</html>2. 각도를 이용한 linear-gradient방식
linear-gradient는 방향을 각도로 설정할 수 있습니다. 0도의 기준은 위쪽 중간입니다. 그리고 각도가 양수이면 시계 방향, 음수이면 시계 반대방향입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Linear Gradients</title>
<style>
#grad{
height: 200px;
background: green;
background: linear-gradient(225deg, green, yellow);
}
</style>
</head>
<body>
<h1>선형 그래디언트 - 225도 진행 방향</h1>
<div id="grad"></div>
</body>
</html>3. 투명도를 이용하여 왼쪽에서 오른쪽으로 서서히 사라지는 방식
이번에는 linear-gradient에 투명도를 주는 방식입니다. 투명도를 줌으로써 같은 색들이 투명도를 통해 조화롭게 보이는 효과가 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Linear Gradients</title>
<style>
#grad{
height: 200px;
background: green;
background: linear-gradient(to right, rgba(0,255,0,1), rgba(0,255,0,0.5),rgba(0,255,0,0));
}
</style>
</head>
<body>
<h1>선형 그래디언트 - 왼쪽에서 오른쪽으로 서서히 사라지는</h1>
<div id="grad"></div>
</body>
</html>
백엔드 개발자