ํฐํธ์ด์ธ ์ด์ฉ๋ฐฉ๋ฒ
ํฐํธ์ด์ธ์ด ๋๋ฌ ์ ๋ถํฐ ์ ๊ทธ๋ ์ด๋๋ฅผ ํ๊ณ ์์์ต๋๋ค. ๋ฒ์ ์ด ์ด์ 6์ด๋ค์.
๋ฒ์ 5์ ๋งํฌ๋ฐฉ๋ฒ์ด ๊ฐ์์ ์ผ๋จ์ ์์ฑํ๋๋ฐ ์ด๋ ค์์ด ์์ต๋๋ค.
ํฐํธ์ด์ธ์ ์ฒ์ ์ด์ฉํ์๋ ๋ถ๋ค์๊ฒ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ฆฝ๋๋ค.
์๋ ์ฌ์ดํธ์ ์ ์ํ์ธ์.
์ฒ์์๋ ๋ฌด๋ฃ๋ฅผ ์ฌ์ฉํ์๊ณ ๋์ค์ ํ์ํ์๋ฉด ์ ๋ฃ๋ฅผ ๊ตฌ์
ํด์ ์ฐ๋ฉด ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ฌด๋ฃํฐํธ๋ ๋ค์ํ ์ ๊ตต๊ธฐ์ ์์ด์ฝ์ ์ฐ์ง ๋ชปํ๋ ์์ฌ์์ด ์์ง๋ง ๊ฑฐ์ ๋๋ถ๋ถ ์ ์ฉํ๊ฒ ์ธ ์ ์์ต๋๋ค.
๋ฌด๋ฃํฐํธ๋ ์๋จ๋ฉ๋ด์ "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๋ฅผ ๋ฐ์ผ๋ฉด ์ ๊ทธ๋ ์ด๋ ๋์์ ๊ฒฝ์ฐ ๋ณ๊ฒฝ๋ ์ค์ ์ด ์ ๋ฐ์ดํธ ๋ ์ ์๋ค๊ณ ํ๋ค์.
3) ์ธ์ฆ๋ฉ์ผ์ด ์ต๋๋ค. ํด๋ฆญํด์ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๊ณ ๊ฐ์ ํ์ธ์.
4) ๋ก๊ทธ์ธ ํ ํ Kit๋ฅผ ํด๋ฆญํ๋ฉด ์น์์ ๋งํฌํด์ ์ธ ์ ์๋ js ๊ฒฝ๋ก๊ฐ ์์ฑ๋์ด ์์ต๋๋ค.
์ ๋ ์ด๋ฏธ ์์ ์ ์์ฑ๋์๊ธฐ ๋๋ฌธ์ ์๋์ฌ์ง๊ณผ ๊ฐ์ต๋๋ค.
์ฌ์ง๊ณผ ๊ฐ์ง ์๋ค๋ฉด "New Kit"๋ฅผ ํด๋ฆญํด์ ์์ฑํ์ธ์.
์ฌ๊ธฐ๊น์ง ํ์ผ๋ฉด ๋ฐ์ ์ฝ๋๋ฅผ ๋ณต์ฌํ์ฌ html๋ฌธ์์ ์ฝ์
ํ๊ณ ์ด์ฉํ๋ฉด๋ฉ๋๋ค.
์ด์ธํฐํธ js ๋งํฌ๋ <head>์์ ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค.
์ํ๋ค์ด๋ก๋๋ก ์ด๋ป๊ฒ ๋ฃ์๋์ง ํ์ธํ ์ ์์ต๋๋ค. ์ค๋ฅธ์ชฝ์ ์๋ your-templeat.html์์ ์์ค๋ฅผ ๋ฃ์ด์ฃผ๋ ์์น๋ฅผ ํ์ธํ์ธ์.
ํฐํธ์ด์ธ ์น Kit ๋งํฌํ๋ ๋ฐฉ๋ฒ
๋ณต์ฌํ ํฐํธ์ด์ธ ๋งํฌ js ์์ค๋ฅผ <head>์์ ๋ฃ์ด์ค๋๋ค.
<script src="https://kit.fontawesome.com/**********.js" crossorigin="anonymous"></script>
์ด๋ ๊ฒ ๋๋ฉด ์น์ ํฐํธ์ด์ธ์ ์ธ ์ค๋น๊ฐ ๋์์ต๋๋ค.
ํฐํธ์ด์ธ ๋ณธ๊ฒฉ์ ์ผ๋ก ์ด์ฉํ๊ธฐ
1) ์น Kit๋ฅผ <head>์ ์ฝ์
ํ๋ค๋ฉด ์ด์ฉํ ํฐํธ๋ฅผ ์์ด๋ก ๊ฒ์ํด์ค๋๋ค.
2) ์ ์์ฌํญ์ ๋ค์ด๊ฐ ํฐํธ๋ฅผ ๊ฒ์ํ๊ธฐ์ํด์ "notice"๋ก ๊ฒ์ํฉ๋๋ค.
์ด ์ค์์ ๋นจ๊ฐ์ ํ ๋๋ฆฌ๋ก ํ์๋ ํฐํธ๋ฅผ ์ด์ฉํ๊ธฐ ์ํด์ ํด๋ฆญํฉ๋๋ค.
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๋ก ์ง์ ํ๋ฉด ๋ฉ๋๋ค.
ํฌ๊ธฐ๋ css ์ด์ฉํ๊ฑฐ๋ ํฐํธ์ด์ธ์์ ์๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ด์ฉํ ์ ์์ต๋๋ค.
ํฐํธ์ด์ธ์์ ์๊ฐํ๋ ํฐํธ ์ฌ์ด์ฆ
๋ค์ ํด๋์ค๋ฅผ ๋ง๋ถ์ฌ์ค๋๋ค.
์์ ํฐํธ : fa-xs
์ค๊ฐ ํฐํธ : fa-sm
ํฐ ํฐํธ : fa-lg
fa-2x ๋ถํฐ ํฐ์ซ์๋ฅผ ๋ถ์ฌ์ ํฐํธ์ด์ธ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ์ ์์ต๋๋ค.
ํฐํธ์ด์ธ ๊ฐ๋ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ
ํฐํธ์ด์ธ์ ๊ฐ๋๋ฅผ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
ํฐํธ์ด์ธ ์ ๋๋ฉ์ด์ ์ด์ฉ๋ฐฉ๋ฒ
ํฐํธ๋ฅผ ํ์ ํ๋ ์ ๋๋ฉ์ด์
์ผ๋ก ์ด์ฉํ ์ ์์ต๋๋ค.
ํด๋์ค๊ฐ ๋ค์ fa-spin์ ์ถ๊ฐํ๋ฉด ๋ฉ๋๋ค.
ํฐํธ์ด์ฐ์ ์ค๋ช
๋์ด ์๋ ์์ด์ฝ์ ์ด์ฉํด๋ดค์ต๋๋ค.
์ด๋ ๊ฒ ๋๋ ๊ตฐ์. ์ด๋ฏธ์ง๋ผ์ ์ ์ง๋์ด ์๋ ๋ชจ์ต๋ง ์บก์ณํ์ด์.
์ค๋ช
ํ์ด์ง์
๋๋ค. ์ฌ๊ธฐ์์ ํ์ธํ์ธ์.
์ฃผ๋ก ํฐํธ์ด์ธ์ ์ฌ์ด์ฆ๋ ์๊น ๋ณ๊ฒฝํด์ ๋ง์ด ์ด์ฉํฉ๋๋ค.
์์ง ์ด์ฉํ๊ธฐ ์ ์ด๋ผ๋ฉด ์๋ํด๋ณด์ธ์.
'์น๊ด๋ฆฌ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๐ฐ๐๐ ์ด๋ฒ ์ถ์๋ฌด๋ฃ์ด๋ฏธ์ง (์ถ์ ํ์ ์ด๋ฏธ์ง)์ฌ๋ ค๋ด ๋๋ค. (5) | 2020.09.19 |
---|---|
๐ฐ๐๐๋ฌด๋ฃ ์ถ์์ด๋ฏธ์ง ์ง์ ๋ง๋ ๊ฑฐ ์ฌ๋ ค๋ด ๋๋ค. (0) | 2020.09.19 |
๐ ์์ ์ฉ ๋ฌด๋ฃ ์ถ์์ด๋ฏธ์ง ์ฌ์ง, ์ถ์ํ์ ์ฐฝ ์ด๋ฏธ์ง ์ฌ๋ ค๋ด ๋๋ค. (26) | 2020.09.02 |
๐๐ฏโฑ ๋์์ ์์งค๋ง๋ค๊ธฐ (0) | 2020.07.20 |
ํฐ์คํ ๋ฆฌ ์ ๋๋ฆฌํฑ์ค ์ค์นํ๊ธฐ (0) | 2020.07.16 |