Mobile Apps

[Font] ํ‹ฐ์Šคํ† ๋ฆฌ ์Šคํ‚จ ํฐํŠธ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•! ๊ธ€์”จ์ฒด๋Š” ์†Œ์ค‘ํ•˜๋‹ˆ๊นŒ :)

๊น€์†Œ์†Œ๐Ÿ˜ถ‍๐ŸŒซ๏ธ 2020. 8. 21. 22:14
๋ฐ˜์‘ํ˜•

์‚ฐ๋Œ๊ด‘์ˆ˜์ฒด๋ฅผ ์•„์‹œ๋‚˜์š”?๐Ÿ˜

 

๋ช‡๋…„์ „์ธ์ง€ ๊ณ„์‚ฐํ•˜๊ฒŒ๋„ ํž˜๋“  ๋‚˜์˜ 20๋Œ€ ๋•Œ๋Š”, '์Šค์นด์ด ํ•ธ๋“œํฐ'(SKY๋ฅผ ์•„์‹œ๋‚˜์š”?์•„์‹ ๋‹ค๋ฉด, ๋ผ๋–ผ์˜ ๋ผ๋–ผ๋กœ ์ธ์ •ํ•ฉ๋‹ˆ๋‹ค.)์—๋งŒ ์‚ฐ๋Œ๊ด‘์ˆ˜์ฒด๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ด ๊ธ€์”จ์ฒด๋ฅผ ์“ฐ๊ฒ ๋‹ค๊ณ , ํ•ธ๋“œํฐ์„ ์Šค์นด์ด๋กœ ๋ฐ”๊พผ์ ์ด ์žˆ๋‹ค. ๊ทธ๋Ÿฌํ•˜๋‹ค. ๋‚œ ํฐํŠธ์— ์ง‘์ฐฉํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๋‹ค.  

 

๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœ์„คํ•˜๊ณ , ๊ธ€์„ ์“ธ ์‹œ๊ฐ„์—, ์Šคํ‚จ์„ ํŽธ์ง‘ํ•˜๊ณ , ๋˜ ์Šคํ‚จ์„ ๋ณ€๊ฒฝํ•˜๊ณ , ๋˜ ํŽธ์ง‘ํ•˜๊ณ , ๋„์ €ํžˆ '๊ธฐ๋ณธ ์„œ์ฒด'๋Š” ์•ˆ๋˜๊ฒ ๋‹ค ์‹ถ์–ด, ํฐํŠธ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•„ ํ—ค๋งค๊ณ , HTML์ด๋ผ๋Š” ์•”ํ˜ธ๋ฅผ ํ—ค์ง‘๊ณ  ํฐํŠธ๋ฅผ ์Šค์Šค๋กœ ๋ณ€๊ฒฝํ•œ ๋’ค ์•ˆ๋„์˜ ์ˆจ์„ ๋‚ด์‰ฌ์—ˆ์—ˆ๋‹ค.  ๊ทธ์‹œ๊ฐ„์— ๊ธ€์„ ๋ช‡ ํŽธ์„ ๋” ์“ธ ์ˆ˜ ์žˆ์—ˆ์„ ํ…๋ฐ, ๋‚˜์—๊ฒ ์•„์ง '๋ณด์ด๋Š” ๊ฒƒ'์ด ๋” ์ค‘์š”ํ•œ๊ฐ€๋ณด๋‹ค. 


 

 

๋ธ”๋กœ๊ทธ์˜ ํฐํŠธ ๋˜๋Š” ๊ธ€์”จ์ฒด ๋˜๋Š” ์„œ์ฒด๋ณ€๊ฒฝํ•˜๊ธฐ

 

 

 

**๋จผ์ € ํฐํŠธ์‚ฌ๋ƒฅ์„ ๊ฐ€๋ณด์ž. ๊ตฌ๊ธ€ํฐํŠธ๋กœ ๊ณ ๊ณ ๊ณ !(์•„๋ž˜)

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

1 ์šฐ๋ฆฌ๊ฐ€ ๋ธ”๋กœ๊ทธ์— ์‚ฌ์šฉํ•˜๋Š” ์–ธ์–ด๊ฐ€ ๋Œ€๋ถ€๋ถ„ ํ•œ๊ธ€์ด๋ฏ€๋กœ Korean์œผ๋กœ ์–ธ์–ด๋ณ€๊ฒฝ์„ ํ•ด์ค€ ๋’ค, ๋ง˜์— ๋“œ๋Š” ํฐํŠธ๋ฅผ ์„ ํƒ!

ํฐํŠธ๋ฅผ ์„ ํƒ ํ›„ ์˜ค๋ฅธ์ชฝ์— ์ฐฝ์ด ๋”ฐ๋กœ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค๋ฉด, ์šฐ์ธก์ƒ๋‹จ์˜ ๋„ค๋ชจ๋„ค๋ชจ๋ฅผ ๋ˆŒ๋Ÿฌ์ฃผ๋ฉด ๋œ๋‹ค. 

 

2 ์ด์ œ, ์Šคํ‚จํŽธ์ง‘์— ์“ธ ์•”ํ˜ธ๋ฅผ ๋ณต์‚ฌํ•˜์ž. ์•„๋ž˜์— ๋…ธ๋ž€์ƒ‰์œผ๋กœ ํ‘œ์‹œ๋œ Embed ์™€ @import ๋ˆŒ๋Ÿฌ์ค€ ๋’ค ์•„๋ž˜  ๋ณด๋ผ์ƒ‰์œผ๋กœ ํ‘œ์‹œ๋œ ๋‘๊ฐ€์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ณ€๊ฒฝ ํ•  ์ˆ˜ ์žˆ๋‹ค. ์šฐ์„  ์œ—์นธ์˜ <style>-- ๋ถ€ํ„ฐ ๋ณต์‚ฌํ•ด์„œ ๋ธ”๋กœ๊ทธ์˜ ์Šคํ‚จํŽธ์ง‘์œผ๋กœ ๋Œ์•„์˜จ๋‹ค.

 

 

 

3 ๋ธ”๋กœ๊ทธ ๊ด€๋ฆฌ -> ๊พธ๋ฏธ๊ธฐ -> ์Šคํ‚จํŽธ์ง‘ ->  html ํŽธ์ง‘ ->   2์˜ ๋ณต์‚ฌํ•œ ์ฝ”๋“œ๋ฅผ html์˜ <head>์™€ <head>์‚ฌ์ด์— ๋ถ™์—ฌ๋„ฃ๊ธฐํ•œ๋‹ค. 

 

 

4 ๋‹ค์‹œ 2๋กœ ๊ฐ€์„œ ์•„๋ž˜ font-family๋กœ ์‹œ์ž‘ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌ ํ›„ ์Šคํ‚จํŽธ์ง‘ HTML ์˜†์— ์žˆ๋Š” CSSํƒญ์œผ๋กœ ๊ฐ€์„œ, Ctrl+F๋กœ 'font-family'๋ฅผ ๊ฒ€์ƒ‰ํ•ด์„œ ๊ธฐ์กด์˜ ํฐํŠธํŒจ๋ฐ€๋ฆฌ๋ฅผ ์‚ญ์ œํ•˜๊ณ , 2์—์„œ ๋ณต์‚ฌํ•œ ํฐํŠธํŒจ๋ฐ€๋ฆฌ๋กœ ๋ณ€๊ฒฝ ํ›„ ์ ์šฉํ•ด์ค€๋‹ค.

 

 

 

 

๋ธ”๋กœ๊ทธ์Šคํ‚จ์˜ ๊ธฐ๋ณธ ํฐํŠธ ๋ณ€๊ฒฝ ๋.  

์ด์ œ, ํฌ์ŠคํŒ…์—์„œ ์„ค์ •ํ•œ ํฐํŠธ ์™ธ์— ๋ธ”๋กœ๊ทธ์˜

'ํ™ˆํ™”๋ฉด, ์นดํ…Œ๊ณ ๋ฆฌ ๋“ฑ'์˜ ํฐํŠธ๋Š” ์˜ˆ์œ ํฐํŠธ๋กœ ๋ฐ”๊ผˆ์„๊บผ์—์š”.

 

์ฐธ ์‰ฝ์ฅฌ? 

์ด๊ฑธ ์™œ์ด๋ ‡๊ฒŒ ํ—ค๋งธ๋˜์ง€...

์Šคํ‚จํŽธ์ง‘์˜ ์„ธ๊ณ„๋Š” ๋ฉ€๊ณ ๋„ ํ—˜ํ•˜๋„ค์š”. 

 

 

 

:) 

 

๊ทธ๋Ÿผ, 

์ข‹์€ ์ฃผ๋ง ๋ณด๋‚ด์„ธ์š”! 

๋ฐ˜์‘ํ˜•