-
TIL 06. 5์ฃผ์ฐจ ํ๊ณ โบ๏ธFront-end Dev. 2021. 12. 4. 02:41
๐ฆ ๋ฉ์์ด ์ฌ์์ฒ๋ผ ํ๋ก ํธ์๋ ์ค์ฟจ 1๊ธฐ ๐ฆ
- 5์ฃผ ์ฐจ ํ๊ณ -
:)
๋ธ๋ก๊ทธ์ ๋๋ฌด ์ํํ๋ ์ง๋๋ ์ ๋ฐ์ฑํ๋ฉฐ
5์ฃผ ์ฐจ ํ๊ณ ๋ฅผ ํด๋ณด๋ ค๊ณ ํ๋ค!์ป๋ ๊ฑด ํ๋ฝํด์ฃผ์ธ์...โจ 5์ฃผ ์ฐจ ํ๊ณ ์ผ๊ธฐ
4์ฃผ ์ฐจ์ HTML/CSS ์์ ์ง๋๋ฅผ ๋๊ฐ ํ SASS๋ฅผ ๋ฐฐ์ ๊ณ 5์ฃผ ์ฐจ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ ์ ์์ํ๋ค.
์์ ์ด ๋์๊ฒ ์์ง ๋๋ฌด ์ด๋ ต์ง๋ง ์์ ์์ ๋์น ๋ถ๋ถ์ ๋ฐ๋ณต์ ์ผ๋ก ์๋ ค์ฃผ์ ์ ์ข์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ฟ์ ..!์์ผ๋ก ๋จ์ 2๋ฌ๋์ ํ์ค์ ์ผ๋ก ์งํฌ ์ ์๋ ๊ณํ์ ์ธ์์ ๊พธ์คํ ๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ํ๋ ๊ฒ์ด ๋ชฉํ์ด๋ค.
์ถ๊ฐ๋ก ๊ทธ๋ ๋ฐฐ์ด ๋ด์ฉ, ์คํฐ๋ ํ๋ ๋ด์ฉ์ ๋ธ๋ก๊ทธ์ ๊ธฐ๋กํ๋ ๊ฒ๋ ๊ณํํ๊ณ ์๋ค.
๐์ก์ ํ๋
1. ์คํฐ๋์ ์ง์คํ๊ธฐ
1) ๊ฒ์ผ๋ฅธ ์คํฐ๋ (ํ, ๋ชฉ, ํ ) โบ๏ธ
- ์๋์ฆ ํด๋ก ์ฝ๋ฉ
: HTML / CSS ๊ฐ ์์ง ์๋๋ก ์๋งจํฑ ํ๊ณ
๊ณ ๋ฏผ์ด ๋ง์ด ๋ค์ด๊ฐ ์ฝ๋ ์ง๊ธฐ, ๊ฐ๋จํ๋ผ๋ ๋ธ๋ก๊ทธ ์ ๋ฆฌํ๊ธฐ
- ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฅ๋ค์ด๋ธ ์คํฐ๋๐ฆ
: ๋งก์ ๋ถ๋ ๋ ธ์ ์ด๋ ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํด์ ๊ธฐ๋ก ๋จ๊ธฐ๊ธฐ
(์๋ฉ....๐)
2) ํผ๊ณต์ ์คํฐ๋ (์, ์, ๊ธ)
: 'ํผ์ ๊ณต๋ถํ๋ ์๋ฐ ์คํฌ๋ฆฝํธ'๋ฅผ ์ฝ๊ณ ๊ฐ์ ๋ฐํ&์ง๋ฌธ (ํธํ๊ฒ)
(6์ผ์ ์ฒ์ ์์ํ๋ ์คํฐ๋๋ผ ๊ธฐ๋ํ๋ ์ค์ด๋ค.)
3) 'i'๋ค ํ๊ณ ํ ์คํฐ๋ (๊ธ, ์ผ)
: ํ์ด ํ๋ก๊ทธ๋๋ฐ์ผ๋ก ๋ฒค๋ฉ ๋จธ์ ๋งํฌ์ ๋ถํฐ ์๋ฐ์คํฌ๋ฆฝํธ๊น์ง ๊ตฌํํ๊ธฐ
: ์๋ก ๊ตฌํํ ๋ด์ฉ ๋ฐํํ๊ณ ํผ๋๋ฐฑ ๋จ๊ธฐ๊ธฐ
('i' ์ฑํฅ๋ค์ด ๋ชจ์ธ ์ฐ๋ฆฌ ํ๊ณ ํ ์ต๊ณ !)
+ ํ๊ณ 2ํ ์๋ฐ์คํฌ๋ฆฝํธ ์คํฐ๋ ์ฐธ๊ด
: ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฅ๋ค์ด๋ธ ์คํฐ๋ + ๋ธ๋ก๊ทธ
(๊ฐ์ธ์ ์ผ๋ก ์ดํด ์ ๋๋ ๋ถ๋ถ์ DN๋๊ป ๋ถํ๋๋ ธ๋๋ฐ, ๊ฐ์ฌํ๊ฒ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์คํฐ๋์
์ด๋ํด์ฃผ์ จ๋ค. ์์ง์ ์ฐธ๊ด์ด์ง๋ง ๋ช ์ ํ๊ณ 2ํ์ผ๋ก์จ ์ด์ฌํ ์ฐธ์ฌํ๊ณ ์ถ๋ค.)
2. ์ฝ๋ ๋ฆฌ๋ทฐ๋ฐ๊ธฐ'๋ฉํ ๋๊ป ๊ทธ๋ ๊ทธ๋ ๋ฐฐ์ด ๋ด์ฉ ์ฝ๋ ๋ฆฌ๋ทฐ๋ฐ๊ธฐ'
- ์์ง ์ฝ๋ ๋ฆฌ๋ทฐ๋ฐ์ ์ค๋ ฅ์ด ์๋๋ค๊ณ ๋ถ๋๋ฝ๊ฒ ์๊ฐํ๋ฉด์ ๋์ค์ผ๋ก ๋ฏธ๋ค๋ ๋ถ๋ถ์ด๋ค.
์ฒ์ ์์ํ๋ ์ฌ๋๋ค์ด ์ฑ์ฅํ๊ธฐ์ ์ฝ๋ ๋ฆฌ๋ทฐ๋ง ํ ๊ฒ ์๋ค๊ณ ํ๋, ์ด ๋ถ๋ถ์ ๋ ธ๋ ฅํ์!
3. ๊ฑด๊ฐ ์ฑ๊ธฐ๊ธฐ
- ํํ์ด ์คํธ๋ ์นญํ๊ธฐ! ๐ฆญ
- ์ ์ฌ์๊ฐ์ ์ฐ์ฑ 10๋ถ์ด๋ผ๋ ํ๋ฉด์ ํ๋น ๋ณด๊ธฐ โ๏ธ
- ๋ต๋ตํ ๋ ๊ฑท๊ธฐ! ๐ถโ๏ธ
+ ์ผ๋ ๋ฒ๋ ๐ฅ๐
( ์ฃผ์ ๋ฆฌ์ฃผ์ ๋ฆฌ ์ด๋ค๋ ๋ป)
: ๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ์์ํ ์ง ํ ๋ฌ์ด ๋์๋ค.์๋ฐ์คํฌ๋ฆฝํธ๊ณผ ํจ๊ป Html / CSS ๊ณต๋ถ๋ ์ํํ ํ๋ฉด ์๋๊ฒ ๋ค๋ ์๊ฐ์ด ๋ ๋ค.
์คํฐ๋์์ ํ๋ ํด๋ก ์ฝ๋ฉ์์ ์๊ฐ์ ๋ง์ถฐ์ ๊ธํ๊ฒ ํค์น์ฐ๋ ๋ฐฉํฅ๋ณด๋ค๋
๊ธฐ์ด๋ผ๋ ํ๋๋ผ๋ ๋ ๋ฐฐ์๊ฐ๋์์ผ๋ก ์งํํด์ผ๊ฒ ๋ค.
์ ๋ ์กฐ๊ธํดํ์ง ๋ง๋ผ๋ ๋ํ๋์ ๋ง์์ ๋ง์์ ํญ์ ์๊ธฐ๊ธฐ!
๊ฐ๋ฐ ๊ณต๋ถ === ์กฐ๊ธํด ํ์ง๋ง์
ํฌ๊ธฐ === ํฌ๊ธฐ๋ ๋ฐฐ์ถ๋ฅผ ์ ๋๋ ์ฐ๋ ๋ง
+ ํ๋ก ํธ์๋ ์ค์ฟจ์ ํ๋ฉด์ ์ธ์์ ์์ง ๋ฐ์ค์ด ์ฌ๋์ด ๊ฐ๋ํ๋ค๋ ๊ฒ์ ๋งค์ผ ๋๋๋ค.๋ง์์ ์ด๊ณ ์ฌ๋๋ค๊ณผ ๊ด๊ณ ๋งบ๋ ๊ฒ ๋๋ฌด ์ด๋ ค์ ๋๋ฐ,
์ฌ๊ธฐ์๋ ์์งํ๊ฒ ์ฌ๋๋ค์๊ฒ ๋ค๊ฐ๊ฐ ์ ์์ด์ ๊ฐ์ฌํ๋ค!
์์ผ๋ก๋ ๋ด๊ฐ ๊ฐ๋ ๊ณณ๋ง๋ค ์ด๋ฐ ๊ฐ๋ฐํ๊ฒฝ์ ๋ง๋ค์ด ๊ฐ๊ณ ์ถ๊ณ ,
๋์๋ฐ์ ๋งํผ ๋์์ ์ฃผ๋ ์ฌ๋์ด ๋๊ณ ์ถ๋ค! ๐