Sass๋ CSS์ ํ์ฅ ์ธ์ด์ ๋๋ค. CSS์ ๋จ์ ์ ๋ณด์ํด ๋ฐ์ด๋ ์์ฐ์ฑ์ ๋ณด์ฅํ๋ฉฐ, ๊ฐ๋ ฅํ๊ณ ๊ฐ๊ฒฐํฉ๋๋ค. ๊ธฐ์ด ๊ตฌ๋ฌธ์ ๋ฐฐ์ฐ๊ณ , ๋ฐฐ์ด ๋ด์ฉ์ ํ์ฉํ ํด๋ก ์ฝ๋ฉ์ ์ฆ๊ธฐ๋ฉด์ Sass๋ฅผ ๋ฐฐ์๋ณด์ธ์. ์ฌ๋ฏธ๋ ๋ํ๊ณ ๋ถ๋ด์ ๋์์ต๋๋ค!
Sass
SCSS
CSS
Sass๋ก ๋ด๊ฐ ์ง CSS ์ฝ๋
๊ฐ๋
์ฑ & ์์ฐ์ฑ ํ ๋จ๊ณ ์
๊ทธ๋ ์ด๋!
์ด ๊ฐ์๋ ๊ธฐ์ด ์ด๋ก ๋ถํฐ ์ค์ ์ฐ์ต๊น์ง 23๊ฐ์ ์์์ผ๋ก ๊ตฌ์ฑ๋ ์ด๊ธ CSS ๊ฐ๋ฐ์๋ฅผ ์ํ Sass ๊ธฐ์ด ๊ฐ์์ ๋๋ค. HTML/CSS์ ๋ํ ๊ธฐ์ด ์ง์๋ง ๊ฐ์ง๊ณ ๊ณ์๋ฉด ๋ถ๋ด ์์ด ์ํํ ์ ์๋ ๊ฐ์์ ๋๋ค.
HTML/CSS๋
๋ฐฐ์ ๋๋ฐโฆ
์น ๊ฐ๋ฐ์๋ก์จ ์ข ๋ ๋ฐ์ ํ๊ธธ ์ํ๋ ๋ถ
Sass๋ฅผ
๋ฐฐ์๋ณผ๊น?
Sass๋ฅผ ์๊ณ ์์ง๋ง ๊ณต๋ถ๋ฅผ ๋ง์ค์ด๊ณ ๊ณ์ ๋ถ
CSS ๋๋ฌธ์
์คํธ๋ ์ค ๋ฐ์์
CSS ๋๋ฌธ์ ๋ฐค์์๊ฐ๋ฉฐ ๊ณ ์ ํด๋ณด์ ๋ถ
ํด๋ก ์ฝ๋ฉ์ด
์ธ๊ธฐ๋ผ๋๋ฐโฆ
ํด๋ก ์ฝ๋ฉ์ ํตํ ํ์ต์ ํฅ๋ฏธ๋ฅผ ๋๋ผ์๋ ๋ถ
Sass(Syntatically Awesome StyleSheets)๋ ๊ฐ๋ ฅํ๊ณ ์์ ์ ์ธ CSS ํ์ฅ ์ธ์ด์ ๋๋ค. CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ก์จ, ์คํ์ผ์ํธ๋ฅผ ์ํ ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํด ์์ฐ์ฑ๊ณผ ๊ฐ๋ ์ฑ์ ํฌ๊ฒ ๊ธฐ์ฌํฉ๋๋ค.
Sass ๊ณต๋ถ์ ๊ด์ฌ์ ์์ง๋ง, ๋ถ๋ด์ค๋ฌ์ ๋ง์ค์ด๊ณ ๊ณ์ ๋ถ๋ค์ ์ํด ์ค๋นํ์ต๋๋ค. ์ ๋ฌธ ๋จ๊ณ์์ ๊ผญ ์ตํ์ผ ํ๋ ๊ธฐ์ด ์ด๋ก ์ ํ์ตํ๊ณ , ์ดํ ํด๋ก ์ฝ๋ฉ์ ํตํด Sass์ ์นํด์ ธ ๋ณด๋ ์๊ฐ์ ๊ฐ์ง ๊ฑฐ์์. ํด๋ก ์ฝ๋ฉ์ด๋, ์ค์ ์๋น์ค๋ฅผ ๋ฐ๋ผ ๋ง๋ค๋ฉด์ ๋ฐฐ์ฐ๋ ๊ณต๋ถ ๋ฐฉ์์ ๋๋ค. ์ค์ ๊ตฌํ๋์ด์๋ ์๋น์ค๋ฅผ ๋ด ์์ผ๋ก ์ง์ ๋ง๋ค์ด๊ฐ๋ฉด์ ๋ฐฐ์ฐ๋ ๋น ๋ฅด๊ณ ํจ๊ณผ์ ์ธ ๊ณต๋ถ ๋ฐฉ๋ฒ์ด์์!
์ฐ๋ฆฌ๋ Sass๋ฅผ ์ ๊ทน ํ์ฉํด์ ์น์ฌ์ดํธ ๋ง๋๋ ์ค์ต์ ์งํํด ๋ณผ ๊ฒ์ ๋๋ค. ์ฐ๋ฆฌ๊ฐ ๋ง๋ค ์น์ฌ์ดํธ๋ ๋ฉ์ ์ ์ฑ ์นด**ํก์ ํ๋ด๋ด์ด ๋ง๋ ์๋ชฝํก์ด๋ผ๋ ์น์ฌ์ดํธ์ธ๋ฐ์. ๋น์ฐํ(!) ์ด ์๋ชฝํก์ ์ค์ ์๋น์ค๋๋ ์น์ฌ์ดํธ๋ ์๋์์. ์ฌ๋ฌ๋ถ๊ณผ ํจ๊ป ์ค์ต์ ์งํํ๊ธฐ ์ํด ๋ง๋ ์น์ฌ์ดํธ์ ๋๋ค.
์์ฑ ๋ชฉํ๋ฅผ ์ค์ ํ๊ณ , ์ด๋ฅผ ์ํด ํ๋ ํ๋ ์ฝ๋ฉํด๋๊ฐ๋ ํด๋ก ์ฝ๋ฉ์ ๋ฐฉ์์ด ๋ถ๋ด๋์๋ ๋ถ๋ค๋ ๊ณ์ค ๊ฑฐ์์. ๊ทธ๋ฐ ๋ถ๋ค์ ์ํด ์์ฑ๋ ์ฝ๋๋ฅผ ํจ๊ป ์ ๊ณตํด๋๋ฆฌ๋, ๋๋ ค์์ ๋๊ณ , ์ฐจ๊ทผ์ฐจ๊ทผ ํด๋๊ฐ๋ค๋ ๋ง์์ผ๋ก ๋ถ๋ด์์ด ํจ๊ปํด์ฃผ์๋ฉด ๋๊ฒ ์ต๋๋ค.
๐ป ์ปดํจํฐ
๐ป ์ฝ๋ ์๋ํฐ (์์
์์๋ Visual Studio Code๋ฅผ ์ฌ์ฉํด์)
๐ป ์ํ ๋ฅ๋ ฅ (์๋๊ฐ ๋๋ ค๋ ๊ด์ฐฎ์์)
๐๐ป ๋๋ถ๋ถ์ ๊ธฐ์ด ์ด๋ก ์์์๋ ์ฝ๋๋ฅผ ์์ฑํ๋ ์ฅ๋ฉด์ด ๋ฑ์ฅํ๋๋ฐ, ์์นซ ์์์ด ์ง๋ฃจํด์ง ์ ์๋ค๊ณ ํ๋จํด ๋ฐฐ์ ์ฒ๋ฆฌํ๊ฑฐ๋ ํ์ดํ ๊ณผ์ ์ ์คํตํ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ๋ฐ๋ผ์ ์ฝ๋ฉ ์ค์ต์ ๋ฐ๋ผ ํ์๋ ๊ฒฝ์ฐ ์ผ์์ ์ง ๊ธฐ๋ฅ์ ์ ์ ํ ํ์ฉํด ๊ฐ์๋ฉด์ ์ค์ต์ ์งํํ์๊ธธ ์ถ์ฒํฉ๋๋ค! (ํด๋ก ์ฝ๋ฉ ์์๋ ๋น๊ต์ ์ฒ์ฒํ ์ฝ๋๋ฅผ ์์ฑํ๋ ์์ฌํด์ฃผ์ธ์^^)
์ ๋ฌธ์๋ฅผ ์ํ HTML ๊ธฐ์ด ๊ฐ์
์น ์ฌ์ดํธ์ ๊ธฐ๋ณธ์ด ๋๋ HTML์ ์ฃผ์ ๊ฐ๋ ๊ณผ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์๊ฐํฉ๋๋ค
์ ๋ฌธ์๋ฅผ ์ํ CSS ๊ธฐ์ด ๊ฐ์
์น ์ฌ์ดํธ๋ฅผ ๊พธ๋ฏธ๊ธฐ ์ํด ํ์ํ CSS์ ์ฃผ์ ๊ฐ๋ ๊ณผ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์๊ฐํฉ๋๋ค
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
HTML/CSS๋ฅผ ๊ณต๋ถ ์ค์ด๊ฑฐ๋ ๊ณต๋ถํด ๋ณธ ์ฌ๋
CSS๋ฅผ ๊ณต๋ถํ์ง๋ง ๋ญ๊ฐ ๋ถ์กฑํ ๋๋์ด ๋๋ ์ฌ๋
ํด๋ก ์ฝ๋ฉ์ ๊ฒฝํํด๋ณด๊ณ ์ถ์ ์ฌ๋
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
17,306
๋ช
์๊ฐ์
840
๊ฐ
์๊ฐํ
31
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
7
๊ฐ
๊ฐ์
๊ฐ๋ฐ์ ์ถ์ ์ญ์ก์ค ํฌ๋ฆฌ์์ดํฐ.
ํ๋ก๊ทธ๋๋ฐ ๊ฐ์ฌ ๊ฒธ ์๊ฐ๋ก ํ๋ํ๊ณ ์์ต๋๋ค.
์ ํ๋ธ <์ ๋
ธ์ฝ๋ฉ> ์ฑ๋ ์ด์ ์ค์
๋๋ค.
๋ฐฐ์์ ๊ณผ์ ์์ ๊ฒช๋ ๋ถํ์ํ ๊ณ ํต๋ค์ด ์ฌ๋ผ์ง๊ธธ ๋ฐ๋ผ๊ณ , ๋ ๊ทธ๋์ผ๋ง ํ๋ค๊ณ ๋ฏฟ์ต๋๋ค.
๊ฒฝํ์์ ์ง์ ์ฑ๊ณผ ๊ฒฝํ์ ๋๋๋ฉด ๊ณ ํต์ ์ค์ด๋ค ์ ์์ต๋๋ค.
์ ์ ๋ชจ๋ ๊ฐ์ ์ฝํ
์ธ ์์ ๊ทธ๋ฐ ๋ง์์ ๋๋ผ์ค ์ ์๋๋ก ๋
ธ๋ ฅํ๊ฒ ์ต๋๋ค.
๋ง์ ๋ถ๋ค์ด ์ฝ๋ฉ์ ์ฌ๋ฏธ์๊ฒ ๋๋ผ๊ณ , ๋จ์ํ๊ฒ ์ดํดํ ์ ์๋๋ก ๋๊ธฐ ์ํด ํญ์ ๋
ธ๋ ฅํ๊ณ ์์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค^^
์ ์ฒด
27๊ฐ โ (4์๊ฐ 7๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
๊ฐ์ ์๊ฐ
02:34
๋ณ์
11:49
๋ฏน์ค์ธ
14:05
@content
07:59
@import
11:04
@extend
11:14
์กฐ๊ฑด๋ฌธ
11:19
๋ฏธ๋์ด ์ฟผ๋ฆฌ
11:54
์๋ชฝํก ๋ง๋ค๊ธฐ
04:19
๋ค๋น๊ฒ์ด์ ๋ฐ
09:50
ํค๋
10:24
์ฑํ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
13:19
์ฑํ
15:20
๊ฐ์ ๋ง๋ฌด๋ฆฌ
06:54