SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma
SCSS(SASS)์ FLEX Layout์ ์ค์ ์ ์๋ฒฝํ๊ฒ ํ์ฉํฉ๋๋ค! ํผ๊ทธ๋ง๋ก ์ ์ฒด ์น์ฌ์ดํธ์ ๋ฉ์ธ ํ์ด์ง ๋ฐ ํต์ฌ ์๋ธ ํ์ด์ง UI๋ฅผ ๋์์ธํ๊ณ , ์ผ๊ด์ฑ ์๋ ํด๋์ค๋ค์๊ณผ ํจ๊ป HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ํผ๋ธ๋ฆฌ์ฑ๊น์ง ์๋ฃํ๋ ์ฒด๊ณ์ ์ธ ๋ฐ์ํ ์น ์ฌ์ดํธ ํ๋ก์ ํธ ์ ์ ๊ณผ์ ์ ๋๋ค. ์ด 41์๊ฐ ์ด์์ ๊ณผ์ ์์์ ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ์ ์ถฉ๋ถํ ์ตํ๊ณ , PC - ๋ชจ๋ฐ์ผ - ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์์ ์ค๊ณ ๋ฐ ์ ์ํ๋ฉด์ ๋ฐ์ํ ์น ํ๋ก์ ํธ์ ๋ํ ๊ฒฝํ๊ณผ ๋ ธํ์ฐ๋ ๋ฌผ๋ก ์ ์ด์ฟผ๋ฆฌ(jQuery) ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ๊น์ง ๋ํญ ํฅ์์ํค๊ฒ ๋ฉ๋๋ค.
์๊ฐ์ 332๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
Tailwind CSS ๊ฐ์๊ฐ ์๋กญ๊ฒ ์คํ๋์์ต๋๋ค.
์๋ ํ์ธ์. ์ฝ๋ฉ์์ค์ ๋๋ค.
์ด๋ฒ์ ์ฝ๋ฉ์์ค๊ฐ ์ฌํ์ ๊ธฐ์ธ์ฌ์ ๋ง๋ Tailwind CSS ๊ฐ์๊ฐ ์คํ๋์์ต๋๋ค.
์ฝ๋ฉ์์ค๊ฐ ๋ง๋ Tailwind CSS ๊ฐ์๋ [Tailwind CSS๋ก ๊ฐ๋ฐ์๊ฐ ๋ง๋๋ ๋ฉ์ง UI ์คํ์ผ๋ง]๋ผ๋ ์ ๋ชฉ์ผ๋ก ๋ง๋ ๊ฒ ์ฒ๋ผ ๊ฐ๋ฐ์๊ฐ ํผ๋ธ๋ฆฌ์ฑ์ ํ ๋ ํผ๋ธ๋ฆฌ์
๋ชป์ง ์๊ฒ ์์ UI ์คํ์ผ๋ง์ ํ ์ ์๋ ๋ถ๋ถ์ ๊ฐ์ฅ ์ด์ ์ ๋ง์ท์ต๋๋ค.
[Tailwind CSS๋ก ๊ฐ๋ฐ์๊ฐ ๋ง๋๋ ๋ฉ์ง UI ์คํ์ผ๋ง] ๊ฐ์๋ ํ์ฌ ๊ฐ์ฅ ํซํ ํ๋ ์์ํฌ์ธ Tailwind CSS๋ฅผ ์ด๋ก ๋ถํฐ ์ค์ ๋ฐ์ํ ์น์ฌ์ดํธ๊น์ง 19์๊ฐ ์ด์์ ์์ ์๊ฐ์ผ๋ก ์ถฉ์คํ๊ฒ ๋ค๋ฃจ๊ณ ์์ต๋๋ค. ์์ ์๊ฐ์ด ๊ธธ๋ค๊ณ ์ข์ ๊ฐ์๋ ์๋๋๋ค. ํ์ง๋ง ํด๋น ๊ฐ์๋ ์๊ฐ๋ ๊ธธ๊ณ ๊ฐ์๋ ์ข๋ค๊ณ ์๋ถํฉ๋๋ค. ํนํ, Tailwind CSS ๋ชจ๋ ์ด๋ก ์ 8์๊ฐ 30๋ถ ๋์ ์์ธํ๊ฒ ๋ค๋ฃจ๊ธฐ ๋๋ฌธ์ CSS ์ด๋ก ์ด ๋ถ์กฑํ ์ฌ๋์๊ฒ CSS ์ด๋ก ์ ์ถฉ์คํ ํ์ตํ ์ ์์ต๋๋ค.
Tailwind CSS๋ CSS Frameworks Ranking์์ ํ์ฌ๊น์ง ๊พธ์คํ ์ธ๊ธฐ๋ฅผ ๋๋ฆฌ๊ณ ์๊ณ , ๋ง์กฑ๋ 1์๋ฅผ ํ๊ณ ์๋ Tailwind CSS๋ ์์ฆ ์ ์ธ๊ณ์ ์ผ๋ก ๊ฐ์ฅ ํซํ CSS ํ๋ ์์ํฌ์
๋๋ค. ํซํ ์ด์ ์ค์ ๊ฐ์ฅ ๋ํ์ ์ธ ๊ฒ์ด ๋ฐ๋ก ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํ ์ฐฝ์์ ์ธ ์คํ์ผ๋ง์ ํ ์ ์๊ณ ๋ํ, ์ข์ ํ๋ฆฌํฐ์ ๋์์ธ์ ๋ง๋ค๊ธฐ ์ํ ์์
์๊ฐ์ด ๊ฝค ๋น ๋ฅด๋ค๋ ์ ์ด๋ผ ์๊ฐ๋ฉ๋๋ค.
์ด๋ก ์์ ๋ฟ๋ง ์๋๋ผ Tailwind CSS๋ก ๋ง๋๋ ์ค์ ์์ ๋ค ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฐ์ ๊ฒฝ๋ ฅ ์ด๋ ฅ์ & ํฌํธํด๋ฆฌ์ค ์๊ฐ ๋ฐ์ํ ์น ์ ์๋ ์ถฉ์คํ๊ฒ ๋ฐฐ์ฐ์๊ณ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ผ์ค ์ ์์ต๋๋ค.
โ ๊ฐ์์๊ฐ ๋ฐ ๋ฌด๋ฃ๊ฐ์ ๋ณด๋ฌ๊ฐ๊ธฐ : https://inf.run/pjqKk








