IV. 배경꾸미기 - 3. 그라데이션 효과로 배경 꾸미기

Hush 2022. 6. 6. 08:01

선형 그라데이션

색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다.

이것을 만들어 주는 함수는 linear-gradient인데 색상이 어느 방향으로 바뀌는지, 어떤 색상으로 바뀌는지 알려 주어야 한다.

선형 그라데이션의 기본형은 다음과 같다.

linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ... ]);

-방향

그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다.

to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다.

이때 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다.

예를 들어 색상이 왼쪽에서 오른쪽으로 변하는 그라데이션이라면 to right로 사용한다. 그리고 왼쪽 아래에서 오른쪽 위로 변하는 그라대에션이라면 to right top또는 to top right로 사용한다. 기본값은 to bottom 이다.

다음 예제에서 그라데이션을 왼쪽 위에서 오른쪽 아래 방향으로, 색상은 파란색에서 점점 흰색으로 변한다. CSS3를 지원하지 않는 웹 브라우저를 위해 배경색을 파란색으로 선택했다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .grad {
                width: 800px;
                height: 450px;
                background: blue;
                background: linear-gradient(to right bottom, blue, white);
            }
        </style>
    </head>
    <body>
        <div class="grad"></div>
    </body>
</html>

-각도

각도는 그라데이션이 끝나는 부분의 방향을 deg로 표시해주면 된다. 12시방향이 0deg, 그리고 시계방향으로 그 값이 360까지 커진다.

-색상 중지점

2가지 색 이상의 선형 그라데이션을 만들려면 색상이 바뀌는 부분을 지정해 주어야 한다.

그라데이션에서 바뀌는 색을 색상 중지점이라고 한다.

색상 중지점을 지정할 때 쉼표로 색상을 구분하는데, 색상만 지정할 수도 있고 색상 중지점과 함께 중지점의 위치도 함께 지정할 수 있다.

중지점위치는 색상과 공백으로 구분하여 백분율로 적어주면 된다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .grad {
                width: 800px;
                height: 450px;
                background: blue;
                background: linear-gradient(to bottom,purple, navy 10%, blue 40%, skyblue);
            }
        </style>
    </head>
    <body>
        <div class="grad"></div>
    </body>
</html>

원형 그라데이션

선형 그라데이션이 직선 형태로 색상이 바뀌는 거라면, 원형 그라데이션은 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다. 따라서 원형 그라데이션은 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 선택한다.

radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ... ]);

-모양

원형(circle)과 타원형(ellipse)이 있다. 따로 지정하지 않으면 타원형으로 인식한다.

-크기

원형 그라데이션을 지정할 때 원의 크기도 지정할 수 있다.

원의 모양과 크기를 나타내는 키워드값을 함께 쓰면 된다.

크기에서 사용할 수 있는 값은 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .grad {
                margin: 20px;
                display: inline-block;
                width: 300px;
                height: 300px;
                background: green;
            }
            #closest-side { background: radial-gradient(circle closest-side at 30% 20%,white, yellow, green); }
            #closest-corner { background: radial-gradient(circle closest-corner at 30% 20%,white, yellow, green); }
            #farthest-side { background: radial-gradient(circle farthest-side at 30% 20%,white, yellow, green); }
            #farthest-corner { background: radial-gradient(circle farthest-corner at 30% 20%,white, yellow, green); }
        </style>
    </head>
    <body>
        <div class="grad" id="closest-side"></div>
        <div class="grad" id="closest-corner"></div>
        <div class="grad" id="farthest-side"></div>
        <div class="grad" id="farthest-corner"></div>
    </body>
</html>

속성값	설명	결과 화면
closest-side	그라데이션 가장자리 중 하나만이 요소의 한 변에 닿을 크기로 그라데이션을 그립니다.
closet-corner	그라데이션의 가장자리 중 하나만이 요소의 한 꼭짓점에 닿을 크기로 그라데이션을 그립니다.
farthest-side	그라데이션의 가장자리중 하나가 요소의 한 변에 닿고 나머지는 요소를 넘어서도록 그라데이션을 그립니다.
farthest-corner	그라데이션의 가장자리중 하나의 요소가 꼭짓점에 닿고 나머지는 요소를 넘어서도록 그라데이션을 그립니다.

-위치

at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.

사용할 수 있는 위치 속성값은 키워드 또는 백분율이다.

수평 키워드: left, center, right

수직 키워드: top, center, bottom

앞선 예시에서 at 30% 20%로 그라데이션의 중심을 설정하였었다.

-색상 중지점

색상이 바뀌는 부분을 색상 중지점이라고 한다.

색 뒤에 공백을 띄우고 백분율을 적어주면 된다.

그라데이션을 사용해 패턴 만들기

선형 그라데이션과 원형 그라데이션은 반복적인 패턴을 만들 수 있다.

선형 그라데이션을 반복할 때는 repeating-linear-gradient를 사용하고,

원형 그라데이션을 반복할 때는 repeating-radial-gradient를 사용한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
        .block{
            margin: 10px;
            width: 200px;
            height: 200px;
            display: inline-block;
        }
        #grad1
        {
            background: repeating-linear-gradient(yellow, red 20px);
        }
        #grad2
        {
            background: repeating-linear-gradient(yellow,yellow 20px, red 20px, red 40px);
        }
        #grad3
        {
            background: repeating-radial-gradient(circle, white, gray 10%);
        }
        #grad4
        {
            background: repeating-radial-gradient(circle, white, white 10%, gray 10%, gray 20%);
        }
        </style>
    </head>
    <body>
        <div class="block" id="grad1"></div>
        <div class="block" id="grad2"></div>
        <div class="block" id="grad3"></div>
        <div class="block" id="grad4"></div>
    </body>
</html>

저작자표시 (새창열림)