#1-0 ๋ค์ด๊ฐ๋ ๋ง
๊ทธ๋์ ์ฌ๋ฌ ๊ฐ์๋ค์ ํตํด HTML, CSS, JavaScript, React๋ฅผ ๋ฐฐ์ ๋ค. ์์ง ์๋ฒฝํ ๋ง์คํฐ ํ๋ค๋ผ๊ณ ๋งํ๊ธด ์ด๋ ต์ง๋ง, ๊ทธ๋๋ ๊ทธ๋์ ์ด์ฌํ ๊ณต๋ถํ์ผ๋ ์ด์ ๋๋ง์ ํ๋ก์ ํธ๋ฅผ ์์ํ์ฌ ์ง์ง ๋ด ๊ฒ์ผ๋ก ๋ง๋ค์ด ๋ณด์!
๋๋ '์ฌ๋๋ค์ด ์ปดํจํฐ๋ก ๊ฐ์ฅ ๋ง์ด ํ๋ ๊ฒ ๋ฌด์์ผ๊น?'๋ฅผ ์๊ฐํ์ ๋, ์ธํฐ๋ท ๊ฒ์, ๊ฒ์, ๊ทธ๋ฆฌ๊ณ ์ผํ์ด๋ผ๊ณ ์๊ฐํ๋ค. ๊ทธ๋์ ์ฒซ ํ๋ก์ ํธ๋ก ์ธํ ๋ฆฌ์ด ์ผํ๋ชฐ์ธ '์ค๋์ ์ง' ์ฌ์ดํธ๋ฅผ ํด๋ก ์ฝ๋ฉ ํด๋ณด๊ณ ์ ํ๋ค.
๊ธฐ์กด์ '์ค๋์ ์ง' ์ฌ์ดํธ๋ ํฌ๊ฒ ์ปค๋ฎค๋ํฐ, ์คํ ์ด, ์ธํ ๋ฆฌ์ด ์๊ณต์ด๋ ์ฃผ์ ๋ก ๋๋๋๋ฐ , ๋๋ ์ด ์ค ์คํ ์ด๋ฅผ ์ค์ฌ์ผ๋ก ๋ฉ์ธ ํ์ด์ง, ์ํ ๋ํ ์ผ ํ์ด์ง, ๋ก๊ทธ์ธ ํ์ด์ง ๋ฑ์ ์ ์ํ ๊ฒ์ด๋ค. ๋๋ ํ๋ก ํธ ์์ ์ ์งํํ๊ณ , ๋ฐฑ์๋ ์์ ์ ์นํ ์น๊ตฌ๊ฐ ๋์์ฃผ๊ธฐ๋ก ํ๋ค. (์คํ ๊ณ ๋ง์)
๊ณผ์ฐ ์ฒซ ํ๋ก์ ํธ๋ฅผ ๋ฌด์ฌํ ์ ๋๋ผ ์ ์์ ์ง ๊ฑฑ์ ๋ฐ ๊ธฐ๋๋ฐ์ด๋ค. ์ผ๋จ ๊ธฐ๋ณธ ์ ํ ๊ณผ ๋ผ์ฐํฐ๋ฅผ ์ ๋ฆฌํ๋ฉด์ '๋ด์ผ์ ์ง' ํ๋ก์ ํธ๋ฅผ ์์ํด๋ณด์.
#1-1 Assets ๊ธฐ๋ณธ์ ํ
1) ๊ตฌ๊ธ ํฐํธ ์ ์ฉ
- ๊ตฌ๊ธ ํฐํธ ์ฌ์ดํธ(https://fonts.google.com/)์์ ๋
ธํ ์ฐ์ค์ฒด ๊ฒ์ํ์ฌ index.html ํ์ผ์ link ํ๊ทธ ์ ์ฉ
- SCSS ํ์ผ์ font-family ์ ์ฉ
2) ์ด๋ฏธ์ง ํฌ๋งท ์ ๋ฆฌ
ํ๋ก ํธ ๊ฐ๋ฐ์๋ ์ด๋ฏธ์ง ์ฌ์ฉ์ฉ๋์ ๋ฐ๋ผ ์ด๋ฏธ์ง ํฌ๋งท์ ์ ์ฌ์ฉํด์ผ ๋๋ค. ์ด๋ฏธ์ง ์ฉ๋์ด ์ ์ฒด ์ฌ์ดํธ ์ฉ๋์ ๊ฐ์ฅ ํฐ ๋ถ๋ถ์ ์ฐจ์งํ๊ธฐ ๋๋ฌธ์ด๋ค.
-๋์คํฐ ์ด๋ฏธ์ง(๋นํธ๋งต): png๋ ์ฉ๋์ด ํฌ๊ณ ํ์ง์ด ์ข๊ณ ํฌ๋ช ๋๋ฅผ ๋ํ๋ผ ์ ์๋ค. jpg๋ ์ฉ๋์ด ์์ง๋ง ํ์ง์ด ๋ ์ข๋ค. ํผํฌ๋จผ์ค๊ฐ ์ค์ํ ์ฌ์ดํธ๋ผ๋ฉด ์ฃผ๋ก jpg ์ด๋ฏธ์ง ์ฌ์ฉ์, ์ด๋ฏธ์ง ํ์ง์ด ์ฐ์ ์ธ ์ฌ์ดํธ๋ผ๋ฉด ์ฃผ๋ก png ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๋ฉด ๋๊ฒ ๋ค.
-๋ฐฑํฐ ์ด๋ฏธ์ง: svg๋ ํ๋ ์ ์ด๋ฏธ์ง๊ฐ ๊นจ์ง์ง ์์ผ๋ฏ๋ก ์ฃผ๋ก ๋ก๊ณ ๋ ์์ด์ฝ์ ์ฌ์ฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ xml ์ด๋ผ๋ ๋งํฌ์
์ธ์ด์ ์ข
๋ฅ์ด๋ฏ๋ก css์ javascript๋ก ์์ ์ด ๊ฐ๋ฅํ๋ค. ์ฉ๋ต๋ ์๋ค.
โป๋ฆฌ์กํธ์์ svg ์ด๋ฏธ์ง ์ฌ์ฉํ๋ Tip
svg ์ด๋ฏธ์ง๋ฅผ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์ผ๋ก ์ฌ์ฉํ๋ฉด svg๋ฅผ ์ฝ๊ฒ ์ปค์คํ
ํ ์ ์๋ค. ๋ณ๊ฒฝํ๊ณ ์ ํ๋ svg ํ์ผ์ฝ๋๋ฅผ current๋ก ์์ ํ์ฌ ์๋์ ๊ฐ์ด ์ฌ์ฉ.
<svg
xmlns="http://www.w3.org/2000/svg"
width="current"
height="current"
viewBox="0 0 24 24"
>
<path fill="current" fill-rule="evenodd" d="...." />
</svg>
import { ReactComponent as Cart } from 'assets/icon/cart.svg';
<Cart width="32" hieght="32" fill="blue"/>
3)ํ๋น์ฝ(favicon) ์ ์ฉ
- Favicon Generator ์ฌ์ดํธ(https://realfavicongenerator.net/)๋ฅผ ์ด์ฉํ์ฌ ๊ธฐ๋ณธ ํ๋น์ฝ svg ํ์ผ์ ๋ณํ์์ผ ์ฌ์ฉํ๋ฉด ํธ๋ฆฌํ๋ค. ๋ณํ ํ index.html ํ์ผ์ link ํ๊ทธ ์ ์ฉ
- ๋ณํ๋ ์ด๋ฏธ์ง๋ public ํด๋ ์์น์ ํ์ผ ๋ฃ๊ธฐ
#1-2 Sass ๊ธฐ๋ณธ์ ํ
- Colors
- Typography
- Layouts
- Mixins
- modules
'[PROJECT] ๋ด์ผ์ ์ง' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
#6. ๋ก๊ทธ์ธ ๊ธฐ๋ฅ ๊ตฌํ (1์ฐจ) (1) | 2021.10.04 |
---|---|
#5. ์ฝ๊ด๋์ ์ฒดํฌ๋ฐ์ค ๊ธฐ๋ฅ ๊ตฌํ (2) | 2021.09.27 |
#4. ์บ๋ก์ (Carousel) ๊ตฌํํ๊ธฐ (0) | 2021.09.25 |
#3. ๋ชจ๋ฌ์ฐฝ ๊ตฌํ( feat. ์์ญ ๋ฐ ํด๋ฆญ ์ ๋ซ๊ธฐ) (0) | 2021.09.15 |
#2. ๋ก๊ทธ์ธ ๊ธฐ๋ฅ ๊ฐ๋ ์ก๊ธฐ (0) | 2021.09.13 |