๐จKEEP
- ๋์๋ณด๋ ๋ง๋ค๊ธฐ with Bootstrap, jQuery
- ์ปจ์
: ํ์คํฌ ๋งค๋์
- ๋ชฉ์ : ์ผ์ ์ ๊ด๋ฆฌํ๋ ๋ฐ ํ์ํ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ํ๋์ ํ์ธํ๊ธฐ
- ๊ณ ๋ คํ ์ : ์ค์ํ ๋ถ๋ถ ๊ฐ์กฐ, ๋ฐ์ดํฐ๋ฅผ ์ฐ๋งํ์ง ์๊ฒ ์ ๋ฆฌ, ์ปฌ๋ฌ ํ๋ ํธ ํ๋ ์ ํด์ ์ ํต์ผํ๊ธฐ, ๋ด๊ฐ ์ด๋ค๊ณ ์๊ฐํ๊ณ ๋ง๋ค๊ธฐ, ๋ฐ์ํ์ผ๋ก ๋ง๋ค๊ธฐ
- ๊ตฌํํ๊ณ ์ ํ๋ ๊ธฐ๋ฅ: ์ปดํจํฐ ํน์ ๋๋ผ์ด๋ธ ์ฌ์ฉ ํํฉ, ํ ์ผ ๋ชฉ๋ก(์ฐ, ์, ์ฃผ ๋จ์), ํ์ ํธ๋์ปค, ํด๋น ํธ๋์ปค, ๋ฌด๋ ํธ๋์ปค, ์์ ๋ฆฌ์คํธ, ์๊ณ ๋๋ ๋ ์จ ์์ ฏ, ์ ์ ํ๋กํ, ๋ค์ด์ด๋ฆฌ(ํ๋์ ๋ณด๊ธฐ ๋ฐ ํฌ์คํ
ํ์ด์ง), ๋ก๊ทธ์ธ ๋ฐ ํ์๊ฐ์
, ๋น๋ฒ ์ฐพ๊ธฐ ํ์ด์ง, 404 ํ์ด์ง
- ๋ถํธ์คํธ๋ฉ์ ํ๋ ์์ํฌ๋ก ์ ํํ ์ด์ : ์ฌ์ดํธ๋ฅผ ๋ฐ์ํ์ผ๋ก ๊ตฌํํ๊ธฐ ์ฌ์ฐ๋ฏ๋ก -> but pure CSS ํผ์ฉํ ๊ฒ
- ์ ์ด์ฟผ๋ฆฌ ์ฌ์ฉํ ์ด์ : ์ง๋๋ฒ ํด๋ก ์ฝ๋ฉ ๋ ๋ฐ๋๋ผ JS๋ก ์์
ํด์ jQuery์ ์ต์ํด์ง๊ณ ์ ์ฌ์ฉ
- ์ ์ฒด ์ปฌ๋ฌ ์ปจ์
์ Colors์์ ๊ณ ๋ฆ
- ์ฌ์ด๋ ๋ด๋น๊ฒ์ด์
๋ฐ
href="javascript:void(0)"
: <a>
ํ๊ทธ์ ์ด๋ ๊ธฐ๋ฅ ๋ฌด๋ ฅํ
- ๊ธฐํ ์ ์ฉํ ํ
- ๋ถํธ์คํธ๋ฉ focus ๋ ํ์ฑํ๋๋ ํ๋ ํ
๋๋ฆฌ ์ ๊ฑฐ:
box-shadow: none
๐จPROBLEM
- ํด๋ํด๋ ๋ถ์กฑํ ๊ฒ ๊ฐ๋ค
- ๊ฐ์๋ฅผ ์ ๋ฃ๊ณ ์ฝ๋ฉ๋ง ๊ณ์ํด์ ๊ทธ๋ฐ์ง ํ๋ฃจ ์ข
์ผ ์๋ฌด ๊ฒ๋ ์ ํ๋ ๋๋์ด ๋ ๋ค...
๐จTRY
- ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ๊ณ์ ํ์!
- ์ง๊ธ์ ์์ด ๋๋ ค๋ ๊ณ์ ๋ง๋ค๋ค ๋ณด๋ฉด ๋นจ๋ผ์ง๊ฒ ์ง!