SCSS ๊ธฐ์ด๋ถํฐ ํ์ฉ๊น์ง ์ฒด๊ณ์ ์ผ๋ก ๋ฐฐ์ฐ์ค ์ ์์ต๋๋ค. ํผ๋ธ๋ฆฌ์ ์ทจ์ ์ ์ํด SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ด ๊ฒฝ์๋ ฅ์ ๋์ฌ์ฃผ๋ ๋งํผ ๋ฅ๋ ฅ์ ์ฆ๋ช ํ๋ SCSS(SASS)+GRID+FLEX๋ฅผ ํ์ฉํ ์ค์ ํฌํธํด๋ฆฌ์ค ํผ๋ธ๋ฆฌ์ฑ ๊ฒฐ๊ณผ๋ฌผ๋ ์ป์ผ์ค ์ ์์ต๋๋ค. SCSS(SASS) ํต์ฌ์ด๋ก & ์ค์ ์์ ์ค์ฌ์ผ๋ก ๊ตฌ์ฑ๋ ์์ ์ด๋ฉฐ ์ทจ์ ๊ณผ ์ค๋ฌด๋ฅผ ์ํด SCSS(SASS)+GRID+FLEX ํผ๋ธ๋ฆฌ์ฑ ์คํฌ๊ณผ ๋ ธํ์ฐ๋ฅผ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
[์คํ๋ผ์ธ ๊ฐ์ ์คํ] ํผ๋ธ๋ฆฌ์ ์ทจ์ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์ ์ ๋ฐ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ข
[์คํ๋ผ์ธ ๊ฐ์ ์คํ] ํผ๋ธ๋ฆฌ์ ์ทจ์ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์ ์ ๋ฐ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ข
์๋
ํ์ธ์. ์ฝ๋ฉ์์ค์
๋๋ค.
์ฝ๋ฉ์์ค๊ฐ ์ฌํด 4์๋ถํฐ ์์ํ๋ ์คํ๋ผ์ธ ๊ฐ์๋ฅผ ์๊ฐํฉ๋๋ค.
์ด๋ฒ์ <ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์ ์ ๋ฐ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ข>๋ฅผ ์คํ๋ผ์ธ์ผ๋ก ์งํํฉ๋๋ค.
์ด๋ฒ์ ์คํํ๋ ์คํ๋ผ์ธ ๊ฐ์ ํน์ง์ 6์ฃผ๊ณผ์ ๋์ ํผ๋ธ๋ฆฌ์ ์ง๊ตฐ์ผ๋ก ๋น ๋ฅธ ์ทจ์ ๊ณผ ๊ฒฝ์๋ ฅ ์๋ ๋ฉด์ ์ ๋ณผ ์ ์๋ ์ญ๋์ ๊ธฐ๋ฆ ๋๋ค. ๊ตฌ์ฒด์ ์ผ๋ก ํผ๋ธ๋ฆฌ์ ์ทจ์ ์ ์ํด ํ์์ธ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง๋ฅผ ์ฝ๋ฉ์์ค์ ๊ฐ์ธ ์ง๋๋ฅผ ๋ฐ์ผ๋ฉด์ 6์ฃผ ๋์ ์ ๋ง ๊ด์ฐฎ๊ฒ ์์ฑํฉ๋๋ค.
์์ ๋ด์ฉ์ ์ฝ๋ฉ์์ค๊ฐ ์ง๋ ๊ตญ๋น ํผ๋ธ๋ฆฌ์ฑ ํ์์์ ์๋ฃํ๊ธฐ ์ ํ๋ฌ ๋์ ์งํํ๋ <๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์> ์ปค๋ฆฌํ๋ผ์ ๊ทธ๋๋ก ์งํํฉ๋๋ค. ๋ฌผ๋ก ๊ตญ๋น ํผ๋ธ๋ฆฌ์ฑ ํ์ ํ์๋ค์ฒ๋ผ ํ์์์ ์์ ํ๋ ์๊ฐ์ ๋ง์ด ํ ์ ํ ์๋ ์์ง๋ง ์ด๋ฐ ๋ถ๋ถ์ ์ปค๋ฒํ๊ธฐ ์ํด ๋งค์ฃผ ์งํํด์ผ ํ ์์ ๋์ ๊ฐ์ธ๋ณ๋ก ์ ์ํ๊ณ ๋ค์์ฃผ์ ์ธ๋ฐํ๊ฒ ์ฒดํฌํฉ๋๋ค. ๊ตญ๋น ํผ๋ธ๋ฆฌ์ฑ ํ์ ๋๋ ํ์๋ค์ด ๋ง์์ ๊ฐ์ธ๋ณ๋ก ์ฒดํฌ & ํผ๋๋ฐฑ์ ํ๋ ๋ถ๋ถ์ด ์ ํ์ ์ด์ง๋ง ์ด๋ฒ์๋ ์๊ทธ๋ฃน์ผ๋ก ์งํํ๊ธฐ ๋๋ฌธ์ ์๊ฐ์ ๊ฐ์ธ์ ๋ง๊ฒ ๊ฑฐ์ 1:1๋ก ์์ ๋ณด์์ ์ฝ๋ฉ์์ค์ ํจ๊ป ํ๊ฒ ๋ฉ๋๋ค.
ํนํ ์ด๋ฒ ์คํ๋ผ์ธ ์์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด๋ถํฐ ํต์ฌ๊น์ง ํ์ ์์ ๊ฐ๋ฐ์์ ํ์ ์ ์ํ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ ฅ๋ ๊ฐ์ถ๊ฒ ๋ฉ๋๋ค. ์์ฆ ํผ๋ธ๋ฆฌ์ ์ฑ์ฉ์์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ(Vanilla JavaScript)์ ๋ํ ์ดํด๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง์ ์ด๋ ฅ์์ ์คํฌ๋ก ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ค์ํ ๋ฟ๋ง ์๋๋ผ ์ฑ์ฉ๊ณผ์ ์์ ํ์ ๋ฅ๋ ฅ์ด ๋์์ต๋๋ค. ๊ทธ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ์ด๋ก ๊ณผ ํจ๊ป ์ด๋ก ์์ ๋จ๊ณ๋ณ๋ก ์ค๊ฐ์ ์ค๋ชฐ๋ฏธ์ (Small Mission)์ผ๋ก ํด๋น ์ด๋ก ์ ์ค์ ์์ ๋ฅผ ํตํด์ ์๋ฒฝํ๊ฒ ์ดํดํ๋ ๊ณผ์ ์ ๊ฑฐ์น๊ฒ ๋ฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ ๊ฒ ์ค๋ชฐ๋ฏธ์ ์ผ๋ก ๋ง๋ [์๋ฐ์คํฌ๋ฆฝํธ(Vanilla JavaScript) ์ค์ ์์ ] ๊ฒฐ๊ณผ๋ฌผ์ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ ๋ฌผ๋ก ์ฌ๋ฆฝ๋๋ค. ์ด๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ์์ ๋ฌผ์ ํตํด์ ํผ๋ธ๋ฆฌ์ ์ง์์์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฅ๋ ฅ์ ๊ตฌ์ ์ฒ์ผ๋ก ์ธ์ฌ ๋ด๋น์์๊ฒ ๋ณด์ฌ์ค ์ ์๊ธฐ ๋๋ฌธ์ ํ ์ง์์์ ๋นํด ํฐ ๊ฒฝ์๋ ฅ์ ๊ฐ์ง๊ฒ ๋ฉ๋๋ค.
๋ ์์ธ ๋ด์ฉ์ ์ฝ๋ฉ์์ค ๋ธ๋ก๊ทธ์์ ํ์ธํ์ธ์.
โ ์คํ๋ผ์ธ ๊ฐ์ ์์ธ ๋ณด๊ธฐ : https://www.inflearn.com/blogs/3210