CSS3 대각선 그라데이션이란?
대각선 그라데이션(Diagonal Gradient)은 색상이 화면의 대각선 방향으로 부드럽게 전환되는 효과입니다. 일반적으로 왼쪽 상단(top left)에서 오른쪽 하단(bottom right) 방향으로 시작하며, 두 개 이상의 색상이 자연스럽게 섞여 깊이감 있는 배경을 만들어 줍니다.
대각선 그라데이션 구현 코드
아래 예제는 빨간색에서 파란색으로 전환되는 대각선 그라데이션을 div 요소에 적용한 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>코드 설명
1. 표준 문법
linear-gradient(to bottom right, red, blue)가 표준 문법입니다. to bottom right는 그라데이션의 진행 방향을 의미하며, 왼쪽 상단에서 시작해 오른쪽 하단으로 색상이 변합니다.
2. 브라우저 접두사(Vendor Prefix)
구형 브라우저와의 호환성을 위해 각 브라우저별 접두사를 함께 작성하는 것이 좋습니다.
-webkit-: Chrome, Safari 등 WebKit 기반 브라우저-moz-: Firefox-o-: Opera (구버전)
접두사를 사용할 때는 방향 지정 방식에 주의해야 합니다. 예를 들어 -webkit-linear-gradient(left top, ...)은 시작 위치를 지정하는 반면, 표준 문법에서는 to bottom right처럼 도착 방향을 지정합니다.
3. 다양한 방향 옵션
대각선 방향은 네 가지로 조합할 수 있습니다.
to top right: 왼쪽 하단 → 오른쪽 상단to bottom right: 왼쪽 상단 → 오른쪽 하단to top left: 오른쪽 하단 → 왼쪽 상단to bottom left: 오른쪽 상단 → 왼쪽 하단
마무리
CSS3의 대각선 그라데이션은 이미지 없이도 세련된 배경 효과를 만들 수 있는 강력한 도구입니다. 색상을 자유롭게 조합하고 방향을 변경하며 다양한 디자인을 실험해 보세요. 최신 브라우저에서는 표준 문법만으로도 충분히 동작하지만, 호환성이 중요한 프로젝트라면 벤더 접두사를 함께 사용하는 것을 권장합니다.