Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

SCSS(SASS)+GRID+FLEX ์‹ค์ „ ํฌํŠธํด๋ฆฌ์˜ค ํผ๋ธ”๋ฆฌ์‹ฑ

SCSS ๊ธฐ์ดˆ๋ถ€ํ„ฐ ํ™œ์šฉ๊นŒ์ง€ ์ฒด๊ณ„์ ์œผ๋กœ ๋ฐฐ์šฐ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํผ๋ธ”๋ฆฌ์…” ์ทจ์—…์„ ์œ„ํ•ด SCSS(SASS) ํ™œ์šฉ ๋Šฅ๋ ฅ์ด ๊ฒฝ์Ÿ๋ ฅ์„ ๋†’์—ฌ์ฃผ๋Š” ๋งŒํผ ๋Šฅ๋ ฅ์„ ์ฆ๋ช…ํ•˜๋Š” SCSS(SASS)+GRID+FLEX๋ฅผ ํ™œ์šฉํ•œ ์‹ค์ „ ํฌํŠธํด๋ฆฌ์˜ค ํผ๋ธ”๋ฆฌ์‹ฑ ๊ฒฐ๊ณผ๋ฌผ๋„ ์–ป์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SCSS(SASS) ํ•ต์‹ฌ์ด๋ก  & ์‹ค์ „ ์˜ˆ์ œ ์ค‘์‹ฌ์œผ๋กœ ๊ตฌ์„ฑ๋œ ์ˆ˜์—…์ด๋ฉฐ ์ทจ์—…๊ณผ ์‹ค๋ฌด๋ฅผ ์œ„ํ•ด SCSS(SASS)+GRID+FLEX ํผ๋ธ”๋ฆฌ์‹ฑ ์Šคํ‚ฌ๊ณผ ๋…ธํ•˜์šฐ๋ฅผ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

[์˜คํ”„๋ผ์ธ ๊ฐ•์˜ ์˜คํ”ˆ] ํผ๋ธ”๋ฆฌ์…” ์ทจ์—… ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ์ œ์ž‘ ๋ฐ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ•์ขŒ

[์˜คํ”„๋ผ์ธ ๊ฐ•์˜ ์˜คํ”ˆ] ํผ๋ธ”๋ฆฌ์…” ์ทจ์—… ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ์ œ์ž‘ ๋ฐ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ•์ขŒ

์•ˆ๋…•ํ•˜์„ธ์š”. ์ฝ”๋”ฉ์›์Šค์ž…๋‹ˆ๋‹ค.
์ฝ”๋”ฉ์›์Šค๊ฐ€ ์˜ฌํ•ด 4์›”๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ์˜คํ”„๋ผ์ธ ๊ฐ•์˜๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.
์ด๋ฒˆ์— <ํผ๋ธ”๋ฆฌ์…” ์ทจ์—…์„ ์œ„ํ•œ ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ์ œ์ž‘ ๋ฐ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ•์ขŒ>๋ฅผ ์˜คํ”„๋ผ์ธ์œผ๋กœ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฒˆ์— ์˜คํ”ˆํ•˜๋Š” ์˜คํ”„๋ผ์ธ ๊ฐ•์˜ ํŠน์ง•์€ 6์ฃผ๊ณผ์ • ๋™์•ˆ ํผ๋ธ”๋ฆฌ์…” ์ง๊ตฐ์œผ๋กœ ๋น ๋ฅธ ์ทจ์—…๊ณผ ๊ฒฝ์Ÿ๋ ฅ ์žˆ๋Š” ๋ฉด์ ‘์„ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์—ญ๋Ÿ‰์„ ๊ธฐ๋ฆ…๋‹ˆ๋‹ค. ๊ตฌ์ฒด์ ์œผ๋กœ ํผ๋ธ”๋ฆฌ์…” ์ทจ์—…์„ ์œ„ํ•ด ํ•„์ˆ˜์ธ ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ํ™ˆํŽ˜์ด์ง€๋ฅผ ์ฝ”๋”ฉ์›์Šค์˜ ๊ฐœ์ธ ์ง€๋„๋ฅผ ๋ฐ›์œผ๋ฉด์„œ 6์ฃผ ๋™์•ˆ ์ •๋ง ๊ดœ์ฐฎ๊ฒŒ ์™„์„ฑํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜์—…๋‚ด์šฉ์€ ์ฝ”๋”ฉ์›์Šค๊ฐ€ ์ง€๋‚œ ๊ตญ๋น„ ํผ๋ธ”๋ฆฌ์‹ฑ ํ•™์›์—์„œ ์ˆ˜๋ฃŒํ•˜๊ธฐ ์ „ ํ•œ๋‹ฌ ๋™์•ˆ ์ง„ํ–‰ํ–ˆ๋˜ <๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ํ™ˆํŽ˜์ด์ง€ ์ œ์ž‘> ์ปค๋ฆฌํ˜๋Ÿผ์„ ๊ทธ๋Œ€๋กœ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๊ตญ๋น„ ํผ๋ธ”๋ฆฌ์‹ฑ ํ•™์› ํ•™์ƒ๋“ค์ฒ˜๋Ÿผ ํ•™์›์—์„œ ์ž‘์—…ํ•˜๋Š” ์‹œ๊ฐ„์„ ๋งŽ์ด ํ• ์• ํ•  ์ˆ˜๋Š” ์—†์ง€๋งŒ ์ด๋Ÿฐ ๋ถ€๋ถ„์„ ์ปค๋ฒ„ํ•˜๊ธฐ ์œ„ํ•ด ๋งค์ฃผ ์ง„ํ–‰ํ•ด์•ผ ํ•  ์ž‘์—…๋Ÿ‰์„ ๊ฐœ์ธ๋ณ„๋กœ ์ œ์‹œํ•˜๊ณ  ๋‹ค์Œ์ฃผ์— ์„ธ๋ฐ€ํ•˜๊ฒŒ ์ฒดํฌํ•ฉ๋‹ˆ๋‹ค. ๊ตญ๋น„ ํผ๋ธ”๋ฆฌ์‹ฑ ํ•™์› ๋•Œ๋Š” ํ•™์ƒ๋“ค์ด ๋งŽ์•„์„œ ๊ฐœ์ธ๋ณ„๋กœ ์ฒดํฌ & ํ”ผ๋“œ๋ฐฑ์„ ํ•˜๋Š” ๋ถ€๋ถ„์ด ์ œํ•œ์ ์ด์ง€๋งŒ ์ด๋ฒˆ์—๋Š” ์†Œ๊ทธ๋ฃน์œผ๋กœ ์ง„ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ˆ˜๊ฐ•์ƒ ๊ฐœ์ธ์— ๋งž๊ฒŒ ๊ฑฐ์˜ 1:1๋กœ ์ˆ˜์ • ๋ณด์™„์„ ์ฝ”๋”ฉ์›์Šค์™€ ํ•จ๊ป˜ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํŠนํžˆ ์ด๋ฒˆ ์˜คํ”„๋ผ์ธ ์ˆ˜์—…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ํ•ต์‹ฌ๊นŒ์ง€ ํ˜„์—…์—์„œ ๊ฐœ๋ฐœ์ž์™€ ํ˜‘์—…์„ ์œ„ํ•œ ์ˆœ์ˆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹ค๋ ฅ๋„ ๊ฐ–์ถ”๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์š”์ฆ˜ ํผ๋ธ”๋ฆฌ์…” ์ฑ„์šฉ์—์„œ ์ˆœ์ˆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Vanilla JavaScript)์— ๋Œ€ํ•œ ์ดํ•ด๋„์™€ ๊ฒฐ๊ณผ๋ฌผ์„ ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ํ™ˆํŽ˜์ด์ง€์™€ ์ด๋ ฅ์„œ์— ์Šคํ‚ฌ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ด ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ค‘์š”ํ•  ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ฑ„์šฉ๊ณผ์ •์—์„œ ํ•„์ˆ˜ ๋Šฅ๋ ฅ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“  ์ด๋ก ๊ณผ ํ•จ๊ป˜ ์ด๋ก  ์ˆ˜์—… ๋‹จ๊ณ„๋ณ„๋กœ ์ค‘๊ฐ„์— ์Šค๋ชฐ๋ฏธ์…˜(Small Mission)์œผ๋กœ ํ•ด๋‹น ์ด๋ก ์„ ์‹ค์ œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด์„œ ์™„๋ฒฝํ•˜๊ฒŒ ์ดํ•ดํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ ‡๊ฒŒ ์Šค๋ชฐ๋ฏธ์…˜์œผ๋กœ ๋งŒ๋“  [์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Vanilla JavaScript) ์‹ค์ „ ์˜ˆ์ œ] ๊ฒฐ๊ณผ๋ฌผ์€ ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ํ™ˆํŽ˜์ด์ง€์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž‘์—…๋ฌผ๋กœ ์˜ฌ๋ฆฝ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž‘์—…๋ฌผ์„ ํ†ตํ•ด์„œ ํผ๋ธ”๋ฆฌ์…” ์ง€์›์ž์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Šฅ๋ ฅ์„ ๊ตฌ์ œ์ฒ™์œผ๋กœ ์ธ์‚ฌ ๋‹ด๋‹น์ž์—๊ฒŒ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํƒ€ ์ง€์›์ž์— ๋น„ํ•ด ํฐ ๊ฒฝ์Ÿ๋ ฅ์„ ๊ฐ€์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๋” ์ƒ์„ธ ๋‚ด์šฉ์€ ์ฝ”๋”ฉ์›์Šค ๋ธ”๋กœ๊ทธ์—์„œ ํ™•์ธํ•˜์„ธ์š”.

โ–  ์˜คํ”„๋ผ์ธ ๊ฐ•์˜ ์ƒ์„ธ ๋ณด๊ธฐ : https://www.inflearn.com/blogs/3210

๋Œ“๊ธ€