๊ธฐ๋ณธ ์๋ฐํ ๋ณ๊ฒฝํ๊ธฐ
๊ธฐ๋ณธ ์๋ฐํ๋ ๋ญ์ง?
ํฐ์คํ ๋ฆฌ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ก๊ทธ์ธ ์์ด ๋๊ธ ์์ฑ์ด ๊ฐ๋ฅํ๋ค.
๊ทธ๋ฐ๊ฒฝ์ฐ ์ด ๋ธ๋ก๊ทธ์ฒ๋ผ ๋๊ธ ์์ ์๋์ผ๋ก ํ๋กํ ์ด๋ฏธ์ง๊ฐ ๋๋คํ๊ฒ ๋ํ๋๋ค.
์์๋ฅผ ๋ณด์.
์ด๋ ๊ฒ ๊ธฐ๋ณธ ํ๋กํ ๋๋ค ์ด๋ฏธ์ง๊ฐ ๋ํ๋๋ค.
์ด 8๊ฐ์ง๋ก, ์ด๋ฒ์๋ ์ด ์ด๋ฏธ์ง๋ฅผ ๋ด ์ ๋ง์ ๋ง๊ฒ ๋ฐ๊พธ๋ ํฌ์คํ ์ด๋ค.
์ฐ์ ๋์ฒด ์ด๋ฏธ์ง๋ฅผ ์ฐพ์๋ณด์
์์ฑ์ ํ์ธํ๊ณ ๋์ฒด ์ด๋ฏธ์ง๋ก ๊ฐ์๋ผ์ฐ๊ธฐ ์ํ ์์ ์ ์์ํด๋ณด์.
๊ฐ์ฅ ํํ ์ด๋ฏธ์ง ํ์ผ์ ์น์ํ JPG ๋๋ JPEG ์ด๊ฒ ์ง๋ง
์์ผ๋ก ๊ทธ๋ฐ ์ด๋ฏธ์ง๋ ๋ ์ ์๋ค๋ฉด ์ง์ํ์.
์ด๋ฐ ๋ ์๋ค์ ํ๋ํ๋ฉด ๋ชจ์์ดํฌ์ฒ๋ผ ๊นจ์ง๋ ๋ ์๋ค์ด๋ค.
์ก์ค์ ์ฌ๊ธฐ๊น์ง ํ๊ณ
์์ฑ์ ์ด๋ป๊ฒ ์์?
ํฌ๋กฌ์ด๋ ์ฃ์ง๋... (์๋ ์ค๋ง ์ต์คํ๋ก๋ฌ ์ฐ๋์ฌ๋์ ์๊ฒ ์ง.....)
๊ธฐ๋ณธ์ ์ผ๋ก ํ๋ฉด์์ 'F12' ํค๋ฅผ ๋๋ฌ๋ณด๋ฉด ๊ฐ๋ฐ์ ํด์ด๋ผ๋๊ฒ ์๊ฒจ๋๋ค.
์ฃผ๋ก ์ฐฝ ์ค๋ฅธ์ชฝ์ ์๊ธฐ๋๋ฐ, ๋ญ ๋ณต์กํด ๋ณด์ด์ง๋ง ๋ง์๊ฑธ ์ ํ์๋ ์๋ค.
๋๋ ํฌ๋กฌ์ ์ฃผ๋ก ์ฌ์ฉํ๋๋ฐ ํ์ชฝ์ ๋ก๊ทธ์์์ ํ ํ์๊ฐ ์์ด์ ์ด๋ฒ์๋ MS์ ์ฃ์ง๋ฅผ ์ฌ์ฉํ์ง๋ง ๋์ผํ๋ค.
์ด๋ฐ ์ด๋ฏธ์ง๊ฐ ๋ํ๋๋๋ฐ
์๋จ์ ์ดํด๋ณด๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก ์์, ์ฝ์, ๋คํธ์ํฌ, ์ฑ๋ฅ.... ์ด๋ด๊ฒ ์๋ค. ๋ค ํ์ ์๋ค. (๋ธ๋ผ์ฐ์ ๋ง๋ค ์กฐ๊ธ์ฉ ๋ค๋ฅด๋ค)
๊ฑฐ๊ธฐ ์ ์ผ ์ผ์ชฝ์ ๋ณด๋ฉด ์์ด์ฝ์ด ๋ณด์ธ๋ค.
์ด๋์ด ํฌ๋กฌ ์์ด์ฝ์ด๊ณ
์ด๋์ด MS Edge ์์ด์ฝ์ด๋ค.
ํด๋ฆญํ๊ณ ์ฐฝ์ ๊ฐ์ ธ๋ค๋๋ฉด ๋ญ๊ฐ ํํ ๋ฒ์ฉ๊ฑฐ๋ฆฌ์ง๋ง ์ ๊ฒฝ ์ฐ์ง๋ง๊ณ ๊ทธ๋ฆผ์ ํด๋ฆญํด๋ณด์
๊ทธ๋ผ ์ด๋ ๊ฒ ๋ญ๊ฐ ๋์ค๊ณ , ์ค๋ฅธ์ชฝ์ ๋ณต์กํ ์์ค์ฝ๋์์ ์ด๋ ์์ด ๋ญ์ง ์ฐพ์์ค๋ค.
๊ทธ์ค์ ์ฃผ๋ชฉํด์ผ ํ๋ ๋ถ๋ถ์
<img src="https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_07.png" class="avatar lazyload" alt="" data-src="https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_07.png" style="width: 60px; height: 60px; opacity: 1;">
์ ์ง ์ ์ผ ์์ ๋ณด๋ฉด profile_default_07.png ์๋ด ๋ง์ด ์๋ค.
์์ญ๊ฐ๋ฅผ ๋ง๋ค์ด์ ํ์ธํด๋ด๋ ์ ์ด๋ฏธ์ง๋ 00 ~ 07๊น์ง ๋ฑ 8๊ฐ๋ง ์๋ ๊ฒ์ผ๋ก ๋ณด์ธ๋ค.
๊ทธ๋ผ ์ฐพ์๊ฑด ๋ค ์ฐพ์๋ค.
PNG๋ผ๋ ํ์ฅ์ ๊ทธ๋ฆผ์ธ๋ฐ, ์ด๋ ์์ ํ๋๋ฅผ ํด๋ ๊นจ์ง์ง ์๋ ์ด๋ฏธ์ง ์ฆ '๋ฐฑํฐ' ์ด๋ฏธ์ง๋ค.
๊ทธ๊ฒ ๋ญ๋๊ณ ? ๋ณด์ค๋ถ๋ค์ ์๋ ๋๋ณด๊ธฐ(์ ์๊ธ)๋ฅผ ๋ณด์.
1. ํฌํฐ๋ธ ๋คํธ์ํฌ ๊ทธ๋ํฝ์ค(Portable Network Graphics; PNG)๋ ๋น์์ค ๊ทธ๋ํฝ ํ์ผ ํฌ๋งท์ ํ๋์ด๋ค.
2. ํนํ ๋ฌธ์ ๊ฐ ์ฝํ GIF ํฌ๋งท์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ๊ฐ์ ํ๊ธฐ ์ํด์ ๊ณ ์๋์๋ค.
3. PNG๋ ๊ณต์์ ์ผ๋ก๋ "ํ"(/pษชล/)์ด๋ผ๊ณ ์ฝ์ง๋ง, ๋๋ถ๋ถ์ "ํผ์์ง"๋ผ๊ณ ์์ด ์ฒ ์ ๊ทธ๋๋ก ์ฝ๋๋ค.
4. PNG ํฌ๋งท์ ์ปฌ๋ฌ ํ๋ ํธ ํ์๊ณผ ๊ทธ๋ ์ด์ค์ผ์ผ ํ์, ๊ทธ๋ฆฌ๊ณ ํ ์ปฌ๋ฌ ํ์ ๋ฐฉ์์ ๋ชจ๋ ์ง์ํ๋ค.
5. ๊ทธ๋ฌ๋ ์ธํฐ๋ท ์์ ์ด๋ฏธ์ง ํ์๋ฅผ ์ผ๋์ ๋๊ณ ๊ฐ๋ฐ๋์๊ธฐ ๋๋ฌธ์ CMYK ๋ฑ์ ์ ๊ณต๊ฐ์ ์ง์ํ์ง ์๋๋ค.
6. ํ์ผ ํ์ฅ์๋ PNG ๋๋ png๋ฅผ ์ฐ๋ฉฐ, MIME ํ์
์ image/png์ผ๋ก ์ ๋๋ค.
...... ๋ผ๊ณ ์ํค์ ์ ํ์๋ค.
์ฌํผ ์ด๊ฑด ๋ฐฐ๊ฒฝ์ ์์ ์ ์๊ณ ํ์ง์ด ๊นจ์ง์ง ์๋ ํน์ง์ด ์๋ค.
์ ๊ทธ๋ผ ์ค์ํ๊ฑด 'profile_default_00' ์ด์์ผ๋ ๋ค์ ์ค๋น๋ฅผ ํ์.
๊ทธ๋ผ ํ๋กํ ์ด๋ฏธ์ง๋ฅผ ์ฐพ์์ผ์ง?
๋ฌผ๋ก ๊ธ์๋ถ๋ค์ ์ง์ ๊ทธ๋ฆด์๋ ์๋ค.
MS์ ํ์ํฌ์ธํธ(Power Point)๋ฅผ ์ด์ฉํ๋ฉด png ํ์ผ์ ๋ค๋ฅธ์ด๋ฆ์ผ๋ก ์ ์ฅ์์ผ ์ป์ ์ ์๋ค.
(๊ธ์์ ์ญ์ ๋ถ๋ฝ๋ค.)
ํ์ง๋ง ๋๊ฐ์ ๋ฅ์ ์์ ์จ๋ ๋ญ ํ๋๋? .....๊ฒ์ํ๋ค.
์ด๋ฆฌ์ ๋ฆฌ ํ์ธํด๋ณด๋๊น png ํ์ผ ๋ฟ๋ง ์๋๋ผ
svg (์ด๊ฒ๋ ํ๋์ ํ์ง์ด ๊นจ์ง์ง ์๋ '๋ฐฑํฐ'์ด๋ฏธ์ง...)
ํ์ฅ์๋ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค.
๊ทธ๋ผ
๋ฌด๋ฃ ์์ด์ฝ ๋ฐ ์คํฐ์ปค - ์๋ฐฑ๋ง ์ข ์ ๋ค์ด๋ก๋๊ฐ ๊ฐ๋ฅํ ๋ฆฌ์์ค
๊ทํ์ ํ๋ก์ ํธ๋ฅผ ์ํ ๋ฌด๋ฃ ์์ด์ฝ ๋ฐ ์คํฐ์ปค๋ฅผ ๋ค์ด๋ก๋ํ์ธ์. ๋์์ด๋์ ์ํ, ๋์์ด๋๋ฅผ ์ํ ๋ฆฌ์์ค. PNG, SVG, EPS, PSD ๋ฐ CSS ํฌ๋งท
www.flaticon.com
์ ์ฌ์ดํธ์ ํ์๊ฐ์ ์ ํ์ฌ ์ฐพ๊ฑฐ๋
Download 1,324,600 free icons (SVG, PNG)
Illustrator plugin 1M+ vector icons right in Illustrator
icons8.com
์ด๋ฐ ํ์ด์ง์์ ์ฐพ์์ค๋ฉด ๋๋ค.
Free Icons PNG, ICO, ICNS and SVG
Are you a designer? Share your work with people all over the world. Start upload
icon-icons.com
๋๋ ๋ฐ๋ก ์์์ ์ฐพ์์๋ค.
๋ฌผ๋ก ๋ผ์ด์ผ์ค ๋ฌธ์ ๊ฐ ์์ ์ ์์ผ๋ ํ์ธ ํ ๋ณ๋ ํ๊ธฐ๋ฅผ ํด์ผ ํ ์๋ ์๋ค.
์ฐธ๊ณ ๋ก ๋๋ ์์ชฝ์ ์ฌ์ฉํ๋ค. (๊ฑฐ์ ์ ์๊ถ์ ํ์๊ฐ ํ์ํ๊ธด ํ๋ค.)
๊ทธ๋ผ ์ฌ์ง 8์ฅ์ ๊ณจ๋ผ์ค์.
๊ทธ๋ฆฌ๊ณ ์ ์ฅํด๋๋์ ๋ ์ ์์ผ๋ฉด ์ด๋ฆ์ ํต์ผํ๊ณ ๋ค์ ์ซ์๋ก0~8 ์ด๋ฐ์์ผ๋ก ํ๋๊ฒ ์ข๋ค.
์์ด์ฝ์ ๊ณจ๋ผ์๋ค. ์ด๋ค๊ฑฐ๋๊ณ ?
๋๋ณด๊ธฐ๋ฅผ ๋๋ฅด๋ฉด ๋ํ๋๋ค. ์ด๋ฏธ์ง ์๋ณธ์ ๋๋ฌด ํฌ๋ค.
์ถ์ฒ: https://icon-icons.com/ko/pack/xmas-giveaway-:)/1736
๋ฐ๋์ ์ถ์ฒ๋ก ์ ์๊ถ ํ์๋ฅผ ํ์.
๊ทธ๋ผ ๋ฐ๊ฟ์ผ์ง?
์ฐ์ ํ์ผ์ ์ฌ๋ ค๋์ด์ผ ํ๋ค.
์ด ํ์ด์ง์์ ๋งํฌ๋ฅผ ๋ฐ๋ ์๊ด ์๊ฒ ์ง๋ง, ๋ด๊ฐ ์ด๋๋ ๊ทธ๋ฅ ์ด ๊ธ์ ์ง์ฐ๋ฉด
์๋ ํ ๊ฐ์๊ธฐ ๋๋ฌธ์ ๋ธ๋ก๊ทธ ๊ด๋ฆฌ ํ์ด์ง์ ๋ค์ด๊ฐ์.
๋ธ๋ก๊ทธ ๊ด๋ฆฌ ํ์ด์ง์์ '์คํจํธ์ง' ํด๋ฆญ
์ฐ์ธก์๋จ์ 'htmlํธ์ง' ํด๋ฆญ
๋ค์ ์ฐ์ธก ์๋จ์ ํ์ผ ์ ๋ก๋ ํด๋ฆญ
์ ์ผ ํ๋จ์ '+์ถ๊ฐ' ํด๋ฆญ
ํ์ผ์ ์ฐพ์์ ์ด๊ธฐ ํด๋ฆญ(ctrl์ด๋ shift๋ฅผ ๋๋ฌ์ ํ๋ฒ์ ์ ํ์ด ๊ฐ๋ฅํ๋ค)
๋ง์ง๋ง์ผ๋ก
์ฐ์ธก์๋จ '์ ์ฉ'์ ์ผ๋จ ๋๋ฅด์
๊ทธ๋ผ ํ์ผ์ ๋ฑ๋กํ๋๊ฑด ๋๋ฌ๋ค.
๋ค์์ CSS ์ ์ฉ์ด๋ค.
์ ๋ก๋๋ ํ์ผ์ ์ฐพ์๋ณด๋ฉด ๋์ถฉ
์ด๋ฐ์์ผ๋ก ๋ํ๋๋๋ฐ ๊ทธ ์์ ๋ง์ฐ์ค์ปค์๋ฅผ ๋๊ณ '์ฐํด๋ฆญ' ์ ํด๋ณด๋ฉด
๋ค๋ฅธ๊ฑด ๋ค ํ์ ์๊ณ '๋งํฌ์ฃผ์ ๋ณต์ฌ'๋ฅผ ํด๋ฆญํ๋ค.
์๋ฌด๋ฐ ๋ณํ๊ฐ ์์ง๋ง
ํ ์คํธ์ฐฝ์ ๋ถ์ฌ๋ฃ๊ธฐ๋ฅผ ํด๋ณด๋ฉด
https://tistory1.daumcdn.net/tistory/6722565/skin/images/Avatar-1.svg
์ด๋ฐ์์ผ๋ก ์น ์ฃผ์๊ฐ ๋ํ๋๋ค. ์ด ๊ณ ์ ์ฃผ์๋ ๊ฐ๊ฐ ์ฌ์ฉ์๋ง๋ค ๋ค๋ฅด๊ธฐ๋๋ฌธ์ ์์ ๋ด์ฉ์ ๋ถ์ฌ๋ฃ์ผ๋ฉด ์๋๋ค.
์. 1๋ฒ์ ๋ณต์ฌํ๋๋ฐ ๋๋จธ์ง๋ ์ซ์๋ง ๋ค๋ฅด๊ฒ ํ์ผ์ด๋ฆ์ ์ ์ฅํด๋ ์ด์ ๊ฐ ์๋ค.
์ด์ ์๋จ์ CSS๋ฅผ ๋๋ฌ๋ณด์
์. ๋ ๋ญ๊ฐ ์์ฒญ๋ ๊ธ์๋ค์ด ์์ฒญ๋๊ฒ ๋ง์ง๋ง, ์ ์ผ ์๋๋ก ์ผ๋จ ๋ค ๋ด๋ฆฌ์.
๊น๋จน์ง ์๋๋ก ์ ์ผ ๋ฐ์ผ๋ก ๋ด๋ฆฌ๋ฉด ๋ณต์ฌํด๋ ์น ์ฃผ์ ํ๋๋ฅผ ๋ถ์ฌ๋ฃ๊ธฐ ํด๋์.
๊ทธ ๋ค์์ ์๋ ์ฝ๋๋ฅผ ๋ณต์ฌํ๋ค.
/* ๋๊ธ ์๋ฐํ ์นํ */
[src*='profile_default_00'],
[style*='profile_default_00'] {
background-image: url('๋งํฌ์ฃผ์1');
content: url('๋งํฌ์ฃผ์1');
}
[src*='profile_default_01'],
[style*='profile_default_01'] {
background-image: url('๋งํฌ์ฃผ์2');
content: url('๋งํฌ์ฃผ์2');
}
[src*='profile_default_02'],
[style*='profile_default_02'] {
background-image: url('๋งํฌ์ฃผ์3');
content: url('๋งํฌ์ฃผ์3');
}
[src*='profile_default_03'],
[style*='profile_default_03'] {
background-image: url('๋งํฌ์ฃผ์4');
content: url('๋งํฌ์ฃผ์4');
}
[src*='profile_default_04'],
[style*='profile_default_04'] {
background-image: url('๋งํฌ์ฃผ์5');
content: url('๋งํฌ์ฃผ์5');
}
[src*='profile_default_05'],
[style*='profile_default_05'] {
background-image: url('๋งํฌ์ฃผ์6');
content: url('๋งํฌ์ฃผ์6');
}
[src*='profile_default_06'],
[style*='profile_default_06'] {
background-image: url('๋งํฌ์ฃผ์7');
content: url('๋งํฌ์ฃผ์7');
}
[src*='profile_default_07'],
[style*='profile_default_07'] {
background-image: url('๋งํฌ์ฃผ์8');
content: url('๋งํฌ์ฃผ์8');
}
์ด 8๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ๊ฐ๊ฐ ์ ๋ ๊ฒ ๊ดํธ() ์์ ๋ฐ์ดํ'' ์์ ๋ฃ์.
์ฃผ์ํ ์ ์ ๋ฐ์ดํ๊ฐ ๊ผญ! ํ์ํ๋ค.
๊ทธ๋ผ ์์ ๋ณต์ฌํด๋์๋ ๋ฐ๋ก๋ ธ๋ ๋งํฌ ์ฃผ์๋ ์ง์์ฃผ๊ณ
์ฐ์ธก์๋จ '์ ์ฉ'์ ๋๋ฌ์ฃผ๋ฉด ๋๋๋ค.
๋!
'๐ฅ๏ธ ๋น์ ๊ณต ์ผ๋งคํ > ๐๏ธTISTORY' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[CODEPEN] ๋ธ๋ก๊ทธ์ ํ์ธ์ด ๋ฐ๋ก ํ์ธ๋๋ ์ฝ๋๋ฅผ ๋ฃ์ด๋ณด์ (1) | 2023.12.05 |
---|
๋๊ธ