์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

์ดˆ๋ณด์ž๋ฅผ ์œ„ํ•œ Sass ๊ธฐ์ดˆ ๊ฐ•์˜ & ์ž๋ชฝํ†ก ํด๋ก ์ฝ”๋”ฉ

Sass๋Š” CSS์˜ ํ™•์žฅ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. CSS์˜ ๋‹จ์ ์„ ๋ณด์™„ํ•ด ๋›ฐ์–ด๋‚œ ์ƒ์‚ฐ์„ฑ์„ ๋ณด์žฅํ•˜๋ฉฐ, ๊ฐ•๋ ฅํ•˜๊ณ  ๊ฐ„๊ฒฐํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์ดˆ ๊ตฌ๋ฌธ์„ ๋ฐฐ์šฐ๊ณ , ๋ฐฐ์šด ๋‚ด์šฉ์„ ํ™œ์šฉํ•œ ํด๋ก ์ฝ”๋”ฉ์„ ์ฆ๊ธฐ๋ฉด์„œ Sass๋ฅผ ๋ฐฐ์›Œ๋ณด์„ธ์š”. ์žฌ๋ฏธ๋Š” ๋”ํ•˜๊ณ  ๋ถ€๋‹ด์€ ๋œ์—ˆ์Šต๋‹ˆ๋‹ค!

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ํผ๋ธ”๋ฆฌ์‹ฑ, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Sass

  • SCSS

  • CSS

Sass๋กœ ๋‚ด๊ฐ€ ์ง  CSS ์ฝ”๋“œ
๊ฐ€๋…์„ฑ & ์ƒ์‚ฐ์„ฑ ํ•œ ๋‹จ๊ณ„ ์—…๊ทธ๋ ˆ์ด๋“œ!

CSS์˜ Next Level,
Sass ์ž…๋ฌธ ๊ฐ•์˜

์ด ๊ฐ•์˜๋Š” ๊ธฐ์ดˆ ์ด๋ก ๋ถ€ํ„ฐ ์‹ค์ „ ์—ฐ์Šต๊นŒ์ง€ 23๊ฐœ์˜ ์˜์ƒ์œผ๋กœ ๊ตฌ์„ฑ๋œ ์ดˆ๊ธ‰ CSS ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ Sass ๊ธฐ์ดˆ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. HTML/CSS์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ์ง€์‹๋งŒ ๊ฐ€์ง€๊ณ  ๊ณ„์‹œ๋ฉด ๋ถ€๋‹ด ์—†์ด ์†Œํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.


์ด ๊ฐ•์˜๋ฅผ
์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค

HTML/CSS๋Š”
๋ฐฐ์› ๋Š”๋ฐโ€ฆ

์›น ๊ฐœ๋ฐœ์ž๋กœ์จ ์ข€ ๋” ๋ฐœ์ „ํ•˜๊ธธ ์›ํ•˜๋Š” ๋ถ„

Sass๋ฅผ
๋ฐฐ์›Œ๋ณผ๊นŒ?

Sass๋ฅผ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ๊ณต๋ถ€๋ฅผ ๋ง์„ค์ด๊ณ  ๊ณ„์‹  ๋ถ„

CSS ๋•Œ๋ฌธ์—
์ŠคํŠธ๋ ˆ์Šค ๋ฐ›์•„์š”

CSS ๋•Œ๋ฌธ์— ๋ฐค์ƒˆ์›Œ๊ฐ€๋ฉฐ ๊ณ ์ƒ ํ•ด๋ณด์‹  ๋ถ„

ํด๋ก ์ฝ”๋”ฉ์ด
์ธ๊ธฐ๋ผ๋Š”๋ฐโ€ฆ

ํด๋ก ์ฝ”๋”ฉ์„ ํ†ตํ•œ ํ•™์Šต์— ํฅ๋ฏธ๋ฅผ ๋Š๋ผ์‹œ๋Š” ๋ถ„


๊ทธ๋Ÿฐ๋ฐ,
Sass๊ฐ€ ๋ญ์˜ˆ์š”?

Sass(Syntatically Awesome StyleSheets)๋Š” ๊ฐ•๋ ฅํ•˜๊ณ  ์•ˆ์ •์ ์ธ CSS ํ™•์žฅ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋กœ์จ, ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด ์ƒ์‚ฐ์„ฑ๊ณผ ๊ฐ€๋…์„ฑ์— ํฌ๊ฒŒ ๊ธฐ์—ฌํ•ฉ๋‹ˆ๋‹ค.


์–ด๋–ค ๊ฐ•์˜์˜ˆ์š”?

Sass ๊ณต๋ถ€์— ๊ด€์‹ฌ์€ ์žˆ์ง€๋งŒ, ๋ถ€๋‹ด์Šค๋Ÿฌ์›Œ ๋ง์„ค์ด๊ณ  ๊ณ„์‹  ๋ถ„๋“ค์„ ์œ„ํ•ด ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ž…๋ฌธ ๋‹จ๊ณ„์—์„œ ๊ผญ ์ตํ˜€์•ผ ํ•˜๋Š” ๊ธฐ์ดˆ ์ด๋ก ์„ ํ•™์Šตํ•˜๊ณ , ์ดํ›„ ํด๋ก ์ฝ”๋”ฉ์„ ํ†ตํ•ด Sass์™€ ์นœํ•ด์ ธ ๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์งˆ ๊ฑฐ์˜ˆ์š”. ํด๋ก ์ฝ”๋”ฉ์ด๋ž€, ์‹ค์ œ ์„œ๋น„์Šค๋ฅผ ๋”ฐ๋ผ ๋งŒ๋“ค๋ฉด์„œ ๋ฐฐ์šฐ๋Š” ๊ณต๋ถ€ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ์‹ค์ œ ๊ตฌํ˜„๋˜์–ด์žˆ๋Š” ์„œ๋น„์Šค๋ฅผ ๋‚ด ์†์œผ๋กœ ์ง์ ‘ ๋งŒ๋“ค์–ด๊ฐ€๋ฉด์„œ ๋ฐฐ์šฐ๋Š” ๋น ๋ฅด๊ณ  ํšจ๊ณผ์ ์ธ ๊ณต๋ถ€ ๋ฐฉ๋ฒ•์ด์—์š”!


๊ฐ•์˜ ๋‚ด์šฉ
๋ฏธ๋ฆฌ ํ™•์ธํ•ด๋ณด๊ธฐ


์ž๋ชฝํ†ก ํด๋ก ์ฝ”๋”ฉ
๊ฒฐ๊ณผ๋ฌผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ 

์šฐ๋ฆฌ๋Š” Sass๋ฅผ ์ ๊ทน ํ™œ์šฉํ•ด์„œ ์›น์‚ฌ์ดํŠธ ๋งŒ๋“œ๋Š” ์‹ค์Šต์„ ์ง„ํ–‰ํ•ด ๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“ค ์›น์‚ฌ์ดํŠธ๋Š” ๋ฉ”์‹ ์ € ์•ฑ ์นด**ํ†ก์„ ํ‰๋‚ด๋‚ด์–ด ๋งŒ๋“  ์ž๋ชฝํ†ก์ด๋ผ๋Š” ์›น์‚ฌ์ดํŠธ์ธ๋ฐ์š”. ๋‹น์—ฐํžˆ(!) ์ด ์ž๋ชฝํ†ก์€ ์‹ค์ œ ์„œ๋น„์Šค๋˜๋Š” ์›น์‚ฌ์ดํŠธ๋Š” ์•„๋‹ˆ์—์š”. ์—ฌ๋Ÿฌ๋ถ„๊ณผ ํ•จ๊ป˜ ์‹ค์Šต์„ ์ง„ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  ์›น์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.


ํด๋ก ์ฝ”๋”ฉ.. ๋ถ€๋‹ด์Šค๋Ÿฌ์šฐ์„ธ์š”?

์™„์„ฑ ๋ชฉํ‘œ๋ฅผ ์„ค์ •ํ•˜๊ณ , ์ด๋ฅผ ์œ„ํ•ด ํ•œ๋•€ ํ•œ๋•€ ์ฝ”๋”ฉํ•ด๋‚˜๊ฐ€๋Š” ํด๋ก ์ฝ”๋”ฉ์˜ ๋ฐฉ์‹์ด ๋ถ€๋‹ด๋˜์‹œ๋Š” ๋ถ„๋“ค๋„ ๊ณ„์‹ค ๊ฑฐ์˜ˆ์š”. ๊ทธ๋Ÿฐ ๋ถ„๋“ค์„ ์œ„ํ•ด ์™„์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ํ•จ๊ป˜ ์ œ๊ณตํ•ด๋“œ๋ฆฌ๋‹ˆ, ๋‘๋ ค์›€์€ ๋œ๊ณ , ์ฐจ๊ทผ์ฐจ๊ทผ ํ•ด๋‚˜๊ฐ„๋‹ค๋Š” ๋งˆ์Œ์œผ๋กœ ๋ถ€๋‹ด์—†์ด ํ•จ๊ป˜ํ•ด์ฃผ์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. 


์ˆ˜๊ฐ• ์ „์—
ํ™•์ธํ•ด์ฃผ์„ธ์š”

ํ•˜๋‚˜, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ค€๋น„๋ฌผ์„ ์ฑ™๊ฒจ์ฃผ์„ธ์š”!

๐Ÿ’ป ์ปดํ“จํ„ฐ
๐Ÿ’ป ์ฝ”๋“œ ์—๋””ํ„ฐ (์ˆ˜์—…์—์„œ๋Š” Visual Studio Code๋ฅผ ์‚ฌ์šฉํ•ด์š”)
๐Ÿ’ป ์˜ํƒ€ ๋Šฅ๋ ฅ (์†๋„๊ฐ€ ๋Š๋ ค๋„ ๊ดœ์ฐฎ์•„์š”)

๋‘˜, ์ˆ˜๊ฐ• ์ „ ๋ฏธ๋ฆฌ ์•Œ๋ ค๋“œ๋ ค์š”!

๐Ÿ‘‰๐Ÿป ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ์ดˆ ์ด๋ก  ์˜์ƒ์—๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์žฅ๋ฉด์ด ๋“ฑ์žฅํ•˜๋Š”๋ฐ, ์ž์นซ ์˜์ƒ์ด ์ง€๋ฃจํ•ด์งˆ ์ˆ˜ ์žˆ๋‹ค๊ณ  ํŒ๋‹จํ•ด ๋ฐฐ์† ์ฒ˜๋ฆฌํ•˜๊ฑฐ๋‚˜ ํƒ€์ดํ•‘ ๊ณผ์ •์„ ์Šคํ‚ตํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ฝ”๋”ฉ ์‹ค์Šต์„ ๋”ฐ๋ผ ํ•˜์‹œ๋Š” ๊ฒฝ์šฐ ์ผ์‹œ์ •์ง€ ๊ธฐ๋Šฅ์„ ์ ์ ˆํžˆ ํ™œ์šฉํ•ด ๊ฐ€์‹œ๋ฉด์„œ ์‹ค์Šต์„ ์ง„ํ–‰ํ•˜์‹œ๊ธธ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค! (ํด๋ก ์ฝ”๋”ฉ ์‹œ์—๋Š” ๋น„๊ต์  ์ฒœ์ฒœํžˆ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋‹ˆ ์•ˆ์‹ฌํ•ด์ฃผ์„ธ์š”^^)


์œ ๋…ธ์ฝ”๋”ฉ์˜
HTML/CSS ๊ธฐ์ดˆ ๊ฐ•์˜

์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•œ HTML ๊ธฐ์ดˆ ๊ฐ•์˜

์›น ์‚ฌ์ดํŠธ์˜ ๊ธฐ๋ณธ์ด ๋˜๋Š” HTML์˜ ์ฃผ์š” ๊ฐœ๋…๊ณผ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค

์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•œ CSS ๊ธฐ์ดˆ ๊ฐ•์˜

์›น ์‚ฌ์ดํŠธ๋ฅผ ๊พธ๋ฏธ๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ CSS์˜ ์ฃผ์š” ๊ฐœ๋…๊ณผ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • HTML/CSS๋ฅผ ๊ณต๋ถ€ ์ค‘์ด๊ฑฐ๋‚˜ ๊ณต๋ถ€ํ•ด ๋ณธ ์‚ฌ๋žŒ

  • CSS๋ฅผ ๊ณต๋ถ€ํ–ˆ์ง€๋งŒ ๋ญ”๊ฐ€ ๋ถ€์กฑํ•œ ๋Š๋‚Œ์ด ๋“œ๋Š” ์‚ฌ๋žŒ

  • ํด๋ก ์ฝ”๋”ฉ์„ ๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML

  • CSS

์•ˆ๋…•ํ•˜์„ธ์š”
์œ ๋…ธ์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

17,306

๋ช…

์ˆ˜๊ฐ•์ƒ

840

๊ฐœ

์ˆ˜๊ฐ•ํ‰

31

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

7

๊ฐœ

๊ฐ•์˜

๊ฐœ๋ฐœ์ž ์ถœ์‹  ์‹ญ์žก์Šค ํฌ๋ฆฌ์—์ดํ„ฐ.
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐ•์‚ฌ ๊ฒธ ์ž‘๊ฐ€๋กœ ํ™œ๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์œ ํŠœ๋ธŒ <์œ ๋…ธ์ฝ”๋”ฉ> ์ฑ„๋„ ์šด์˜ ์ค‘์ž…๋‹ˆ๋‹ค.

 

๋ฐฐ์›€์˜ ๊ณผ์ •์—์„œ ๊ฒช๋Š” ๋ถˆํ•„์š”ํ•œ ๊ณ ํ†ต๋“ค์ด ์‚ฌ๋ผ์ง€๊ธธ ๋ฐ”๋ผ๊ณ , ๋˜ ๊ทธ๋ž˜์•ผ๋งŒ ํ•œ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค.
๊ฒฝํ—˜์ž์˜ ์ง„์ •์„ฑ๊ณผ ๊ฒฝํ—˜์„ ๋‚˜๋ˆ„๋ฉด ๊ณ ํ†ต์€ ์ค„์–ด๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ €์˜ ๋ชจ๋“  ๊ฐ•์˜ ์ฝ˜ํ…์ธ ์—์„œ ๊ทธ๋Ÿฐ ๋งˆ์Œ์„ ๋Š๋ผ์‹ค ์ˆ˜ ์žˆ๋„๋ก ๋…ธ๋ ฅํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
๋งŽ์€ ๋ถ„๋“ค์ด ์ฝ”๋”ฉ์„ ์žฌ๋ฏธ์žˆ๊ฒŒ ๋Š๋ผ๊ณ , ๋‹จ์ˆœํ•˜๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๊ธฐ ์œ„ํ•ด ํ•ญ์ƒ ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค^^

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

27๊ฐœ โˆ™ (4์‹œ๊ฐ„ 7๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!