gradient를 활용하여 그래프 만들기 

gradient를 생각하면 색상이 자연스럽게 섞이는 이미지를 생각하거나… 오래된 사이트를 방문했을 때 여기저기 있는 촌스럽게 느껴지는 이미지를 생각했습니다.

작년 팀에서 진행한 CSS 시크릿 스터디에서 gradient를 자세하게 보게 되었고 생각보다 활용할 곳이 많이 있다는 것을 알게되었습니다. 그래프를 만드는 일을 하면서 이미지로 넣거나 DOM을 추가해야 하는 상황을 gradient로 해결한 사례를 공유합니다.

1. 디자인

흔히 볼 수 있는 막대그래프입니다. 가로로는 기준선이 길게 채워져있고 세로로는 회색 막대가 있습니다. 수치에 따라 색상이 달라지는 막대가 있습니다.

2. 마크업

기준선을 구현하는 방법으로 생각해 볼 수 있는 것은

• 1px 이미지를 반복 시키는 방법
• DOM을 추가하여 absolute로 위치를 잡는 방법이 있습니다.

처음에는 이미지를 추가하는 게 부담스러워 css로 만드는 방법을 선택했습니다.
어차피 기준선에 대한 대체 텍스트도 필요했기 때문에 DOM을 만드는 김에 좀 더 추가하여 기준선을 absolute로 위치를 시켰습니다.
그리고 막대에 회색 배경을 추가했습니다.

하지만… 이미지를 넣는 것도 싫었고 선 때문에 DOM이 더 추가되는 것도 싫어 고민하던 차에 gradient로 선을 구현해보기로 했습니다.
회색 막대도, 수치를 나타내는 막대가 없어도 계속 노출될 수 있게 같이 구현을 했습니다.

3. gradient로 만들기

syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

3.1 기준선

우선 기준선을 추가합니다.
높이가 100px이고 기준선은 좋음, 보통, 나쁨, 매우 나쁨으로 나누어집니다.
(100px/4 = 25px) 25px 높이의 배경이 반복되면 됩니다.

가로로 꽉 차 기 때문에 가로는 100%, 반복되는 배경의 높이는 25px입니다.
이 배경의 크기를 background-size: 100% 25px;로 넣어줍니다.

background-size: 100% 25px;

100% * 25px의 배경이 반복됩니다.
direction의 기본이 top to bottom이기 때문에 생략합니다.
25px 중 선은 1px이기 때문에 0px에서 24px까지는 투명으로 채웁니다.

linear-gradient(transparent 24px,

24px에서 25px는 회색으로 채워 줍니다.
rgba(229, 233, 235, 0.4) 색상을 transparent이 끝나는 24px에서 색상을 멈춥니다

linear-gradient(transparent 24px, rgba(229, 233, 235, 0.4) 24px)

gradient가 만들어지고 반복이 되면 아래와 같은 기준선이 완성됩니다.

background-image: linear-gradient(transparent 24px, rgba(229,233,235,0.4) 24px);​ background-size: 100% 25px;

3.2 회색 막대

색 막대는 넓이가 10px이고 옆 공간이 4px입니다.
그래서 가로는 14px 높이는 100%로 꽉 찹니다.

background-size: 14px 100%;

막대의 반복이 왼쪽에서 오른쪽으로 이동해야 하기 때문에 각도를 90도로 설정합니다.

linear-gradient(90deg,

회색 막대는 10px이니 10px 지점에서 색상을 멈춥니다.

linear-gradient(90deg, #ecf0f2 10px,

막대와 막대 사이의 공간은 transparent로 채워 줍니다.

linear-gradient(90deg, #ecf0f2 10px, transparent 10px)

gradient가 만들어지고 반복되면 회색 막대가 완성됩니다.

background-image: linear-gradient(90deg, #ecf0f2 10px, transparent 10px); background-size: 14px 100%;

3.3 합치기

두 개의 gradient를 합쳐 완성합니다.

background-image: linear-gradient(transparent 24px, rgba(229,233,235,0.4) 24px), linear-gradient(90deg, #ecf0f2 10px, transparent 10px);
background-size: 100% 25px, 14px 100%;

4. gradient 활용

IE10부터 활용할 수 있기 때문에 높은 버전을 지원하는 서비스나 모바일에서 적합합니다.

내용이 균등하게 선으로 나누어진 UI
반복이미지를 사용할 필요가 없습니다.

선이 3개 들어간 햄버거 메뉴
DOM 1개로 가능합니다.

더하기 모양의 액션 버튼
DOM 1개로 가능합니다.

점으로 만들어진 메뉴 버튼
원이 매끄럽게 표현되지 않아 실무에 사용하기 적합하지 않습니다.

gradient pattern
스터디 하면서 책에 나와있는 예제 만들었던 코드펜도 공유합니다.

고맙습니다. 😄