9.1 색상 함수 조합하기
웹 디자인은 복잡하지만 조화롭고 적응 가능한 인터페이스를 만들기 위해 색상 기능에 대한 더 깊은 이해와 응용을 요구해. CSS에서 rgba(), hsla(), hsl() 및 rgb() 함수를 사용하여 더 복잡한 색상 조작을 살펴보자.
예제 1: 반투명 그라디언트 생성
복잡한 그라데이션을 만들기 위해 여러 색상 함수를 조합할 수 있어.
이 예제에서는 rgba()와 hsla()를 사용하여 지정한 반투명 색상을 조합한 선형 그라디언트를 사용해:
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
to right,
rgba(255, 0, 0, 0.8),
hsla(240, 100%, 50%, 0.7),
rgba(0, 255, 0, 0.6)
);
}
예제 2: 여러 색상으로 전환되는 그라디언트
여기에서는 45도 각도로 5개의 다른 색상 함수로 지정된 색상을 부드럽게 전환하는 선형 그라데이션이 사용돼:
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
45deg,
hsl(0, 100%, 50%) 0%,
rgb(255, 255, 0) 25%,
hsla(240, 100%, 50%, 0.7) 50%,
rgba(0, 255, 0, 0.6) 75%,
rgb(0, 255, 255) 100%
);
}
9.2 복잡한 그림자와 반투명 효과 만들기
예제 3: rgba()를 사용한 그림자
이 예제에서는 반투명 색상을 사용하여 부피와 빛의 효과를 만드는 복잡한 그림자를 만들어:
<div class="shadow"></div>
.shadow {
min-height: 155px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-10px -10px 20px rgba(255, 255, 255, 0.2);
}
예제 4: 반투명한 경계 및 배경
반투명 경계와 배경은 rgba() 및 hsla()를 사용하여 생성할 수 있으며, 여러 레이어와 질감이 있는 효과를 만들어 줘:
<div class="border-background"></div>
.border-background {
min-height: 200px;
border: 2px solid rgba(0, 0, 0, 0.5);
background-color: hsla(120, 100%, 50%, 0.3);
}
9.3 색상 함수를 사용한 애니메이션 및 전환
예제 5: hsl()을 사용한 배경 애니메이션
이 예제에서는 hsl()을 사용하여 다양한 색조로 배경 색상을 부드럽게 변경하는 애니메이션을 사용해:
<div class="animated-background"></div>
@keyframes color-change {
0% {
background-color: hsl(0, 100%, 50%);
}
50% {
background-color: hsl(120, 100%, 50%);
}
100% {
background-color: hsl(240, 100%, 50%);
}
}
.animated-background {
min-height: 200px;
animation: color-change 5s infinite;
}
예제 6: 텍스트 색상 전환
여기서는 rgba()와 transition 속성을 사용하여 마우스를 올리면 텍스트 색상과 투명도가 부드럽게 변경돼:
<div class="text-transition">Some text</div>
.text-transition {
min-height: 100px;
color: rgba(255, 0, 0, 1);
transition: color 2s;
}
.text-transition:hover {
color: rgba(0, 0, 255, 0.5);
}
9.4 CSS 변수 사용
색상 함수와 함께 CSS 변수를 사용하는 예제를 살펴보자.
예제 7: 변수와 색상 함수
색상 함수와 함께 CSS 변수를 사용하면 색상을 중앙에서 관리하고 복잡하지만 쉽게 관리 가능한 스타일을 만들 수 있어:
<div class="advanced"></div>
:root {
--primary-color: rgba(255, 0, 0, 0.8);
--secondary-color: hsl(240, 100%, 50%);
--border-color: rgba(0, 0, 0, 0.5);
}
.advanced {
min-height: 200px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border: 2px solid var(--border-color);
}
예제 8: 여러 그라디언트 조합
이 예제에서는 두 가지 선형 그라디언트를 겹쳐 복잡한 다층 효과를 만들어:
<div class="multi-gradient"></div>
.multi-gradient {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
GO TO FULL VERSION