CSS Gradients
CSS Gradients: 웹 디자인에서 색상 전환 효과 사용하기
- *CSS Gradients(그라데이션)**는 두 가지 이상의 색상을 부드럽게 전환하여 웹 디자인에 시각적인 효과를 더할 수 있는 강력한 도구입니다. 그라데이션은 배경, 버튼, 카드 등 다양한 요소에 적용할 수 있으며, 색상을 부드럽게 이어지게 하거나 다채로운 시각적 효과를 만들어낼 수 있습니다. 이 자료에서는 CSS Gradients의 기본 개념과 유형을 살펴보고, 다양한 예제를 통해 그라데이션을 활용하는 방법을 배워보겠습니다.
CSS Gradients의 기본 개념
CSS에서 그라데이션은 linear-gradient나 radial-gradient와 같은 함수로 정의됩니다. 이 함수는 두 개 이상의 색상을 인수로 받아 색상 간의
전환을 설정합니다. 기본적으로 그라데이션은 다음 두 가지 방식으로 사용할 수 있습니다:
- 선형 그라데이션(Linear Gradient): 한 방향으로 색상이 전환됩니다.
- 방사형 그라데이션(Radial Gradient): 원형 또는 타원형으로 색상이 퍼집니다.
이 외에도 여러 색상 전환 효과와 반복 기능을 적용할 수 있습니다.
1. CSS Linear Gradient (선형 그라데이션)
선형 그라데이션은 직선 방향으로 두 색상 사이에서 부드럽게 색상이 변화하는 형태입니다. 기본 구문은 다음과 같습니다:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
기본 예시
.box {
background: linear-gradient(to right, red, yellow);
}
to right: 그라데이션의 방향을 오른쪽으로 지정합니다.- *
red*에서 **yellow*로 색상이 부드럽게 전환됩니다.
선형 그라데이션 방향 지정
방향은 다양한 값으로 지정할 수 있습니다:
to right: 왼쪽에서 오른쪽으로to left: 오른쪽에서 왼쪽으로to bottom: 위에서 아래로to top: 아래에서 위로45deg: 45도 각도로 그라데이션 적용
.box-diagonal {
background: linear-gradient(45deg, blue, green);
}
위 코드는 45도 방향으로 **파란색(blue)**에서 **초록색(green)**으로 색상이 전환됩니다.
여러 색상 사용
두 가지 이상의 색상도 사용할 수 있습니다.
.box-multi {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
이 코드는 무지개 색상처럼 여러 색상이 오른쪽으로 순차적으로 전환됩니다.
중간 지점 설정
그라데이션에서 각 색상의 위치를 설정하여 더 정밀한 전환을 만들 수 있습니다. 각 색상 뒤에 퍼센티지 값을 추가하여 색상이 어디에서 시작되고 끝날지 지정합니다.
.box-custom {
background: linear-gradient(to right, red 20%, yellow 50%, green 80%);
}
이 예시에서는 빨간색이 20%까지, 노란색이 50%까지, 그리고 초록색이 80%부터 끝까지 그라데이션이 적용됩니다.
2. CSS Radial Gradient (방사형 그라데이션)
방사형 그라데이션은 원형이나 타원형으로 퍼져나가는 그라데이션입니다. 기본 구문은 다음과 같습니다:
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
기본 예시
.circle {
background: radial-gradient(circle, red, yellow);
}
circle: 원형 그라데이션을 생성합니다.- *
red*에서 **yellow*로 색상이 원을 따라 부드럽게 전환됩니다.
방사형 그라데이션 크기와 위치 지정
크기와 위치도 설정할 수 있습니다:
- 크기:
closest-side,farthest-side,closest-corner,farthest-corner - 위치:
at center,at top,at bottom,at left,at right
.circle-positioned {
background: radial-gradient(circle at top left, red, yellow);
}
위 코드는 왼쪽 위에서 시작하는 원형 그라데이션입니다.
타원형 방사형 그라데이션
타원형 그라데이션도 설정할 수 있습니다.
.oval {
background: radial-gradient(ellipse, purple, pink);
}
이 코드는 타원형으로 **보라색(purple)**에서 **분홍색(pink)**으로 전환됩니다.
3. Repeating Gradients (반복 그라데이션)
반복 그라데이션을 사용하면 색상 전환을 반복하여 흥미로운 시각적 효과를 만들 수 있습니다. 반복되는 그라데이션은 repeating-linear-gradient와
repeating-radial-gradient 함수로 설정됩니다.
반복 선형 그라데이션
.stripes {
background: repeating-linear-gradient(to right, red, yellow 10%, red 20%);
}
이 코드는 빨간색과 노란색의 10% 간격의 반복적인 줄무늬 패턴을 만듭니다.
반복 방사형 그라데이션
.circle-stripes {
background: repeating-radial-gradient(circle, blue, white 10%, blue 20%);
}
위 코드는 **파란색(blue)**과 **흰색(white)**의 반복되는 원형 그라데이션 패턴을 생성합니다.
4. 그라데이션과 투명도
그라데이션에서 rgba() 색상 값을 사용하면 색상 전환에 투명도를 추가할 수 있습니다.
.transparent-gradient {
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}
이 코드는 반투명 빨간색에서 반투명 파란색으로 전환되는 그라데이션을 적용하며, 두 색상이 각각 50%의 투명도를 가집니다.
실전 예시: 다양한 CSS Gradients 적용
다양한 그라데이션을 적용한 예제를 살펴보겠습니다.
.button {
background: linear-gradient(to right, #f06, #4a90e2); /* 핑크에서 파란색으로 */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
.card {
background: radial-gradient(circle, lightblue, navy); /* 연한 파란색에서 짙은 파란색으로 */
padding: 20px;
border-radius: 10px;
}
.banner {
background: repeating-linear-gradient(45deg, orange, yellow 10%, orange 20%); /* 대각선 줄무늬 */
color: white;
padding: 50px;
text-align: center;
}
- Button: 핑크색에서 파란색으로 전환되는 선형 그라데이션이 버튼의 배경으로 사용되었습니다.
- Card: 원형 방사형 그라데이션을 적용해 카드 요소에 시각적인 깊이를 더했습니다.
- Banner: 반복되는 대각선 줄무늬로 배너에 독특한 디자인을 추가했습니다.