본문 바로가기
😁 프로젝트(들)

[🎨 썸네일 메이커] 업데이트 - 그라데이션 배경

에그지니 2022. 2. 26.

 

썸네일 메이커 사이트를 배포하고 나서, 생각보다 많은 관심을 주셨습니다!

그래서 제가 나름 생각해 두었던 그라데이션을 배경으로 설정하는 기능을 넣어 보려 합니다

 

그라데이션 기다려라!

 

🙀 Div 클릭할때 이벤트

 

 

제가 이렇게 각각 g1~g11 의 div를 만들어 놓고,

changeG(gi) 형태로 function을 실행시키게 해 두었습니다.

이건 지난 업데이트때도 적용이 되었었던 내용이예요.

 

 

이게 chagneG 함수 내부의 모습이고요 (좀 비효율적인 코드....😂)

 

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
function changeG(g) {
    if (g===g1) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g2) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g3) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g4) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g5) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g6) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g7) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g8) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g9) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g10) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g11) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
 
}
cs

 

각각 변수 값마다 그라데이션을 다르게 설정하는 코드입니다.

이제 이 그라데이션 값들을 다 바꿔 줘야 해요.

 

 

이 Div들에 적용한 그라데이션 효과대로 배경에 적용해 줄 겁니다!

👉 CSS 그라데이션 쉽게 적용하는 방법

2022.02.20 - [💡 꿀팁!] - [꿀팁!] 그라데이션 CSS 간편하게 적용하기 - WebGradient

 

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
function changeG(g) {
    if (g===g1) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#ff9a9e")
        grd.addColorStop(0.99, '#fad0c4');
        grd.addColorStop(1, '#fad0c4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
    }
    if (g===g2) { 
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#fbc2eb")
        grd.addColorStop(1, '#a6c1ee');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //to top, #fbc2eb 0%, #a6c1ee 100%)
    }
    if (g===g3) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#a1c4fd")
        grd.addColorStop(1, '#c2e9fb');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //120deg, #a1c4fd 0%, #c2e9fb 100%)
    }
    if (g===g4) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#84fab0")
        grd.addColorStop(1, '#8fd3f4');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //(120deg, #84fab0 0%, #8fd3f4 100%
    }
    if (g===g5) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#d4fc79")
        grd.addColorStop(1, '#96e6a1');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //120deg, #d4fc79 0%, #96e6a1 100%
    }
    if (g===g6) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#f093fb")
        grd.addColorStop(1, '#f5576c');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //120deg, #f093fb 0%, #f5576c 100%
    }
    if (g===g7) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#30cfd0")
        grd.addColorStop(1, '#330867');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //to top, #30cfd0 0%, #330867 100%
    }
    if (g===g8) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#667eea")
        grd.addColorStop(1, '#764ba2');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //135deg, #667eea 0%, #764ba2 100%
    }
    if (g===g9) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#6a11cb")
        grd.addColorStop(1, '#2575fc');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //to right, #6a11cb 0%, #2575fc 100%
    }
    if (g===g10) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#eea2a2")
        grd.addColorStop(0.19, '#bbc1bf');
        grd.addColorStop(0.42, '#57c6e1');
        grd.addColorStop(0.79, '#b49fda');
        grd.addColorStop(1, '#7ac5d8');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)
    }
    if (g===g11) {
        const grd = cvs.createLinearGradient(0, 0, 960, 540);
 
        grd.addColorStop(0, "#29323")
        grd.addColorStop(1, '#485563');
  
        cvs.fillStyle = grd;
        cvs.globalAlpha = "1.0";
        cvs.fillRect(0, 0, 960, 540);
        //60deg, #29323c 0%, #485563 100%
    }
}
cs

 

이게 바로 최종 완성 코드입니다! 🎉

 

🔥 적용 결과

 

 

이렇게 적용을 해 주고 나니,

이 그라데이션들에 맞는 폰트도 추가하고 싶어졌어요ㅎㅎ

 

😁 내친김에 폰트 추가

 

폰트는 "눈누" 에서 찾아 써 보도록 할게요

아무래도 눈누가 구글 웹폰트보다는 종류도 많더라고요

 

https://noonnu.cc

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 

✈️ 티웨이항공체

https://noonnu.cc/font_page/649

 

눈누

티웨이항공체 - 티웨이 X 폰트랩(주)

noonnu.cc

 

 

✈️ 개인적으로 놀러가고 싶은 마음을 담아서~

이 폰트도 추가해 줄께요 (이게 원래 계획이 아닌데...)

 

[웹폰트로 사용] 이 부분을 복사해서 CSS에 붙여넣고,

셀렉트박스에 옵션을 추가해 줬습니다!

 

옵션 추가

 

웹폰트 추가

아 맞다 부제목 글꼴 선택 옵션에도 넣어 줬습니다.

 

 

잘 적용 됐고요

 

📰 조선일보명조체

https://noonnu.cc/font_page/63

 

눈누

조선일보명조체 - 조선일보

noonnu.cc

 

아 신문 냄새로 읽는건 인정합니다.

 

요 폰트도 위에랑 마찬가지로 적용해 볼께요

 

길고 길고 긴 코드

 

은근히 고급진 명조체

 

🛒 G마켓 산스 L

개인적으로 G마켓 산스 애호가라

마지막을 좀 얇은 G마켓 산스를 추가해 주도록 하겠습니다.

 

 

폰트 페이스 추가해 주고,

 

 

이렇게 두꺼운거랑 얇은거랑 구분해서 넣어줬습니다.

 

 

뭔가 굉장히 깔끔하네요

 

☑️ 제작자, 깃허브, 업데이트

 

 

이렇게 다운로드 버튼 아래쪽에, 제작자와 깃허브, 업데이트로 향하는

링크들을 걸어 놨습니다.

 

1
2
3
4
5
<div class="infoDiv">
    <a href="https://eggjini.tistory.com" class="info" target="blank">제작자</a>
    <a href="https://github.com/Eggjini/banner-maker" class="info" target="blank">깃허브</a>
    <a href="https://eggjini.tistory.com/14" class="info" target="blank">업데이트</a>
</div>
cs

 

이건 HTML 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.infoDiv {
    margin-top: 100px;
    position: relative;
}
.info {
    font-family: "GmarketSansLight";
    text-decoration: none;
    margin: 10px;
}
a:link {
    color: gray;
}
a:visited {
    color: gray;
}
a:hover {
    color: black;
}
cs

 

이건 CSS 코드입니다.

 

👍 다음 업데이트 (예고편?)

 

다음에는.... 배경에 이미지를 넣을 수 있도록 업뎃을 할 겁니다!

링크를 붙여넣거나, 업로드를 할 수 있게 업데이트를 할 예정이예요~

 

또 다른 의견이 있다면, 언제든지 댓글 달아 주세요

적용해서 배포하기는 쉬우니 망설이지 말고 의견을 알려주세요!! 😀

'😁 프로젝트(들)' 카테고리의 다른 글

🔥 온라인 불멍 사이트를 만들어보자  (0) 2022.03.02
[🎨썸네일 메이커] 다음, 구글 검색 등록하기  (1) 2022.02.26
[⏰미닛 타이머] HTML, CSS로 간단한 파이 타이머 만들기  (0) 2022.02.25
[🎨썸네일 메이커] 모바일 미지원 안내  (0) 2022.02.25

'😁 프로젝트(들)' 관련글

티스토리툴바