선형 그라데이션


  • linear-gradient
선형 그라데이션을 나타내는 구문입니다.
사용법은 linear-gradient(각도나 방향, 그라데이션으로 쓸 색상, ~~색상2);
이렇게 사용가능합니다. 그리고 이해하실 때는 각도나 방향 쪽으로 첫번째색상부터 두번째 색상이 나온다고 보시면 됩니다.

방향표현

방향종류 

설명 

to top

위쪽

to right

오른쪽

to left

왼쪽

to bottom

밑쪽


코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #linear1{
                background:linear-gradient(to top, black, white);
            }
            #linear2{
                background:linear-gradient(to left top, black, white);
                //위와같이 했을 경우 왼쪽 위인 대각선이 됩니다.
            }
            #linear3{
                background:linear-gradient(to right, black, white);
            }
            #linear4{
                background:linear-gradient(to bottom right, black, white);
            }
       </style>
        <div id="linear1">to top</div>
        <div id="linear2">to left top</div>
        <div id="linear3" style="color:white">to right</div>
        <div id="linear4" style="color:white">to bottom right</div>
    </body>
</html>
cs



각도 표현

deg로 나타내며 정확하게 표현할 수 있습니다.


소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #linear1{
                background:linear-gradient(0deg, black, white);
            }
            #linear2{
                background:linear-gradient(315deg, black, white);
            }
            #linear3{
                background:linear-gradient(90deg, black, white);
            }
            #linear4{
                background:linear-gradient(135deg, black, white);
            }
       </style>
        <div id="linear1">0deg</div>
        <div id="linear2">315deg</div>
        <div id="linear3" style="color:white">90deg</div>
        <div id="linear4" style="color:white">135deg</div>
    </body>
</html>
cs


정해진 위치에 색상추가하기

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #linear1{
                background:linear-gradient(to top, black, gray 100px, white);
                //위에서보면 black과 white사이 gray를 방향을 기준으로 100px에 나타내도록 할 수 있습니다.
            }
       </style>
        <div id="linear1"></div>
    </body>
</html>
cs


원형 그라데이션

  • radial-gradient

원형 그라데이션을 나타내며 사용법은 radial-gradient(색상, 색상, .........);이렇게 사용하시면 원 안쪽부터 첫번째 색깔부터 나오게됩니다.


모양 지정

원래 기본값은 eclipse로 타원형입니다. 하지만 radial-gradient(circle이나eclipse, 색상...);이렇게 하시면 모양을 지정할 수 있습니다.


위치 지정

위치의 기본값은 원래 center center로 그냥 중간입니다.

하지만 radial-gradient(at 가로위치 세로위치, 색상...);이렇게 설정하시면 그렇게 나타납니다.


크기 지정

옵션 

설명 

closest-side 

그라데이션의 중심을 축으로 가장 가까운 모서리에 닿을 때까지 원을 그립니다. 

closest-corner

그라데이션의 중심을 축으로 가장 가까운 각에 닿을 때까지 원을 그립니다.

farthest-side

그라데이션의 중심을 축으로 가장 먼 모서리에 닿을 때까지 원을 그립니다.

farthest-corner

그라데이션의 중심을 축으로 가장 먼 각에 닿을 때까지 원을 그립니다.


그라데이션의 반복

  • repeating-radial-gradient
원형 그라데이션을 반복할 수 있도록 만들어 줍니다.
  • repeating-linear-gradient
선형 그라데이션을 반복할 수 있도록 만들어 줍니다.

코드예시↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body>
        <style>
            div{
                height:300px;
                width:400px;
            }
            #radial1{
                background:radial-gradient(black, gray, white);
            }
            #radial2{
                background:radial-gradient(circle at 50% 20%, black, gray, white);
            }
            #radial3{
                background:radial-gradient(circle closest-side at 80% 40%, white, gray, black)
            }
            #radial4{
                background:radial-gradient(circle closest-corner at 20% 30%, white, gray, black);
            }
            #radial5{
                background:radial-gradient(circle farthest-side at 10% 20%, white, gray, black);
            }
            #radial6{
                background:radial-gradient(circle farthest-corner at 10% 80%, white, gray, black);
            }
            #radial7{
                background:repeating-radial-gradient(circle, black, black 30px, gray 30px, gray 60px, white 60px, white 90px);
            }
            #radial8{
                background:repeating-linear-gradient(black, black 10px, gray 10px, gray 20px, white 20px, white 30px);
            }//위를 설명하면 검정색이 0-10px만큼 회색이 10px-20px만큼 흰색이 20px-30px만큼을 반복하는 것입니다.
       </style>
        <div id="radial1"></div>
        <div id="radial2"></div>
        <div id="radial3"></div>
        <div id="radial4"></div>
        <div id="radial5"></div>
        <div id="radial6"></div>
        <div id="radial7"></div>
        <div id="radial8"></div>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

마진과 패딩  (0) 2018.01.12
박스모델과 테두리 관련 스타일  (0) 2018.01.10
색상과 배경 스타일  (0) 2018.01.07
목록 관련 스타일  (0) 2018.01.05
문단 스타일  (0) 2018.01.04

+ Recent posts

티스토리툴바