그레디언트는
두가지 이상의 색상을 자연스럽게 단계적으로 변화시켜주는건데요
말로하려니 잘모르겠고
대략 이런것 입니다.
우리가 어디서 많이 봐왔던 것들이구요
어렵거나 생소한 개념이아니죠.
보통 포토샵이나 다른 프로그램으로 작업한뒤에 그림파일로 가져와서 backgrond-image 로 넣을수 있지만
html css에서도 작업할수 있습니다.
1.선형그레디언트
방향설정
색상설정
2.방사형그레디언트
이정도 차례를 가지고 있습니다. 시작하겠습니다
1.대략 상자를 하나 만들어 줍니다.
2. css 부분에 border 밑에 한줄더 적어주겠습니다.
backgrond-image : linear-gradient 를 적어주면 괄호가 나오는데요
(방향,색상1,색상2,색상3....) 입니다.
색상은 원하는대로 조합하고, 갯수도 마음대로 할수 있구요
오른쪽으로 하겟다 하시면 to right, 밑으로 하겠다 하면 to bottom 으로 하면됩니다.
오른쪽 대각선 밑으로 하겠다하면 to bottom right 하면됩니다. 간단하지요
(to bottom, to right, to left 이렇게 하는것도 가능하고 0deg,10deg,90deg 이렇게 각도로 표현해도 됩니다.
90deg 라고하면 to right 라고 적는것과 동일 합니다. 180deg 는 to bottom 이겠지요.)
3. 방사형을 해보겠습니다.
방사형에는 타원형과 원형이 있습니다.
위와 같이 코드를 작성하고 linear 대신 radial 을 넣습니다
()괄호 안의 양식은
(circle or not, 색상1,색상2....) 입니다
circle 을 적으시면 원형이되고 아무것도 안적으면 타원을 나옵니다
4. 색상 위치를 조절할수 있습니다. 우선 그냥 기본값이 자연스러운데
원한다면 %를 사용해 색상이 변경되는 위치를 바꿀수 있습니다.
처음꺼는 빨간색이 10퍼까지고 20퍼부터는 파란색이 채워지는거고
두번재꺼는 파란색이 70퍼 부터 채워지는겁니다.
몇번해보고 아 이렇구나 하고 넘어가면 됩니다.
5분정도만 공부하고, 다음에 쓸일 있을때 다시 보면되니 그냥 넘어가시면됩니다.
이상입니다.