그라디언트(Gradient)는 두 가지 이상의 색상을 자연스럽게 혼합하여 표현하는 CSS 기술입니다. 선형 그라디언트(Linear Gradient)는 위에서 아래로, 왼쪽에서 오른쪽으로 하는 등 일정한 방향을 따라 색상을 배치하는 반면, 방사형 그라디언트(Radial Gradient)는 중심점에서 바깥쪽으로 원형 또는 타원형으로 퍼져나가는 색상 전환을 만듭니다.
선형 그라디언트와 방사형 그라디언트의 차이
- 선형 그라디언트: 지정한 방향(예: top to bottom)에 따라 색상이 직선적으로 변합니다.
- 방사형 그라디언트: 요소의 중심에서 시작하여 외곽으로 둥근 형태로 색상이 퍼집니다.
다음은 CSS3에서 선형 그라디언트와 방사형 그라디언트를 사용하는 방법을 보여주는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 100px;
width: 300px;
background-image: linear-gradient(rgb(255, 0, 200), yellow);
}
.radialGradient {
height: 200px;
width: 200px;
background-image: radial-gradient(rgb(255, 0, 200), yellow);
}
</style>
</head>
<body>
<h2>Linear Gradient </h2>
<div class="linearGradient"></div>
<h2>Radial Gradient</h2>
<div class="radialGradient"></div>
</body>
</html>코드 설명
.linearGradient클래스는linear-gradient()함수를 사용하여 자홍색(rgb(255, 0, 200))에서 노란색으로 위에서 아래로 색상이 전환되는 효과를 적용합니다..radialGradient클래스는radial-gradient()함수를 사용하여 중심에서 시작해 바깥으로 퍼지는 원형 그라디언트를 구현합니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
추가 팁
그라디언트의 방향을 세밀하게 조절하고 싶다면 linear-gradient(to right, ...), linear-gradient(45deg, ...)처럼 방향이나 각도를 지정할 수 있습니다. 또한 radial-gradient(circle at center, ...)와 같이 중심 위치와 모양도 자유롭게 설정 가능합니다. 그라디언트는 이미지 파일 없이 시각적인 효과를 낼 수 있어 페이지 로딩 속도 개선에도 도움이 됩니다.