์ด๊ฒ์ ์ต์ ๋ฆด๋ฆฌ์ค๋ฅผ tailwindcss-windows-arm64.exe๋ก ๋ค์ด๋ก๋ํ ์ ์๋ tailwindcss๋ผ๋ Windows ์ฑ์ ๋๋ค. ์ํฌ์คํ ์ด์ ์ฉ ๋ฌด๋ฃ ํธ์คํ ์ ๊ณต์ ์ฒด์ธ OnWorks์์ ์จ๋ผ์ธ์ผ๋ก ์คํํ ์ ์์ต๋๋ค.
Tailwindcss๋ผ๋ ์ด ์ฑ์ OnWorks์ ํจ๊ป ๋ฌด๋ฃ๋ก ๋ค์ด๋ก๋ํ์ฌ ์จ๋ผ์ธ์ผ๋ก ์คํํ์ญ์์ค.
์ด ์ฑ์ ์คํํ๋ ค๋ฉด ๋ค์ ์ง์นจ์ ๋ฐ๋ฅด์ธ์.
- 1. ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ PC์ ๋ค์ด๋ก๋ํ์ต๋๋ค.
- 2. ํ์ผ ๊ด๋ฆฌ์ https://www.onworks.net/myfiles.php?username=XXXXX์ ์ํ๋ ์ฌ์ฉ์ ์ด๋ฆ์ ์ ๋ ฅํฉ๋๋ค.
- 3. ์ด๋ฌํ ํ์ผ ๊ด๋ฆฌ์์์ ์ด ์์ฉ ํ๋ก๊ทธ๋จ์ ์ ๋ก๋ํฉ๋๋ค.
- 4. ์ด ์น์ฌ์ดํธ์์ ๋ชจ๋ OS OnWorks ์จ๋ผ์ธ ์๋ฎฌ๋ ์ดํฐ๋ฅผ ์์ํ์ง๋ง ๋ ๋์ Windows ์จ๋ผ์ธ ์๋ฎฌ๋ ์ดํฐ๋ฅผ ์์ํฉ๋๋ค.
- 5. ๋ฐฉ๊ธ ์์ํ OnWorks Windows OS์์ ์ํ๋ ์ฌ์ฉ์ ์ด๋ฆ์ผ๋ก ํ์ผ ๊ด๋ฆฌ์ https://www.onworks.net/myfiles.php?username=XXXXX๋ก ์ด๋ํฉ๋๋ค.
- 6. ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ด๋ก๋ํ์ฌ ์ค์นํฉ๋๋ค.
- 7. Linux ๋ฐฐํฌ ์ํํธ์จ์ด ์ ์ฅ์์์ Wine์ ๋ค์ด๋ก๋ํฉ๋๋ค. ์ค์น๊ฐ ์๋ฃ๋๋ฉด ์ฑ์ ๋ ๋ฒ ํด๋ฆญํ์ฌ Wine๊ณผ ํจ๊ป ์คํํ ์ ์์ต๋๋ค. ์ธ๊ธฐ ์๋ Windows ํ๋ก๊ทธ๋จ ๋ฐ ๊ฒ์์ ์ค์นํ๋ ๋ฐ ๋์์ด ๋๋ Wine์ ํตํ ๋ฉ์ง ์ธํฐํ์ด์ค์ธ PlayOnLinux๋ฅผ ์ฌ์ฉํด ๋ณผ ์๋ ์์ต๋๋ค.
Wine์ Linux์์ Windows ์ํํธ์จ์ด๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ์ด์ง๋ง Windows๊ฐ ํ์ํ์ง ์์ต๋๋ค. Wine์ ๋ชจ๋ Linux ๋ฐ์คํฌํ์์ ์ง์ Windows ํ๋ก๊ทธ๋จ์ ์คํํ ์ ์๋ ์คํ ์์ค Windows ํธํ์ฑ ๊ณ์ธต์ ๋๋ค. ๋ณธ์ง์ ์ผ๋ก Wine์ Windows๊ฐ ํ์ํ์ง ์๊ณ ๋ชจ๋ Windows ์์ฉ ํ๋ก๊ทธ๋จ์ ์คํํ ์ ์๋๋ก Windows๋ฅผ ์ฒ์๋ถํฐ ์ถฉ๋ถํ ๋ค์ ๊ตฌํํ๋ ค๊ณ ํฉ๋๋ค.
์คํฌ๋ฆฐ ์ท
Ad
๋ท๋ฐ๋
๊ธฐ์
HTML์ ๋ ๋์ง ์๊ณ ํ๋์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๋น ๋ฅด๊ฒ ๊ตฌ์ถํ์ญ์์ค. ๋งํฌ์ ์์ ์ง์ ๋ชจ๋ ๋์์ธ์ ๋น๋ํ๋๋ก ๊ตฌ์ฑํ ์ ์๋ flex, pt-4, text-center ๋ฐ rotate-90๊ณผ ๊ฐ์ ํด๋์ค๋ก ๊ตฌ์ฑ๋ ์ ํธ๋ฆฌํฐ ์ฐ์ CSS ํ๋ ์์ํฌ์ ๋๋ค. ์ ํธ๋ฆฌํฐ ํด๋์ค๋ ์์์ ๊ฐ์ผ๋ก ์คํ์ผ์ํธ๋ฅผ ์ด์ง๋ฝํ๋ ๋์ ์์คํ ์ ์ ์ฝ ์กฐ๊ฑด ๋ด์์ ์์ ํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์์ ์ ํ, ๊ฐ๊ฒฉ, ํ์ดํฌ๊ทธ๋ํผ, ๊ทธ๋ฆผ์ ๋ฐ ์ ์ค๊ณ๋ ๋์์ธ ์์คํ ์ ๊ตฌ์ฑํ๋ ๋ชจ๋ ์์์ ์ผ๊ด์ฑ์ ์ฝ๊ฒ ์ ์งํ ์ ์์ต๋๋ค. Tailwind๋ ๋งค์ฐ ๋ฎ์ ์์ค์ด๊ธฐ ๋๋ฌธ์ ๋์ผํ ์ฌ์ดํธ๋ฅผ ๋ ๋ฒ ๋์์ธํ๋๋ก ๊ถ์ฅํ์ง ์์ต๋๋ค. ๋์ผํ ์์ ํ๋ ํธ์ ํฌ๊ธฐ ์กฐ์ ์ ์ฌ์ฉํ๋๋ผ๋ ๋ค์ ํ๋ก์ ํธ์์ ์์ ํ ๋ค๋ฅธ ๋ชจ์์ผ๋ก ๋์ผํ ๊ตฌ์ฑ ์์๋ฅผ ์ฝ๊ฒ ๊ตฌ์ถํ ์ ์์ต๋๋ค. Tailwind๋ ํ๋ก๋์ ์ฉ์ผ๋ก ๋น๋ํ ๋ ์ฌ์ฉํ์ง ์๋ ๋ชจ๋ CSS๋ฅผ ์๋์ผ๋ก ์ ๊ฑฐํ๋ฏ๋ก ์ต์ข CSS ๋ฒ๋ค์ด ๊ฐ์ฅ ์์ต๋๋ค. ์ค์ ๋ก ๋๋ถ๋ถ์ Tailwind ํ๋ก์ ํธ๋ ํด๋ผ์ด์ธํธ์ 10kB ๋ฏธ๋ง์ CSS๋ฅผ ์ ๊ณตํฉ๋๋ค.
ํน์ง
- ํฌ๊ธฐ๊ฐ ์์ต๋๋ค. ์ฌ์ฉํ์ง ์์ CSS๋ฅผ ๋ค์ ๋ฐฐ์กํ์ง ๋ง์ธ์.
- ์ง์งํ๊ฒ ์ํ๋ ๊ฒ์ ๋ฌด์์ด๋ ๊ตฌ์ถํ์ธ์.
- ๋์์ธ ์์คํ ์ ์ํ API
- ํธ๋ฒ ๋ฐ ํฌ์ปค์ค ์ํ? ์ฐ๋ฆฌ๋ ๊ทธ๋ค์ ์ป์๋ค
- ์ค๋ณต ๊ฑฑ์ ? ํ์ง๋ง
- Tailwind์ @apply ์ง์๋ฌธ์ ์ฌ์ฉํ์ฌ ๋ฐ๋ณต๋๋ ์ ํธ๋ฆฌํฐ ํจํด์ ์ฌ์ฉ์ ์ง์ CSS ํด๋์ค๋ก ์ถ์ถ
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
์๋ฐ ์คํฌ๋ฆฝํธ
์นดํ ๊ณ ๋ฆฌ
์ด๊ฒ์ https://sourceforge.net/projects/tailwindcss.mirror/์์๋ ๊ฐ์ ธ์ฌ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. ๋ฌด๋ฃ ์ด์ ์ฒด์ ์ค ํ๋์์ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ผ๋ก ์จ๋ผ์ธ์ผ๋ก ์คํํ๊ธฐ ์ํด OnWorks์์ ํธ์คํ ๋์์ต๋๋ค.