
KEEP
- OOCSS, BEM์ด๋ผ๋ ๊ฒ ์๊ตฌ๋
- ์ง๊ธ๊น์ง๋ ์ฝ๋๋ฅผ ์งค ๋ ์ฐ์ ํ์ํ ๊ฑธ ๋ค ๋ง๋ค์ด ๋๊ณ ๋์ค์ ์ค๋ณต๋๋ ๊ฒ๋ง ๋ฐ๋ก ๋ถ๋ฆฌํ๋ ์์ผ๋ก ๋ง๋ค์์๋๋ฐ, ์ด๊ฑธ ๋ณด๋ค ์์ธํ๊ฒ ์์ฐ๋ฅด๋ ๊ฐ๋
์ด ์์ ์ค์ด์ผ. ๊ทธ๋ฆฌ๊ณ class ์๋ช
ํ๋ ๊ฒ๋ ๋๊ตฐ๊ฐ ์ฒด๊ณ๋ฅผ ๋ง๋ค์ด ๋ ๊ฒ ์๊ตฌ๋. ์ด๊ฒ๋ค์ ์๊ณ ์ฌ์ฉํ๋ฉด ํจ์ฌ ํธ๋ฆฌํ๊ฒ ์ง๋ง, ๊ตณ์ด ๋ฐฐ์ฐ์ง ์์๋ ์ด๋์ ์ด๋ฐ ๋ฐฉ๋ฒ๋ค๊ณผ ๋น์ทํ๊ฒ ์ฝ๋๋ฅผ ์ง๋ ์ค์ค๋ก๋ฅผ ๋ฐ๊ฒฌํ ์ ์๋ ๊ฑธ ๋ณด๋ฉด ๊ฐ๋
์ ๋๋ง ์๊ณ ๋์ด๊ฐ๋ ๊ด์ฐฎ์ ๋ฏ.
- ์ค๋๋ CSS ๋ถ์๊ธฐ
- ํ ์ค์ ์๋ div ๋ ๊ฐ ์ค ํ๋๋ ์ข์ธก ์ ๋ ฌ, ํ๋๋ ์ฐ์ธก ์ ๋ ฌ์ ํ๊ณ ์ถ์ ๋, ๊ฐ์ด๋ฐ์ div ํ๋๋ฅผ ์ถ๊ฐํ๊ณ
flex-grow ์์ฑ์ ์ฃผ๋ฉด ์ถ๊ฐ์ ์ธ ์์ฑ ๋ถ์ฌํ ํ์ ์์ด ๊ฐ์ ์์ชฝ์ผ๋ก ์ ๋ ฌํ ์ ์๋ค! ๋ค๋ฅธ div์๋ flex-grow ์์ฑ์ด ์๊ธฐ ๋๋ฌธ์ ๋ํ๋ก ์์ฑ์ ๋ถ์ฌ ๋ฐ์ ๋
์๋ง ์๋ฆฌ๋ฅผ ์ฐจ์ง ์ํด ์ปค์ง๋ฉด์ ๋๋จธ์ง๋ฅผ ๋ฐ์ด๋ด๊ธฐ ๋๋ฌธ! ๋ฌด์กฐ๊ฑด ์์น ์์ฑ์ ๋ถ์ฌํ ์๊ฐ๋ถํฐ ํ์ง ๋ง๊ณ div๋ฅผ ์ด๋ฐ ์์ผ๋ก ํฌ๋ช
ํ๊ฒ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ฐ์ตํด ๋ด์ผ๊ฒ ๋ค.
- em์ ๋ถ๋ชจ ์์, rem์ ๋ฃจํธ html์ ํฐํธ ํฌ๊ธฐ์ ๋น๋ก! ์ด๋ฒ ๊ธฐํ์ ์ ๋๋ก ๊ธฐ์ตํ๊ณ ๋์ด๊ฐ๊ธฐ.
- ๋งํฌ์ ๋ฐ์ค์ ์ ๊ฑฐํ ๋๋ text-decoration ์์ฑ ์ด์ฉํ๊ธฐ
- keyframes์ ์ธ ๋๋ from, to ๋๋ % ๋ช
์ํด์ผ ์๋ํ๋ค!
- div์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ div๊ฐ ์๋ ๋ค๋ฅธ ์์์ ์ ๋๋ฉ์ด์
์ ์ฃผ๊ณ ์ถ์ ๋๋
div:hover p {} ์ด๋ ๊ฒ hover๋ฅผ ๋จผ์ ์ด๋ค!
- ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ Layout ํญ์ ๋ค์ด๊ฐ๋ฉด ์น ์ฌ์ดํธ์ ๋ ์ด์์์ ๊ทธ๋ฆฌ๋ ํํ๋ก ํ์ํด์ค๋ค! ๋ ์ด์์ ๊ณต๋ถํ ๋ ์ ์ฉํ ๋ฏ.
TRY
- ๋ฆฌ์กํธ ๋นจ๋ฆฌ ๋ฐฐ์ฐ๊ณ ์ถ๋ค
- ์์ฑ ๊ฐ์๋ ๋ํ
์ผ ๊ฐ์ ๋ค ๊ตฌ๋นํด ๋จ์ผ๋๊น ์ผ๋ฅธ ๋ฐฐ์์ ์ด๋ฐ์ ๋ฐ ๊ฑฐ ๋ง๋ค์ด ๋ณด๊ณ ์ถ๋ค.