css에 gradient 넣기

내가 익숙한 기술에만 집착하면 더 성장할 수 없다고는 생각하지만 내가 생각지도 못한 디자인을 어떻게 생각을 할 수 있을까? 그런 의미에서 디자이너와 작업하는 것은 즐겁다. 요구하는 디자인에 사용할 기술에 대해서 가능한 지 불가능한 지 하나씩 찾다보면 이미지가 아니라 그냥 코드로도 만들 수 있는 거였구나 하는 깨달음을 얻을 수 있다. gradient도 css로 가능할 지 몰랐는데 거뜬히 표현할 수 있다는 것을 알게되어 정리한다.

효과주기

background: linear-gradient(#e66465, #9198e5);

해당 효과를 주면 위에서 아래로 색이 그려진다. 따로 분기점을 지정하지 않았기 때문에 50%를 기준으로 하게된다.

색의 방향 돌리기

맨 처음값으로 방향을 줄 수 있는데 해당 값을 통해 방향설정을 할 수 있다.

linear-gradient(to left, blue, red);

위의 값은 (오른쪽에서) 왼쪽 방향으로 진행된다.

그레디언트 축의 시작점. 수평속성(left 또는 right) 키워드 하나와 수직속성(top 또는 bottom) 키워드 하나, 총 2개의 값으로 구성된다. 2개의 값의 순서는 중요하지 않으며, 각 키워드는 옵션으로서 생략이 가능하다.

즉 to left top이라는 값을 주면 왼쪽 상단 방향을 향해서 색을 줄 수 있다는 것이다.

퍼센트를 통해서 중지점을 만들 수도 있으나 많이 사용하지는 않을 것 같아서 설명은 생략한다.

MDN에서 설명보러가기 https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient