์ค๋์ ์ ๋ฒ์ ๋ชป๋คํ Markup practice์ ๋๋จธ์ง ๋ถ๋ถ์ ์งํํด ๋ณด์๋ค!
์ต๊ทผ์ HTML, CSS์ ๋ํด ์กฐ๊ธ ๋ ๊ณต๋ถํด ๋ณด๊ณ ์ถ์ด์, ๊น๋ฒ๊ทธ๋์ ๊ฐ์์ธ HTML&CSS๋ ์ฌ๋ฐ๋ค๋ฅผ ์๊ฐํ๊ณ ์๋ค. ๋งํฌ์ ์ฐ์ต๊ฒฐ๊ณผ๋ฅผ ํฌ์คํ ์ ํตํด ๊ณต์ ํ๋ ค ํ๋ค!
์ค๋๋ง์ CSS ๊ด๋ จ ํฌ์คํ ์ ํ๋ ๊ฒ ๊ฐ๋ค. ์ต๊ทผ์ javascript์ react ๊ณต๋ถ์ ์ง์คํ๋๋ผ ์ ์ ๋ฏธ๋ค๋์๋ค. ์์ ์ react๋ฅผ ๊ณต๋ถํ๋ค ๋ณด๋ฉด html,css,javascript๋ก ์๊พธ ๋ค์ ํ๊ทํ๊ฒ ๋๋ค๋ ๊ธ์ ๋ณธ์ ์ด ์๋๋ฐ, ๋๋ ์์ธ๊ฐ ์๋๊ฐ๋ณด๋ค.๐คฃ
์ด๋ฒ ํฌ์คํ ์์๋ css์ position ์์ฑ์ ๋ํด ์ ๋ฆฌํด๋ณด์! # POSITION ์์ฑ์ด๋? >https://developer.mozilla.org/ko/docs/Web/CSS/position ๋ฅผ ์ฐธ์กฐํ์ฌ ์์ฑํ์์ต๋๋ค.
์ด๋ฒ ๊ธ์์๋ ๋์ถฉ ์๊ณ ์ฐ๊ณ ์๋ ๊ฒ ๊ฐ์ ์ธ์ ๊ฐ ํ๋ฒ์ ์ ๋ฆฌํ๋ ค ํ๋, font ๊ด๋ จ ์ค์ ๋ค์ ๋ํด ์ ๋ฆฌํ๊ณ ์ ํ๋ค.Typography is the art and technique of arranging type to make written language legi
์ด๋ฒ ๊ธ์์๋ CSS์ BOX-SIZING ์์ฑ์ธ CONTENT BOX์ BORDER BOX๊ฐ ์ด๋ค ์ฐจ์ด๊ฐ ์๋์ง ์์๋ณด์! ๐๐ ## BOX MODEL CONTENT BOX์ BORDER BOX์ ์ฐจ์ด์ ๋ํด ์ด์ผ๊ธฐ ํ๋ ค๋ฉด ๋จผ์ box model์
๋ธ๋ก ๋ ๋ฒจ ์์๋ ์ธ์ ๋ ์๋ก์ด ์ค์์ ์์ํ๊ณ , ์ข์ฐ ์์ชฝ์ผ๋ก ์ต๋ํ ๋์ด๋ ๊ฐ๋ฅํ ๋ชจ๋ ๋๋น๋ฅผ ์ฐจ์งํฉ๋๋ค. (mdn)BLOCK Tag๋ ํญ์ ํ ์ค์ ๊ฝ ์ฑ์ฐ๊ฒ ๋๋ค. ๋ค์ ํ๊ทธ๋ ๋ฌด์กฐ๊ฑด ์ค๋ฐ๊ฟ์ด ์ ์ฉ๋๋ค. ์๊ธฐ Width๋ก ๊ฐ๋ ์ฑ์ธ ์ ์๋ ๊ฒฝ์ฐ, ์๋์ ์ผ๋ก m