CSS로 멀티 컬러 배경 만들기
배경 색상으로 CSS 그래디언트를 사용하면 다채로운 효과를 배경 색상으로 부여할 수 있습니다.
화려하기는 하지만 용도가 극히 제한적이기 때문에 실제 사용 빈도는 많이 낮습니다.
그래디언트 컬러 속성을 잘 사용하면 그래디언트로 연속 색상이 아닌 단색의 여러 색상으로 채워진 완성도 높은 배경 패턴을 만들 수 있습니다.
보통 사용하는 그래디언트는
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
이런 형태입니다. 블록 태그에 적용하면 다음과 같은 그래디언트가 표시됩니다.
이해를 돕기 위해 자세히 설명하면 선형 그래디언트를 90도 방향으로(왼쪽에서 오른쪽으로) 3가지 색상을 왼쪽에서부터 0% -> 35% -> 100% 위치에서 33가지 색상이 각각 시작한다.
그리고 그 중간에는 인접한 두 색상의 중간 색상들이 차츰 변하는 그래디언트 색상으로 채운다.
입니다.
처음에 지정하는 각도(deg)는 CSS의 기본 방향인 12시 부터 시계 방향으로 돌면서 각도가 커집니다.
마이너스 각도(-90deg) 도 지정할 수 있고, 반시계 방향으로 회전하는 각도가 됩니다.
그리고, 그래디언트는 하나의 배경에 2개 이상을 동시에 적용할 수도 있습니다.
다음과 같이 쉼표로 구분해서
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 33%), linear-gradient(90deg, #dd0000 66%, #0000dd 100%);
2개 이상의 그래디언트를 나열할 수 있습니다.
예상대로라면 왼쪽에서 오른쪽으로 33% 위치까지는 첫 번째 그래디언트가, 66% -> 100% 위치까지는 2번째 그래디언트가 적용될거 같지만, 실제로 적용해보면 다음처럼 첫 번째 그래디언트만 적용되어 보입니다.
그래디언트는 2개 이상이 연달아 배경에 적용되면 나오는 순서대로 뒤에 적층되어 적용됩니다. 즉, 뒤에 나오는 그래디언트는 앞에 있는 그래디언트에 가려져 보이지 않는 겁니다. 그래디언트 1개는 전체 영역을 모두 사용해 적용되며, 순서가 뒤에 나올수록 아래 적용됩니다.
아래 적용된다는 것은 다음의 트릭을 쓰면 알 수 있습니다.
첫 번째 그래디언트의 두번 째 컬러의 투명도를 0(완전 투명)으로 해서 다음과 같이 적용하면
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,0) 33%), linear-gradient(90deg, #dd0000 66%, #0000dd 100%);
첫 번째 그래디언트는 왼쪽으로부터 33% 위치까지 첫 번째 색상에서 점점 투명해집니다. 그리고 33% 위치까지는 서서히 두 번째 그래디언트가 비쳐보이기 시작하고, 33% -> 100% 위치까지는 두 번째 그래디언트가 완전히 적용되어 보이게 됩니다.
한 개의 그래디언트에 3개의 색상을 사용하면 같은 그래디언트를 만들 수도 있지만, 이 트릭을 사용해서 다양한 패턴 배경을 만들 수 있습니다.
두 번째 트릭은 한 개의 그래디언트에 색상이 적용되는 위치를 같게하는 트릭입니다.
만약에 2색상 그래디언트의 시작점과 끝나는 점이 같으면 어떻게 될까?
다음과 같은 그래디언트를 박스에 적용하면
background: linear-gradient(110deg, #000000 60%, #0000dd 60%);
다음과 같은 그래디언트지만 그래디언트가 아닌 투톤 배경이 만들어집니다. 색상의 시작 위치와 끝나는 위치를 같게하고, 각도를 적절히 조절해주는 것만으로도 전혀 다른 배경 색상 효과가 만들어집니다.
첫 번째 트릭과 두 번째 트릭을 조합해서 다음과 같은 그래디언트를 만들면
background: linear-gradient(90deg, rgba(0,38,84,1) 33.333333%, rgba(0,38,84,0) 33.333333%), linear-gradient(90deg, rgba(255,255,255,1) 66.666666%, rgba(206,17,38,1) 66.666666%);
다음과 같은 프랑스 국기 같은 패턴을 만들 수 있습니다.
2개의 그래디언트를 활용할 경우, 첫 번째 그래디언트의 두번 째 색상을 투명으로 하고(색상은 아무거나 무관), 두 번째 그래디언트의 시작과 끝 색상이 두 번째와 세 번째 색상이 됩니다.
한가지 트릭이 더 있습니다.
앞서 예에서 2개 이상의 그래디언트를 하나의 배경에 적용하면 나오는 순서대로 밑에 중첩되어 적용된다고 했습니다.
그래디언트가 아닌 배경 이미지를 적용하면 마찬가지로 나오는 순서대로 중첩 적용됩니다.
이 원리를 사용해서 다음과 같이 배경 이미지를 뒤쪽에 적용하면
background: linear-gradient(75deg, rgba(64,128,128,1) 25%, rgba(0,0,0,0) 25%), url(./backup/820/img/gradient.jpg);
다음과 같은 배너 이미지 디자인을 만들 수 있습니다.
박스 영역에 적용한 배경 이미지이므로 예쁘게 타이포그래픽까지 적용하면 다음과 같은 배너 디자인을 만들 수도 있습니다.
참고로 음수로 각도를 주게 되면 오른쪽에서 왼쪽으로 그래디언트가 진행됩니다. 예를들어 다음과 같이 음각으로 그래디언트 방향을 주면 다음과 같이 오른쪽 끝에서 왼쪽 방향으로 33% 영역에 첫 번째 그래디언트 색상이 채워지게 됩니다.
background: linear-gradient(-75deg, rgba(64,128,128,1) 25%, rgba(0,0,0,0) 25%), url(./backup/820/img/gradient.jpg);
그래디언트 2개를 각도를 잘 조정하고, 직선 그래디언트(linear-gradient) 외에 방사형 그래디언트(radial-gradient)까지 조합하면 좀더 다채로운 배경 패턴을 만들 수도 있습니다.
background: linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%);
background: linear-gradient(15deg, rgba(228,128,228,1) 30%, rgba(0,0,0,0) 30%), radial-gradient(farthest-corner at 0% 0%, rgba(128,28,128,1) 75%, rgba(168,64,168,1) 75%);
