๋ฌธ์์ ์ ๋ณด๋ฅผ ๋ณด๋ค ์ ํํํ๊ธฐ ์ํด์๋ ์๋ฏธ์ ๋ง๋ ํ๊ทธ๋ฅผ ์ ์ฌ์ฉํด์ผํ๋ค. ์ ์ ํ ๋๊ตฌ sematic tag๋ฅผ ๊ณจ๋ผ ์ฌ์ฉํด๋ณด์.'์๋ฏธ๋ก ์ ์ธ ์น'์ด๋ผ๋ ๋ป์ผ๋ก,ํ์ฌ์ ์ธํฐ๋ท๊ณผ ๊ฐ์ ๋ถ์ฐํ๊ฒฝ์์ ๋ฆฌ์์ค(์น ๋ฌธ์, ๊ฐ์ข ํ์ผ, ์๋น์ค ๋ฑ)์ ๋ํ ์ ๋ณด์ ์์ ์ฌ์ด์ ๊ด๊ณ
์น ํ์ด์ง์ ๋ ์ด์์์ ์น ์ฌ์ดํธ์ ์ธ๊ด์ ๊ฒฐ์ ์ง๋ ๋งค์ฐ ์ค์ํ ์์! ์์์ด ๋ฐ์ด๋ค. display์์ฑ์ ์์๋ฅผ ์ด๋ป๊ฒ ํ์ํ ์ง๋ฅผ ์ ํํ๊ณ , visibility์์ฑ์ ์์๋ฅผ ๋ํ๋ผ์ง ๋ง์ง๋ฅผ ๊ฒฐ์ ํ๋ ์์ฑ์ด๋ค. display๋ ์์์ด ๋ถ๊ฐ๋ฅํ๊ณ , visibility๋
html,css๋ฅผ ์ด์ฉํด์ ์๊ธฐ์๊ฐ์นํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด์.(1์ฃผ์ฐจ ์ฌ์ ๊ณผ์ ) 1์ฃผ์ฐจ ์ฌ์ ๊ณผ์ ๋ก ์๊ธฐ์๊ฐ์นํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด๋ ๋ฏธ์ ์ ๋ฐ์๋ค.
์์๋ฅผ ์ํ๋ ์์น๋ก ์ด๋์ํค๊ณ , ๋ค์ ๋ฐ๋ผ์ค๋ ์์๋ค์ด ์ฒ์ ์์๋ฅผ ํผํด์ ํ์๋๋๋ก ํ๋ค. ํ ์คํธ์ ๋๋ฌ์์ฌ์๋ ์ด๋ฏธ์ง ๋ ์ด์์์ ํ์ํ๊ธฐ ์ํด ๋ง๋ค์ด์ก๋ค.float์์ฑ์ ์ฌ์ฉํ๋ฉด ์ฃผ๋ณ์ผ๋ก ์ปจํ ์ธ ๊ฐ ํ๋ฅด๋ฏ์ด ๋ฐฐ์น๊ฐ ๋๋๋ฐ, ์ด๋ฅผ ํด์ฒดํ๊ธฐ ์ํด clear์์ฑ์ ์ฌ์ฉํ
ํฌ์ง์ ๋์ ํตํด ๋ค์ํ ์์น์ด๋์ ์๋ํด๋ณด์. css ํฌ์ง์ ๋์ ์ด์ฉํด์ ์น ๋ฌธ์์ ๋ ์ด์์์ ๋ค์ํ ๋ฐฉ์์ผ๋ก ์ง์ ํ ์ ์๋ค.ํ ์คํธ๋ ์ด๋ฏธ์ง๋ฅผ ๋๋ํ ๋ฐฐ์นํ๊ฑฐ๋, ์ฌ๋ฌ ์์๋ฅผ ๊ฐ๋ก/์ธ๋ก๋ก ์ํ๋ ๊ณณ์ ๋ฐฐ์น๊ฐ ๊ฐ๋ฅํ๋ค.์์์์์ ํฌ๊ธฐ์ ๋ฐ๋ผ์ ๋ถ๋ชจ์์์ ํฌ๊ธฐ๊ฐ ์๋์ผ๋ก
html์์์ ๋ ์ด์์์ ๊ฒฐ์ ํ๋ ๊ฐ์ฅ ์ค์ํ ์์ฑ ์ค ํ๋์ธ display์ ๋ํด ์์๋ณด์. ๋ชจ๋ ์์๋ ํ๊ฐ์ display๊ฐ์ ๊ฐ์ง๊ณ ์๋ค.inlineblockinline-blockflexlist-itemnone...๋ฑ์ด ์์ง๋ง, ๋๋ถ๋ถ์ ๊ฒฝ์ฐ inline๊ณผ bl
box model2 ์ค์ต๊ณผ์ ๋ง๋ค์ด๋ณด์
'box model' ์ค์ต๊ณผ์ ์ ๋ฆฌํ๊ธฐ-์ฃผ์ด์ง ๋ณด๊ธฐ๋ง ํด๊ฒฐํ๋ ค๊ณ ํ๋ ๊ฒ์ด ๋ฌธ์ ์ ์ด์๋ค...โถlogin-form margin-top ๊ฐ๊ฒฉ์ ์ฃผ์ง ์์๋ค- ๋ณด๊ธฐ์ง๋ฌธ์ ๋์ค์ง ์์์ ์ ๊ฒฝ์ฐ์ง ์์ ๋ถ๋ถ์ด์๋ค. ๋ค์๋ถํฐ๋ ๋์ผ๋ก ์ง์ ํ์ธํ๊ณ , ์ค์ค๋ก ์๊ฐํด์ ๊ฐ๊ฒฉ์ ์ง์ ํด
๋ฐ์ค ๋ชจ๋ธ์ ๋ค์ํ ์์ฑ์ ๋ํด ์์๋ณด์์์๋ ๋ด์ฉ(content), ํจ๋ฉ(padding), ํ ๋๋ฆฌ(border)๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.ํจ๋ฉ์ ๋ด์ฉ๊ณผ ํ ๋๋ฆฌ ์ฌ์ด์ '๊ณต๊ฐ', Margin์ ํ ๋๋ฆฌ ๋ฐ์ ๊ณต๊ฐ์ด๋ค.div์ div2์ width์ height๊ฐ ๊ฐ์ง๋ง , ๊ฒฐ๊ณผ๋ฌผ
font, color๋ฅผ ์ค์ ํ๋ ๋ค์ํ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์. ํฐํธ 1.ํฐํธ ๊ตต๊ธฐ ์ค์ ํ๊ธฐ font-weight.100~900 100์ด ๊ฐ์ฅ ์๊ณ , 900์ด ๊ฐ์ฅ ๊ตต๋ค. font-weight: normal;=font-weight: 400; 2.ํฐํธ ์ค์ ํ๊ธฐ ์ฒซ๋ฒ์งธ๋ก
๋น์ทํ์ง๋ง ๋ค๋ฅธ ํ๊ทธ๋ค์ ๋ํด ์์๋ณด์.
์์ฝ๋ ์๊ฐ ์ , ๋ชป๋ฐ๋ผ๊ฐ๋ฉด ์ด์ฉ์งํ๋ ๋ถ์ํ ๋ง์์ ๋ฏธ๋ฆฌ ๊ณต๋ถ๋ฅผ ์์ํด ๋ณด์๋ค. > HTML/CSS์ ๊ธฐ๋ณธ๋ด์ฉ์ ๋ฐฐ์ ๋ค. HTML๊ณผ CSS 'HTML(HyperText Markup Language)'์ ์น์ฌ์ดํธ์ ๋ค์ด๊ฐ ๋ด์ฉ์ ๋ด๋นํ๊ณ , CSS(Cascading