SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma
SCSS(SASS)์ FLEX Layout์ ์ค์ ์ ์๋ฒฝํ๊ฒ ํ์ฉํฉ๋๋ค! ํผ๊ทธ๋ง๋ก ์ ์ฒด ์น์ฌ์ดํธ์ ๋ฉ์ธ ํ์ด์ง ๋ฐ ํต์ฌ ์๋ธ ํ์ด์ง UI๋ฅผ ๋์์ธํ๊ณ , ์ผ๊ด์ฑ ์๋ ํด๋์ค๋ค์๊ณผ ํจ๊ป HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ํผ๋ธ๋ฆฌ์ฑ๊น์ง ์๋ฃํ๋ ์ฒด๊ณ์ ์ธ ๋ฐ์ํ ์น ์ฌ์ดํธ ํ๋ก์ ํธ ์ ์ ๊ณผ์ ์ ๋๋ค. ์ด 41์๊ฐ ์ด์์ ๊ณผ์ ์์์ ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ์ ์ถฉ๋ถํ ์ตํ๊ณ , PC - ๋ชจ๋ฐ์ผ - ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์์ ์ค๊ณ ๋ฐ ์ ์ํ๋ฉด์ ๋ฐ์ํ ์น ํ๋ก์ ํธ์ ๋ํ ๊ฒฝํ๊ณผ ๋ ธํ์ฐ๋ ๋ฌผ๋ก ์ ์ด์ฟผ๋ฆฌ(jQuery) ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ๊น์ง ๋ํญ ํฅ์์ํค๊ฒ ๋ฉ๋๋ค.
์๊ฐ์ 332๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
Tailwind CSS ์ค์ ํฌํธํด๋ฆฌ์ค ํผ๋ธ๋ฆฌ์ฑ ์คํ
Tailwind CSS ์ค์ ํฌํธํด๋ฆฌ์ค ํผ๋ธ๋ฆฌ์ฑ ์คํ
์ค์ง ์ค์ ์์ ์ ์๋ง์ผ๋ก Tailwind CSS ์ค๋ฌด ๋ฅ๋ ฅ ํฅ์!
Tailwind CSS๋ฅผ ํ์ฉํด 26๊ฐ์ง ์ด์์ ๋ค์ํ ์ค์ ์์ ์ ์ํ๋ ๊ณผ์ ์ ๋๋ค. ์ค์ ์์ ๋ฅผ ๋น ๋ฅด๊ฒ ๋ค์ํ๊ฒ ์ ์ํ๋ฉด ๊ทธ ์์์ ํ์์ ์ธ ์ด๋ก ์ ์ค๋ช ํฉ๋๋ค. ํด๋น ๊ฐ์๋ ๊ฐ๋ฐ์์ ํผ๋ธ๋ฆฌ์ ๊ฐ ๋ง๋๋ Tailwind CSS ์คํ์ผ๋ง์ ์ค์ฌ์ผ๋ก ์ ์๋์์ต๋๋ค.
์น ํผ๋ธ๋ฆฌ์์ ๊ฐ๋ฐ์์๊ฒ ์ทจ์ ๊ณผ ์ด์ง์ ์ํด ํฐ ๋์์ด ๋ ๊ฑฐ๋ผ ์๊ฐ๋ฉ๋๋ค.
โค๊ฐ์์๊ฐ ๋ณด๋ฌ๊ฐ๊ธฐ : https://inf.run/tHwCD
