๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์›น๊ด€๋ฆฌ

๐Ÿ’โญ ํฐํŠธ์–ด์ธ ์ด์šฉํ•˜๊ธฐ (fontawesome)

ํฐํŠธ์–ด์ธ ์ด์šฉ๋ฐฉ๋ฒ•

ํฐํŠธ์–ด์ธ์ด ๋‘๋‹ฌ ์ „๋ถ€ํ„ฐ ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ํ•˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฒ„์ „์ด ์ด์ œ 6์ด๋„ค์š”.

๋ฒ„์ „ 5์™€ ๋งํฌ๋ฐฉ๋ฒ•์ด ๊ฐ™์•„์„œ ์ผ๋‹จ์€ ์ž‘์„ฑํ•˜๋Š”๋ฐ ์–ด๋ ค์›€์ด ์—†์Šต๋‹ˆ๋‹ค.

 

ํฐํŠธ์–ด์ธ์„ ์ฒ˜์Œ ์ด์šฉํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์•„๋ž˜ ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•˜์„ธ์š”.


 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com


์ฒ˜์Œ์—๋Š” ๋ฌด๋ฃŒ๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๊ณ  ๋‚˜์ค‘์— ํ•„์š”ํ•˜์‹œ๋ฉด ์œ ๋ฃŒ๋ฅผ ๊ตฌ์ž…ํ•ด์„œ ์“ฐ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ฌด๋ฃŒํฐํŠธ๋Š” ๋‹ค์–‘ํ•œ ์„ ๊ตต๊ธฐ์˜ ์•„์ด์ฝ˜์„ ์“ฐ์ง€ ๋ชปํ•˜๋Š” ์•„์‰ฌ์›€์ด ์žˆ์ง€๋งŒ ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„ ์œ ์šฉํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌด๋ฃŒํฐํŠธ๋Š” ์ƒ๋‹จ๋ฉ”๋‰ด์˜ "Icons"๋ฅผ ํด๋ฆญํ•ด์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์™ผ์ชฝ ๋ฉ”๋‰ด์˜ "Free"๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ฌด๋ฃŒ๋กœ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์•„์ด์ฝ˜๋“ค์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์˜ค๋ฅธ์ชฝ์— ๋‚˜์˜ค๋Š” ์•„์ด์ฝ˜ ์ค‘์—์„œ ์ง„ํ•˜๊ฒŒ ํ‘œ์‹œ๋œ ํฐํŠธ๊ฐ€ ๋ฌด๋ฃŒ์ž…๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ ๋ฌด๋ฃŒ ์•„์ด์ฝ˜

ํฐํŠธ์–ด์ธ ์›น Kit ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•

์›น์—์„œ ํฐํŠธ์–ด์ธ์„ ์ด์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฌด๋ฃŒ ํฐํŠธ์–ด์ธ ํŒจํ‚ค์ง€๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„ ๋งํฌํ•˜๋Š” ๋ฐฉ์‹

๊ทธ๋ฆฌ๊ณ  ๋‹ค์šด๋กœ๋“œ ๋ฐ›์ง€์•Š๊ณ  ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” kit๋ฅผ ๋งํฌํ•˜๋Š” ๋ฐฉ์‹์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์„œ๋ฒ„์šฉ๋Ÿ‰์ด ๋งŽ์ง€ ์•Š์„ ๋•Œ, ์•„~ ๊ท€์ฐฎ์•„ ํ•  ๋•Œ, ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งํฌํ•  ์ˆ˜ ์žˆ๋Š” kit ๋งํฌ ์ถ”์ฒœ์ž…๋‹ˆ๋‹ค.

์ „์—๋Š” CDN์œผ๋กœ ๋งํฌํ•˜๋Š” ๊ฒƒ์ด ์†Œ๊ฐœ๋˜์–ด์„œ ๊ฐ€์ž…ํ•˜์ง€ ์•Š๊ณ ๋„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ, ์ง€๊ธˆ์€ CDN์„ ์•ˆ๋‚ดํ•˜๋Š” ํŽ˜์ด์ง€๋ฅผ ์ฐพ์•„๋ณผ ์ˆ˜ ์—†๋„ค์š”. ๊ทธ๋Ÿฌ๋‚˜ ๊ฐ€์ž…ํ•ด๋ณด๋‹ˆ CDN ์†Œ์Šค๊ฐ€ ์žˆ๋„ค์š”.
๊ฐ€์ž…ํ•˜์ง€ ์•Š๊ณ ๋„ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



ํฐํŠธ์–ด์ธ CDN์ž…๋‹ˆ๋‹ค.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

 

ํฐํŠธ์–ด์ธ ์›น์œผ๋กœ ๋งํฌํ•˜๋Š” ๋ฐฉ๋ฒ•

1) ํฐํŠธ์–ด์ธ ํ™ˆํŽ˜์ด์ง€ ์ฒซํ™”๋ฉด์— "Start for free"๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ ์ด์šฉํ•˜๊ธฐ

 

2)  ๋งํฌ ์†Œ์Šค kit๋ฅผ ๋ฐ›๊ธฐ ์œ„ํ•ด์„œ ์ด๋ฉ”์ผ์„ ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฉ”์ผ์„ ๋“ฑ๋กํ•˜์—ฌ ์ž๋™ kit๋ฅผ ๋ฐ›์œผ๋ฉด ์—…๊ทธ๋ ˆ์ด๋“œ ๋˜์—ˆ์„ ๊ฒฝ์šฐ ๋ณ€๊ฒฝ๋œ ์„ค์ •์ด ์—…๋ฐ์ดํŠธ ๋  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•˜๋„ค์š”.



ํฐํŠธ์–ด์ธ kit ๋ฐ›๊ธฐ

 

 

3) ์ธ์ฆ๋ฉ”์ผ์ด ์˜ต๋‹ˆ๋‹ค. ํด๋ฆญํ•ด์„œ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ๊ฐ€์ž…ํ•˜์„ธ์š”.

๋ฉ”์ผ์ธ์ฆ ํ™”๋ฉด

 

4) ๋กœ๊ทธ์ธ ํ•œ ํ›„ Kit๋ฅผ ํด๋ฆญํ•˜๋ฉด ์›น์—์„œ ๋งํฌํ•ด์„œ ์“ธ ์ˆ˜ ์žˆ๋Š” js ๊ฒฝ๋กœ๊ฐ€ ์ƒ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.


ํฐํŠธ์–ด์ธ kit ๋ฐ›๊ธฐ

 

 

์ €๋Š” ์ด๋ฏธ ์˜ˆ์ „์— ์ƒ์„ฑ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์•„๋ž˜์‚ฌ์ง„๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 

ํฐํŠธ์–ด์ธ kit ๋ฐ›๊ธฐ

 

 

์‚ฌ์ง„๊ณผ ๊ฐ™์ง€ ์•Š๋‹ค๋ฉด "New Kit"๋ฅผ ํด๋ฆญํ•ด์„œ ์ƒ์„ฑํ•˜์„ธ์š”.

ํฐํŠธ์–ด์ธ kit ๋ฐ›๊ธฐ


์—ฌ๊ธฐ๊นŒ์ง€ ํ–ˆ์œผ๋ฉด ๋ฐ›์€ ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ html๋ฌธ์„œ์— ์‚ฝ์ž…ํ•˜๊ณ  ์ด์šฉํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

์–ด์ธํฐํŠธ js ๋งํฌ๋Š” <head>์•ˆ์— ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ƒ˜ํ”Œ๋‹ค์šด๋กœ๋“œ๋กœ ์–ด๋–ป๊ฒŒ ๋„ฃ์—ˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅธ์ชฝ์— ์žˆ๋Š” your-templeat.html์—์„œ ์†Œ์Šค๋ฅผ ๋„ฃ์–ด์ฃผ๋Š” ์œ„์น˜๋ฅผ ํ™•์ธํ•˜์„ธ์š”.



ํฐํŠธ์–ด์ธ kit ๋ฐ›๊ธฐ

ํฐํŠธ์–ด์ธ ์›น Kit ๋งํฌํ•˜๋Š” ๋ฐฉ๋ฒ•

๋ณต์‚ฌํ•œ ํฐํŠธ์–ด์ธ ๋งํฌ js ์†Œ์Šค๋ฅผ <head>์•ˆ์— ๋„ฃ์–ด์ค๋‹ˆ๋‹ค.

<script src="https://kit.fontawesome.com/**********.js" crossorigin="anonymous"></script>


์ด๋ ‡๊ฒŒ ๋˜๋ฉด ์›น์— ํฐํŠธ์–ด์ธ์„ ์“ธ ์ค€๋น„๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ด์šฉํ•˜๊ธฐ

1) ์›น Kit๋ฅผ <head>์— ์‚ฝ์ž…ํ–ˆ๋‹ค๋ฉด ์ด์šฉํ•  ํฐํŠธ๋ฅผ ์˜์–ด๋กœ ๊ฒ€์ƒ‰ํ•ด์ค๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ ๊ฒ€์ƒ‰ํ•˜๊ธฐ


2) ์œ ์˜์‚ฌํ•ญ์— ๋“ค์–ด๊ฐˆ ํฐํŠธ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ธฐ์œ„ํ•ด์„œ "notice"๋กœ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค.

์ด ์ค‘์—์„œ ๋นจ๊ฐ•์ƒ‰ ํ…Œ๋‘๋ฆฌ๋กœ ํ‘œ์‹œ๋œ ํฐํŠธ๋ฅผ ์ด์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ&nbsp;์†Œ์Šค ๋ณต์‚ฌ



3) ํ•ด๋‹น ํฐํŠธ ํŽ˜์ด์ง€๋กœ ๋“ค์–ด๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ์œ„์— ์žˆ๋Š” <i class="fas fa-exclamation-circle"></i>๋ฅผ ํด๋ฆญํ•˜์—ฌ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค. (๊ทธ ์˜†์— SVG๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๋Š” ์•„์ด์ฝ˜๋„ ์žˆ๋Š”๋ฐ ๋ผ์ด์„ผ์Šค๊ฐ€ ํ•„์š”ํ•˜๋„ค์š”.)



 

ํฐํŠธ์–ด์ธ ์†Œ์Šค ๋ณต์‚ฌ

 

4) ํฐํŠธ์–ด์ธ์ด ๋“ค์–ด๊ฐˆ  html ์œ„์น˜์— ๋ถ™์—ฌ์ค๋‹ˆ๋‹ค.



<p><i class="fas fa-exclamation-circle"></i> ์œ ์˜์‚ฌํ•ญ</p>
<ul>
    <li>์œ ์˜์‚ฌํ•ญ ์ฒซ๋ฒˆ์งธ๋Š” ๋ฌด์—‡๋ฌด์—‡์ž…๋‹ˆ๋‹ค.</li>
    <li>์ด๊ฒƒ์€ ์ด๋ ‡๊ฒŒ์ด๋ ‡๊ฒŒ ํ•ด์ฃผ์„ธ์š”.</li>
</ul>

 

์•„๋ž˜์™€ ๊ฐ™์ด ๋‚˜์˜ต๋‹ˆ๋‹ค.


์—ฌ๊ธฐ์— ๊ฒ€์ •์ƒ‰ ๋ง๊ณ  ๋‹ค๋ฅธ ์ƒ‰๊น”์„ ์›ํ•œ๋‹ค๋ฉด css๋ฅผ ์ด์šฉํ•ด์„œ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ํฐํŠธ์–ด์ธ์•„์ด์ฝ˜์„ ๊ฐ™์€ ์ƒ‰์œผ๋กœ ๋ณ€๊ฒฝํ•œ๋‹ค๋ฉด .fas๋ฅผ ์„ ํƒ ๊ฐ๊ฐ ๋‹ค๋ฅด๊ฒŒ ๋ณ€๊ฒฝํ•˜๊ณ ์‹ถ๋‹ค๋ฉด ๋’ค์— ์˜ค๋Š” .fa-exclamaton-circle๋กœ ์ง€์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.


ํฐํŠธ์–ด์ธ&nbsp;์ƒ‰๊น” ๋ณ€๊ฒฝ
ํฐํŠธ์–ด์ธ&nbsp;์ƒ‰๊น” ๋ณ€๊ฒฝ

ํฌ๊ธฐ๋„ css ์ด์šฉํ•˜๊ฑฐ๋‚˜ ํฐํŠธ์–ด์ธ์—์„œ ์†Œ๊ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ์—์„œ ์†Œ๊ฐœํ•˜๋Š” ํฐํŠธ ์‚ฌ์ด์ฆˆ

๋’ค์— ํด๋ž˜์Šค๋ฅผ ๋ง๋ถ™์—ฌ์ค๋‹ˆ๋‹ค.
์ž‘์€ ํฐํŠธ : fa-xs

์ค‘๊ฐ„ ํฐํŠธ : fa-sm

ํฐ ํฐํŠธ : fa-lg

fa-2x ๋ถ€ํ„ฐ ํฐ์ˆซ์ž๋ฅผ ๋ถ™์—ฌ์„œ ํฐํŠธ์–ด์ธ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ ํฌ๊ธฐ ๋ณ€๊ฒฝ
ํฐํŠธ์–ด์ธ ํฌ๊ธฐ ๋ณ€๊ฒฝ

ํฐํŠธ์–ด์ธ ๊ฐ๋„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•

ํฐํŠธ์–ด์ธ์€ ๊ฐ๋„๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ&nbsp;๊ฐ๋„ ๋ณ€๊ฒฝ
ํฐํŠธ์–ด์ธ&nbsp;๊ฐ๋„ ๋ณ€๊ฒฝ

ํฐํŠธ์–ด์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด์šฉ๋ฐฉ๋ฒ•

ํฐํŠธ๋ฅผ ํšŒ์ „ํ•˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์œผ๋กœ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ํด๋ž˜์Šค๊ฐ’ ๋’ค์—  fa-spin์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์Žฐ์— ์„ค๋ช…๋˜์–ด ์žˆ๋Š” ์•„์ด์ฝ˜์„ ์ด์šฉํ•ด๋ดค์Šต๋‹ˆ๋‹ค.

ํฐํŠธ์–ด์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜

์ด๋ ‡๊ฒŒ ๋˜๋Š” ๊ตฐ์š”. ์ด๋ฏธ์ง€๋ผ์„œ ์ •์ง€๋˜์–ด ์žˆ๋Š” ๋ชจ์Šต๋งŒ ์บก์ณํ–ˆ์–ด์š”.

ํฐํŠธ์–ด์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜

์„ค๋ช…ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ํ™•์ธํ•˜์„ธ์š”.

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

์ฃผ๋กœ ํฐํŠธ์–ด์ธ์— ์‚ฌ์ด์ฆˆ๋‚˜ ์ƒ‰๊น” ๋ณ€๊ฒฝํ•ด์„œ ๋งŽ์ด ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.
์•„์ง ์ด์šฉํ•˜๊ธฐ ์ „์ด๋ผ๋ฉด ์‹œ๋„ํ•ด๋ณด์„ธ์š”.

 

 

 

์œ ๋ฃŒ ์ด๋ฏธ์ง€ ์‚ฌ์ดํŠธ 12๊ฐœ ๋ชฉ๋ก

์š”์ฆ˜ ๋“ค์–ด ๋ธ”๋กœ๊ทธ๋‚˜ ์œ ํŠœ๋ธŒ ์˜์ƒ ์ฝ˜ํ…์ธ  ์ œ์ž‘ ์‹œ ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€๋ณด๋‹ค๋Š” ์œ ๋ฃŒ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ถ”์„ธ์ž…๋‹ˆ๋‹ค. ๊ณผ๊ฑฐ์—๋Š” ์‚ฌ์ง„ ํŽธ์ง‘ ํ”„๋กœ๊ทธ๋žจ ๋‚ด ์ž์ฒด ๋‚ด์žฅ๋œ ๊ธฐ๋ณธ ์ด๋ฏธ์ง€๋กœ๋„ ์ถฉ๋ถ„ํžˆ ํ€„๋ฆฌํ‹ฐ ๋†’์€ ๊ฒฐ

amango.tistory.com

 

์ด๋ฏธ์ง€ ๋งต ๋งŒ๋“ค๊ธฐ(์ด๋ฏธ์ง€ ๋งต ์ขŒํ‘œ๊ฐ’ ์‰ฝ๊ฒŒ ์ฐพ๊ธฐ)

์ด๋ฏธ์ง€ ๋งต ๋งŒ๋“ค๊ธฐ(์ด๋ฏธ์ง€ ๋งต ์ขŒํ‘œ๊ฐ’ ์‰ฝ๊ฒŒ ์ฐพ๊ธฐ) ์ด๋ฏธ์ง€ ๋งต์€ ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋งํฌ๋ฅผ ๊ฑธ์ˆ˜ ์žˆ์–ด์š”. ์—ฌ๊ธฐ์—์„œ usemap์˜ ๋งต์ด๋ฆ„๊ณผ map ํƒœ๊ทธ์•ˆ์˜ name์˜ ๋งต์ด๋ฆ„์€ ๋™์ผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. area shape

amango.tistory.com

 

๋งˆ์ธ๋“œ๋งต ํ”„๋กœ๊ทธ๋žจ ๋ญ์“ฐ๋‚˜์š”? ๋ฌด๋ฃŒ์—๋‹ค๊ฐ€ ํด๋ผ์šฐ๋“œ์— ์ €์žฅํ•˜๋„ค์š”.

๋งˆ์ธ๋“œ๋งต ํ”„๋กœ๊ทธ๋žจ ๋ญ์“ฐ๋‚˜์š”? ๋ฌด๋ฃŒ์—๋‹ค๊ฐ€ ํด๋ผ์šฐ๋“œ์— ์ €์žฅํ•˜๋„ค์š”. ๋งˆ์ธ๋“œ๋งต ๋ญ์“ฐ์„ธ์š”? ์ €๋Š” ๋งˆ์ธ๋“œ๋งต ํ”„๋กœ๊ทธ๋žจ ์•Œ๋งˆ์ธ๋“œ๋งต ์“ฐ๋‹ค๊ฐ€ ์œˆ๋„์šฐ๋ฅผ ๊ฐˆ์•„์„œ ๋˜ ์„ค์น˜ํ•ด์•ผํ•˜๋Š”๋ฐ, ํด๋ผ์šฐ๋“œ์— ์ €์žฅํ•˜

amango.tistory.com