๐์ ๋ฒ์ฃผ ๋ชฉ์์ผ ๋ถํฐ ์์ํ ์ธ์คํ UIํด๋ก ์ฝ๋ฉ์ด ๋์ด ๋ฌ๋ค . ํ๋ก์ ํธ ๊ธฐํ์ 2์ผ ์ด์์ง๋ง ์ฌ์ค์ ๋๋ ํ ,์ผ ์ฃผ๋ง ๋๋ค
ํ๋ก์ ํธ๋ฅผ ์งํ ํ์๋ค. ๊ฐ์ธ์ ์ผ๋ก ํ์ด์ฌ๊ฒ์ ๊ณผ์ ๋ณด๋ค๋ ์กฐ๊ธ ๋ ์ฌ๋ฐ๊ฒ ์งํํ์๋ ๊ฒ ๊ฐ๋ค!
๐์ฐ์ ๋ชฉํ๋ก ํ๋ ํ์์ ์ธ ๋ถ๋ถ์ ๊ฑฐ์๋ค ๊ตฌํ์ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ธ์ ์ผ๋ก ํ๊ณ ์ถ์๋ ๋๊ธ ๊ธฐ๋ฅ๊ณผ ์ฌ๋ฌ๊ฐ์ง ๊ธฐ๋ฅ๋ค์ ํ ์ ์์ด์ ๊ณต๋ถ๊ฐ ๋ง์ด ๋์๋ ์๊ฐ ๊ฐ๋ค.
๐Keep : ์ด๋ฒ ํ๋ก์ ํธ์์ ์งํํ ๊ณผ์ ์ค ๋ด๊ฐ ์ ์งํ๊ณ ์ถ์ ๋ถ๋ถ.
๐๋์์์ด ์ง๋ฌธ์ ๋์ ธ ๋ณด๊ธฐ. why?
- ๋ ์ฝ๊ฒ ํ ์ ์์๊น? ๊ณผ์ฐ ์ด ๋ณ์๋ช
์ด ์ต์ ์ธ๊ฐ? ์ฌ๊ธฐ์ ์ข๋ ํด๋ฆฐํ๊ฒ ์ฝ๋๋ฅผ ์ง๋ ๋ฐฉ๋ฒ์?
์ด css๊ฐ ์ฌ๊ธฐ์๋ ์ ์๋จน์ง? ๋ฑ๋ฑ ์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๊ณ์ํด์ ์ค์ค๋ก ์ง๋ฌธ์ ๋์ง๊ณ ๊ตฌ๊ธ๋ง๋ ๋ง์ด ํด๋ณธ ๊ฒ ๊ฐ๋ค.
์ด๋ฌํ ํ์ต ๋ฐฉ๋ฒ์ด ์ค์ ๋ก ๋์์ด ๋ง์ด ๋์๊ณ ๋ ๋ง์ ๊ณต๋ถ๊ฐ ๋์ด์ ๊ธฐ์ต์์ ์กํ์๋ค. ์ค์ค๋ก ์ฌ๊ณ ํ๋ ๋ฐฉ๋ฒ์ ์ข์ ๊ณต๋ถ ์ต๊ด์ธ ๊ฒ ๊ฐ๋ค.
๐ ์๊ฐ์ ์ฝ๋งค์ด์ง ๋ง์. time
- ํ๋ก์ ํธ ์๊ฐ์ด ์งง๋ค ๋ณด๋๊น ์๊ฐ์ ๋ง์ด ์ฝ๋งค์๋ ๊ฒ ๊ฐ๋ค. ๊ทธ๋ด๋๋ง๋ค ๊ด์ฐฎ์. ํ๋ก์ ํธ๋ฅผ ๋ง๋ฌด๋ฆฌ๋ฅผ ๋ชปํด๋ ์ด๊ธฐ๋ฅ ํ๋ ๋งํผ์ ์๋ฒฝํ๊ฒ ์๊ณ ๊ฐ์ ๋ผ๋ ๋๋์ผ๋ก ์์
์ ์งํ ํ์๋ค. ์ค์ ๋ก ๋๊ธ๋ถ๋ถ, ๋๋ณด๊ธฐ ๋ถ๋ถ ๋๋ถ๋ถ์ JS ๋ถ๋ถ์์ ์๊ฐ์ ๋ง์ด ์ก์ ๋จน์์ง๋ง, ๋ช์๊ฐ์ด ๊ฑธ๋ ค๋ ํฌ๊ธฐํ์ง ์๊ณ ๊ธฐ๋ฅ์ ๊ตฌํํ์๋ค. ์ค๋์ 3์๊ฐ ๊ฑธ๋ ธ๋ค๋ฉด, ๋ค์์์
์๋ 1์๊ฐ ๊ฑธ๋ฆด ๊ฒ ์ด๊ณ , ๋ค์์๋ ๋ ์๊ฐ์ด ์ค์ด๋ค ๊ฒ์ด๋ค. ์ฌ๊ธฐ์ ํฌ๊ธฐํ๋ฉด ์ด ๊ธฐ๋ฅ์ ์ ๋ ๋ด๊ฐ ๊ตฌํํ์ง ๋ชปํ๋ค. ์๊ฐ์ ์ซ๊ธฐ์ง ๋ง์!
๐๊ฒ์์ ํ๋ช
ํ๊ฒ ํ๋๋ฐฉ๋ฒ. search
- ํ๋ก์ ํธ๋ฅผ ์งํํ๋ค ๋ณด๋ google ์ ํตํด ๊ฒ์์ ํ๋ ๊ณผ์ ์ด ๊ต์ฅํ ๋ง์๋ค. ๋๋ ์ฌ๊ธฐ์ ์์ง์ ์ ๋ณด๋ฅผ ์ ํํ๊ฒ ์ป์ด์ผ ํ๋ค. ๋ ๋ด๊ฐ ๊ตฌ๊ธ๋งํด์ ์ ์ฉ์ํฌ ๋์ ์ฝ๋๋ฅผ ์ ์ ํ ๋น๊ตํด ๊ฐ๋ฉฐ ์ง๊ธ ๋ด ์ํฉ์ ๋ง๋ ์ฝ๋๋ฅผ ๊ฐ์ ธ์ค๋๊ฒ ํ๋ช
ํ๋ค. ๊ทธ๋ฐ๋ฉด์์ ์ด๋ฒ ํ๋ก์ ํธ์์๋ ๊ฒ์์ ์ ์ด์ฉํ ๊ฒ ๊ฐ๋ค. ์ฝ๋๋ค์ ์ฐธ๊ณ ๋ฅผ ํ๋ ๋์๊ฒ ํ์ํ์ง ์๋ ์์ค์ฝ๋๋ ๊ณผ๊ฐํ ์ญ์ ์์ผฐ๋ค. ๋ํ ํ๊ธ์ด ์๋ ์์ด, ์ค์์ ํํฐ๋์ ํน๊ฐ์์ ๋ฐฐ์ด how ๊ทธ๋ฆฌ๊ณ exeample ์ ์ ์ ํ ์ด์ฉํด์ ๋์๊ฒ ํ์ํ ์์ค์ฝ๋๋ฅผ ์ ํํ ๊ฒ์ํ๋๊ฒ ๋ง์ ๋์์ด ๋ ๊ฒ ๊ฐ๋ค.
๐ญproblem : ์ด๋ฒ ํ๋ก์ ํธ์์ ๋ฐ์ํ ๋ฌธ์ ์ ์ ๊ฐ๊ด์ ์ผ๋ก ํ๋จ
๐ ๊ธฐ๋ณธ๊ธฐ ๋ถ์กฑ . ์ญ์
- ์ด๋ฒ ํ๋ก์ ํธ์์๋ ๊ธฐ๋ณธ๊ธฐ ๋ถ์กฑ์ด ์ ์คํ ๋ค์ด ๋ ๊ฒ ๊ฐ๋ค. display ์ ์์ฑ๊ฐ์ ๋ํ ์ดํด, position ์ ๋ํ ์ดํด, ๊ทธ๋ฆฌ๊ณ div๋ฅผ ์ ์ ํ ์ฌ์ฉํ์ง ๋ชปํ ๊ฒ ๊ฐ๋ค. div ๋ฅผ ๊ณํ์ ์ผ๋ก ๋๋์ง ์์ ๋์ค์๋ div ์์๋ค์ด ์ด๋์ ๋ฐฐ์น ๋๋์ง ์ฐพ๊ธฐ๊ฐ ๋๋ฌด ์ด๋ ธ๋ค. ์์ฒญ๋๊ฒ ๋ง์ div ๋ฅผ ๋จ๋ฐ ํ ๊ฒ์ด๋ค. ์ด๊ฒ์ ์ต์ํ์ div ๋ก ์์ต์ ์ฒ์๋ถํฐ ๋๋ ์ ํ์ผ๋ฉด ์ข๋ ์์
์ด ์์ํ์ ๊ฒ ๊ฐ์๋ฐ ์์
ํ๋๋ฐ ์์ด์ ์์๊ฐ ๋๋ฌด๋๋ ์์๋ค. ๊ฐ ์์๋ค์ ํน์ง. ๊ทธ๋ฆฌ๊ณ ๊ทธ ์์๋ค์ ์ฐ๊ธฐ์ ์ด๋ค ๊ธฐ๋ฅ์ ํ๋์ง, ์ด๋ค ํน์ฑ์ ๊ฐ์ง๊ณ ์๋์ง ๊ณต๋ถํ๋ ์ต๊ด์ ๋ค์ด์.
๐ ๋จธ๋ฆฟ์์ ์๋ ๋ฌธ๋ฒ์ ๊บผ๋ด์ง ๋ชปํด.
- ๋จธ๋ฆฟ์์๋ ๋ถ๋ช
์ด ๋ฌธ๋ฒ์ ํตํด์ ์ด๋ ๊ณ ์ ๋ ๊ณ ํด์ ์ด๋ ๊ฒ ๊ตฌํํ๊ณ ์ถ์๋ฐ! ๋ง์ ์ฝ๋๊ฐ ์์ฐ์ฌ์ง๋ค. ์ด๊ฑด ์ ๋ง ์ฐ์ต๋ฐ์ ์๋ ๊ฒ ๊ฐ๋ค. ๋ํ ํ์ด์ฌ๋ ๋ง์ฐฌ๊ฐ์ง ์ด๊ฒ ์ง๋ง JS ๋ฅผ ๊ฑฐ์ ์ฒ์์จ๋ณด๋ ๋์๊ฒ ์กฐ๊ธ์ ์ด๋ ค์ ๋ ๊ฒ์ด ์ฌ์ค์ด์๋ค. ๋จธ๋ฆฟ์์ ์๋๊ฑธ ๊ตฌํํ๋ ๋ฅ๋ ฅ์ ์ฐ์ต์ด ์ ์ผ ์ข์ ๊ฒ ๊ฐ๋ค. ์ค์ค๋ก ๋ฌธ์ ๋ฅผ ๋ง๋ค์ด์ ๊ตฌํ๋ ํด๋ณด๊ณ , ์ฌ๋ฌ๊ฐ์ง ์ํฉ์ ๋์
๋ ํด๋ณด๊ณ , ๋ง์ ์ฐ์ต์ด ํ์ํ ๋ถ๋ถ์ด๋ค!
๐ ํ๋์ฝ๋ฉ. ์ด์ง๋ฝ๋ค
- ์ด๋ฒ์ฝ๋ฉ์์๋ ํ๋์ฝ๋ฉ์ด ๊ต์ฅํ ๋ง์ด ๋ค์ด๊ฐ๋ค. ์ ์ฒด์ ์ผ๋ก html,js,css ๋ฅผ ๋คํฉ์น๋ฉด 1000์ค ์ด์์ ์ฝ๋๊ฐ ๋์ฌ ๊ฒ์ด๋ค. ๊ทธ๋งํผ ๋นํฐ์ ์ผ๋ก ๋ฐ๋ณต๋ ์ฝ๋๋ค๋ ๋ง์ ๊ฒ์ด๊ณ ๊ทธ๊ฒ๋ค์ ํด๋ฆฐํ๊ฒ ์์ ํ๊ณ ์ ์ง๋ณด์ ํ๋๊ฒ๋ ๊ฐ๋ฐ์์ ๋ชซ ์ด๋ผ๊ณ ์๊ฐํ๋ค. ๋ด๊ฐ ์ง ์ฝ๋์ธ๋ฐ ๋ด๊ฐ ์ณ๋ค๋ณด๊ธฐ ์ซ์ ์ ๋๋ก ์ด์ง๋ฌ์ฐ๋ฉด ์ด๋ก ํ๊ฒ ๋๊ฐ. ๊ทธ๋ฆฌ๊ณ ๋ด๊ฐ ๊ตฌํํ ์ฝ๋๋ฅผ ์ ํํ๊ฒ ์ค๋ช
ํ ์ค ์์์ผ ํ๋ค. ๋๋ ์ฝ๋๊ฐ ์๋, ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ๊ธฐ ๋๋ฌธ์ด๋ค. ์์ค์ฝ๋๋ค์ ๊ณต๋ถํด ๋ณด๋ฉด์, ์ฝ๋๋ฅผ ์ค์ค๋ก ๋ฆฌํํ ๋ง ํด๋ณด๋ฉด์, ์ค์ค๋ก ํด๋ณด๋ ์ ๋ฐ์ ์๋ค.
๐ชTry : ๋ค์ ํ๋ก์ ํธ๋ฅผ ์ํด ํด์ผํ ๋
ธ๋ ฅ
๐ ๊ธฐ๋ณธ๊ธฐ ๋ค์ง๊ธฐ.
- ํ์คํ ์์ฆ ๋๋์ฑ ๋๋ผ๋ ๊ฒ์ธ๋ฐ, ์ด๋์ด๋ ๊ณต๋ถ๋ ๊ฐ๋ฐ์ด๋ ๋ญ๋ ์ง ๊ธฐ๋ณธ๊ธฐ๊ฐ ์ ์ผ ์ค์ํ ๊ฒ ๊ฐ๋ค. ์ค์ ๋ด๊ฐ ์ฐ๊ทน์ ์ ๊ณต ํ์๋๋ ํ๋ฃจ์ ๋ง์ ์๊ฐ์ ๊ธฐ๋ณธ๊ธฐ์ ํฌ์ ํ์ ๋งํผ ๊ฐ๋ฐ์ ๋ผ๋ ์ง์
๋ ๊ธฐ๋ณธ๊ธฐ๊ฐ ์ค์ํ ๊ฒ ๊ฐ๋ค. ์ค์ ๊ธฐ์
๋ค์ด ์ฝ๋ฉํ
์ค์ cs์ง์ ์ผ๋ก ํฉ๊ฒฉ๋น๋ฝ์ ๊ฒฐ์ ํ๋ ๊ฒ๋ ๊ธฐ๋ณธ๊ธฐ์ ์ถฉ์คํด์ ์ธ ๊ฒ ์๋๊น ๊ฒ๋ง ๋ฒ์ง๋ฅด๋ฅดํ ๊ฐ๋ฐ์๊ฐ ์๋๋ผ ๋ผ์๊น์ง ๋ด๊ณต์ด ๊ฝ์ฐฌ ๊ทธ๋ฐ ๊ฐ๋ฐ์๊ฐ ๋์ด์ผ ํ๋ค. ํ๋ฃจ 12์๊ฐ์ ํ ๋น๋์ด ๋๋๋ ์๋ฃ๊ตฌ์กฐ, ์๊ณ ๋ฆฌ์ฆ, ๊ทธ๋ฆฌ๊ณ ๊ธฐ์ด ๋ฌธ๋ฒ์ ๊ณ์ํด์ ๋ณด๋ ์ต๊ด์ ๋ค์ด์. ๋ฌธ๋ฒ์ฑ
์ ์ง๊ธ๋ ๋ช์ญ๋ฒ์ ๋ณด๊ณ ํ๋๋ฐ๋ ์์ ์ต์ง ์๋๋ค. ๋จธ๋ฆฌ์์ ์๋๊ฒ ์ฐ์ฌ์ง์ง ์๋๋ค. ๊ณ์ ์ฐ์ตํ์!
๐ ํ๋ฃจ๋ฅผ ๋ง๋ฌด๋ฆฌ ํ๋ ๋ฒ ๋ฐฐ์ฐ๊ธฐ.
- ํ๋ฃจ๋ฅผ ์ข๋ ์์ฐจ๊ฒ ๋ง๋ฌด๋ฆฌ ํ๋ ๋ฒ์ ๋ฐฐ์ฐ์. ์ง๊ธ ๋์๊ฒ ์ฃผ์ด์ง ์๊ฐ์ ์ด์ 3๋ฌ ๋ฐ ์ ๋์ ์๊ฐ์ด๋ค. ํ๋ฃจํ๋ฃจ ์๊ฐ์ด ๋๋ฌด ์์คํ๊ณ ์ง๊ธ๋ ์๊ฐ์ด ๋๋ฌด๋๋ ๋น ๋ฅด๊ฒ ์ง๋๊ฐ๋ค. ํ๋ฃจ12์๊ฐ์ด ์ด๋ ๊ฒ ์งง์๋ ์ถ์ ์ ๋๋ก ๋ง์ด๋ค. ๊ทธ๋งํผ ์ฌ๋ฐ๊ฒ ๊ณต๋ถ๋ฅผ ํ๊ณ ์์ง๋ง ํ๋ฃจ๋ฅผ ํํฌ๋ก ํ๋นํ๋ฉด, ์ง๊ธ ์งํํ๋ ํ๋ก์ ํธ์ ์๋๋ฅผ ๋ฐ๋ผ์ก์ง ๋ชปํ๊ฑฐ๋, ์ํ๋ฐ์ ์๊ฐ์ ํ๋นํ ๊ฐ๋ฅ์ฑ์ด ๋ง๋ค๊ณ ์๊ฐํ๋ค.
ํ๋ฃจ 12์๊ฐ์ ํ๋๊ฒ ์ค์ํ๊ฒ ์๋, 12์๊ฐ์ค์์ ์ ๋ง ๋ด๊ฒ์ผ๋ก ๊ฐ์ ธ์ฌ ๋ถ๋ถ์ด ์ด๋์ ๋ ์ธ์ง๋ฅผ ์๊ฐํด๋ณด์. ํ๋ฃจ 12์๊ฐ ๊ณต๋ถํด์ ์ป๋ ๊ฒ์ด ์๋ค๋ฉด ๋ฌด์จ ๊ณต๋ถ๋ฅผ ํ ๊ฒ ์ธ๊ฐ. ๊ฐ์ 12์๊ฐ์ด๋ผ๋ ๊ฐ์ ธ๊ฐ๋ ๊ฒ์๋ํ ์ฐจ์ด๋ ๋ถ๋ช
ํ๊ฒ ์์ ๊ฒ์ด๋ค. ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ ํ๋ฃจ๋ฅผ ์ ์ ๋ฆฌํ๋ ๊ฒ์ด๋ค. til ์ ํตํด์ ์ค๋ ๋ฐฐ์ด ๋ถ๋ถ๋ค์ ๋ํ ์ ๋ฆฌ, ๊ทธ๋ฆฌ๊ณ ๋ด ๋ง๋ก, ๋ด๊ฐ ์ง์ ์ฝ๋๋ฅผ ํ์ด์ ์๋ณด๊ณ ์ ๋ฆฌ ํด๋ณด๋ ์ฐ์ต์ด ๊ฐ์ฅ ์ข์ ๊ฒ ๊ฐ๋ค.
๐Feel : ์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํตํด ๋๋์
๐ ์ ์ฒด ์ ์ผ๋ก ์ค์ค๋ก ์ ๋ฆฌํด ๋ณด๋ ์๊ฐ์ ๊ฐ์ ธ๋ดค๊ณ ์ด๋ป๊ฒ ๊ณต๋ถ๋ฅผ ํด์ผ ํ๋์ง ๋ฐฉํฅ์ฑ์ด ์ข๋ ๊ตฌ์ฒด์ ์ผ๋ก ์๊ธด ๊ฒ ๊ฐ์์ ์ข๋ค.
๐ ๋์ ๋ํ ๋ฌธ์ ์ ์ ํ์
ํ๊ณ ๊ทธ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ด ์กด์ฌํ๋ ๊ฒ์ ๊ฐ์ฌํ๋ค.
๐ ๋๋ ์ด ๊ณต๋ถ๋ฅผ ํ๋๊ฒ ๊ต์ฅํ ์ฌ๋ฐ์ด ํ๊ณ ์ง์ฌ์ผ๋ก ๋ค๊ฐ๊ฐ๋ค๊ณ ๋๊ผ๋ค.
๐ ํด์ผํ ๊ฒ ์ ์์์ผ๋ ์ค์ฒ์ ํด์ผํ๋ค. ๋ํํด์ง์ง ๋ง๊ณ ํญ์ ์ต์ ์ ๋คํ์.
๐ ๋ชธ์ด ์ฝํด์ง๊ธฐ ๋ฑ ์ข์ ์๊ธฐ๋ค. ํํํ ์ด๋ํด์ ๊ฑด๊ฐํ ๋ชธ ์ํ๋ฅผ ์ ์งํ์. ๊ทธ๊ฒ๋ ์ค๋ ฅ์ด๋ค.
ํ์ง๋ ์ง์ง ์ ์ฑ์ ๋คํ ๊ธ ์ ๋ดค์ต๋๋ค. ๊ฑด๊ฐํ ๋ชธ ์ํ ์ ์ง ๋๋ฌด ๊ณต๊ฐ๋๊ณ ์ฌํ๋ค์ ใ ใ ใ ์ ๊ฐ ์ ๋ฒ์๋ ๋งํ์ง๋ง ํ์ง๋์ ์ถฉ๋ถํ ์์ ๊ฐ ๊ฐ์ ธ๋ ๋๋ ๋ถ์ ๋๋ค. ์์ ์ ๋๋ฌด ์ญ๊ตฌ๋ฆฌ ์ทจ๊ธํ์ง ๋ง์ ์!