5.1 선형 그라디언트
그라디언트는 웹 디자인에서 매우 강력한 도구로, 이미지를 사용하지 않고도 색상 간의 부드러운 전환을 만들 수 있게 해줘. CSS는 두 가지 주요 유형의 그라디언트를 제공해: 선형 (linear-gradient)과 방사형 (radial-gradient). 이 그라디언트들은 요소의 배경, 버튼 만들기, 그리고 기타 시각적 효과에 사용돼.
선형 그라디언트 (linear-gradient)
선형 그라디언트는 지정된 선(축)을 따라 두 개 이상의 색상 간에 부드러운 전환을 만들어. 이 선은 수평, 수직 또는 임의의 각도를 가질 수 있어.
문법
background: linear-gradient( direction, color-stop1, color-stop2, ...);
값들
direction: 그라디언트 방향. 각도로 지정할 수 있음 (예:90deg), 키워드 사용 (예:to right,to bottom left)color-stop: 그라디언트 안에서 색상과 위치를 정의하는 색상 중단점
사용 예시
수평 그라디언트:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">수평 그라디언트</div>
</body>
수직 그라디언트:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">수직 그라디언트</div>
</body>
대각선 그라디언트:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">대각선 그라디언트</div>
</body>
다채로운 그라디언트:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">다채로운 그라디언트</div>
</body>
코드 설명:
to right: 그라디언트가 왼쪽에서 오른쪽으로 감to bottom: 그라디언트가 위에서 아래로 감45deg: 그라디언트가 45도 각도로 감red,yellow,green,blue: 다채로운 그라디언트를 만들기 위한 여러 색상 중단점
5.2 방사형 그라디언트
radial-gradient는 중심에서 시작하여 원형 또는 타원형의 끝으로 퍼지면서 색상 간의 부드러운 전환을 만들어. 방사형 그라디언트는 3D 느낌을 주는 흥미로운 시각적 효과를 만들 수 있어.
문법:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
값들:
shape: 그라디언트의 형태,circle(원) 또는ellipse(타원) (기본값)size: 그라디언트의 크기,closest-side,closest-corner,farthest-side,farthest-cornerposition: 그라디언트 중심의 위치, 퍼센트, 픽셀 또는 키워드로 지정 가능 (예:center,topleft)color-stop: 그라디언트 안에서 색상과 위치를 정의하는 색상 중단점
사용 예시
원형 그라디언트:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">원형 그라디언트</div>
</body>
타원형 그라디언트:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">타원형 그라디언트</div>
</body>
중심에서 시작하는 그라디언트:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">중심에서 시작하는 그라디언트</div>
</body>
모서리에서 시작하는 그라디언트:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">모서리에서 시작하는 그라디언트</div>
</body>
코드 설명:
circle: 원형 그라디언트를 만듦ellipse: 타원형 그라디언트를 만듦at center: 중심에서 시작하는 그라디언트at top left: 위쪽 왼쪽 모서리에서 시작하는 그라디언트red,blue,green: 다채로운 그라디언트를 만들기 위한 여러 색상 중단점
5.3 추가 그라디언트 설정
반복 그라디언트
1. 반복 선형 그라디언트 (repeating-linear-gradient)
반복 선형 그라디언트는 선형 그라디언트로 반복되는 패턴을 만들어.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. 반복 방사형 그라디언트 (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. 투명한 색상 중단점
색상 중단점은 투명성을 포함하여 더 복잡한 시각적 효과를 만들 수 있어.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. 여러 그라디언트의 결합 사용
여러 그라디언트를 사용하여 복잡한 배경을 만들 수 있어.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION