์ด๊ฒ์ ์ต์ ๋ฆด๋ฆฌ์ค๋ฅผ Stinson.zip์ผ๋ก ๋ค์ด๋ก๋ํ ์ ์๋ CSSgram์ด๋ผ๋ Linux ์ฑ์ ๋๋ค. ์ํฌ์คํ ์ด์ ์ฉ ๋ฌด๋ฃ ํธ์คํ ์ ๊ณต์ ์ฒด์ธ OnWorks์์ ์จ๋ผ์ธ์ผ๋ก ์คํํ ์ ์์ต๋๋ค.
OnWorks์ ํจ๊ป CSSgram์ด๋ผ๋ ์ฑ์ ๋ฌด๋ฃ๋ก ๋ค์ด๋ก๋ํ์ฌ ์จ๋ผ์ธ์์ ์คํํ์ญ์์ค.
์ด ์ฑ์ ์คํํ๋ ค๋ฉด ๋ค์ ์ง์นจ์ ๋ฐ๋ฅด์ธ์.
- 1. ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ PC์ ๋ค์ด๋ก๋ํ์ต๋๋ค.
- 2. ํ์ผ ๊ด๋ฆฌ์ https://www.onworks.net/myfiles.php?username=XXXXX์ ์ํ๋ ์ฌ์ฉ์ ์ด๋ฆ์ ์ ๋ ฅํฉ๋๋ค.
- 3. ์ด๋ฌํ ํ์ผ ๊ด๋ฆฌ์์์ ์ด ์์ฉ ํ๋ก๊ทธ๋จ์ ์ ๋ก๋ํฉ๋๋ค.
- 4. ์ด ์น์ฌ์ดํธ์์ OnWorks Linux ์จ๋ผ์ธ ๋๋ Windows ์จ๋ผ์ธ ์๋ฎฌ๋ ์ดํฐ ๋๋ MACOS ์จ๋ผ์ธ ์๋ฎฌ๋ ์ดํฐ๋ฅผ ์์ํฉ๋๋ค.
- 5. ๋ฐฉ๊ธ ์์ํ OnWorks Linux OS์์ ์ํ๋ ์ฌ์ฉ์ ์ด๋ฆ์ผ๋ก ํ์ผ ๊ด๋ฆฌ์ https://www.onworks.net/myfiles.php?username=XXXXX๋ก ์ด๋ํฉ๋๋ค.
- 6. ์์ฉ ํ๋ก๊ทธ๋จ์ ๋ค์ด๋ก๋ํ์ฌ ์ค์นํ๊ณ ์คํํฉ๋๋ค.
์คํฌ๋ฆฐ ์ท
Ad
CSS๊ทธ๋จ
๊ธฐ์
๊ฐ๋จํ ๋งํด CSSgram์ CSS๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์คํ๊ทธ๋จ๊ณผ ๊ฐ์ ํํฐ๋ก ์ด๋ฏธ์ง๋ฅผ ์ง์ ํธ์งํ ์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ์ฐ๋ฆฌ๊ฐ ํ๋ ์ผ์ ์ด๋ฏธ์ง์ ํํฐ๋ฅผ ์ถ๊ฐํ๊ณ ๋ค์ํ ํผํฉ ๊ธฐ์ ์ ํตํด ์์ ๋ฐ/๋๋ ๊ทธ๋ผ๋์ธํธ ์ค๋ฒ๋ ์ด๋ฅผ ์ ์ฉํ์ฌ ํํฐ ํจ๊ณผ๋ฅผ ๋ชจ๋ฐฉํ๋ ๊ฒ์ ๋๋ค. ์ฆ, ์๋ ์ด๋ฏธ์ง ์ฒ๋ฆฌ๊ฐ ์ค์ด๋ค๊ณ ์น์์ ๋ ์ฌ๋ฏธ์๋ ํํฐ ํจ๊ณผ๊ฐ ๋ํ๋ฉ๋๋ค! ์ฐ๋ฆฌ๋ ํํฐ ํจ๊ณผ๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์์ฌ ์์(์ฆ, :before ๋ฐ :after)๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฏ๋ก ์ด๋ฌํ ํํฐ๋ฅผ ํฌํจํ๋ ์์(์: ์ฝํ ์ธ ๋ธ๋ก๊ณผ ๊ฐ์ ์ฝํ ์ธ ๋ธ๋ก์ด ์๋)์ ์ ์ฉํด์ผ ํฉ๋๋ค. . ๊ถ์ฅ ์ฌํญ์ ์ด๋ฏธ์ง๋ฅผ ๊ผฌ๋ฆฌํ. CSS ์ํคํ ์ฒ์์ ์ฌ์ฉ์ ์ง์ ์ด๋ฆ ์ง์ ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ํ๋ก์ ํธ ๋ด์์ ์ ๊ณต๋ ์คํ์ผ์ ๋ํ .scss ํ์ผ์ ์ถ๊ฐํ ๋ค์ ์คํ์ผ ์ ์ ๋ด์์ ํํฐ ํจ๊ณผ๋ฅผ @extendํ ์ ์์ต๋๋ค. ๋ฏน์ค์ธ์ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ํํฐ ์ธ์๋ฅผ ํด๋์ค์ ์ ๋ฌํ ์ ์์ต๋๋ค. ์ ๊ณต๋ ํํฐ ์ธ์ ํํฐ๋ฅผ ์ถ๊ฐํ๋ ค๋ ๊ฒฝ์ฐ(์: ํ๋ฆผ ํจ๊ณผ ์ถ๊ฐ)์ ์ ์ฉํฉ๋๋ค.
ํน์ง
- CSS ํํฐ ๋ฐ ๋ธ๋ ๋ ๋ชจ๋๋ก Instagram ํํฐ๋ฅผ ์ฌ์์ฑํ๊ธฐ ์ํ ์์(<1kb gzipped!) ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ CSS ํํฐ์ CSS ๋ธ๋ ๋ ๋ชจ๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- Google ํฌ๋กฌ ๋ฐ Mozilla Firefox ์ง์
- CSS ํด๋์ค๋ฅผ ์ฌ์ฉํ ๋ ํํฐ ์ด๋ฆ์ด ์๋ ํด๋์ค๋ฅผ ์ด๋ฏธ์ง๊ฐ ํฌํจ๋ ์์์ ์ถ๊ฐํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค.
- ๋ฏน์ค์ธ์ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ํํฐ ์ธ์๋ฅผ ํด๋์ค์ ์ ๋ฌํ ์ ์์ต๋๋ค.
- ๋ฏน์ค์ธ๊ณผ ํจ๊ป ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋ ์ถ๊ฐ ํํฐ๋ฅผ ์ธ์๋ก ์ถ๊ฐํ ์๋ ์์ต๋๋ค.
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
์๋ฐ ์คํฌ๋ฆฝํธ
์ด๊ฒ์ https://sourceforge.net/projects/cssgram.mirror/์์๋ ๊ฐ์ ธ์ฌ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. ๋ฌด๋ฃ ์ด์ ์ฒด์ ์ค ํ๋์์ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ผ๋ก ์จ๋ผ์ธ์ผ๋ก ์คํํ๊ธฐ ์ํด OnWorks์์ ํธ์คํ ๋์์ต๋๋ค.