๐ฉ๐ป Learn programming/HTML, CSS (2) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [CSS] CSS ๋ฐ์ค ๋ชจ๋ธ (box model) โ CSS ๋ฐ์ค ์์ญ ๋ฐ๊นฅ ์ฌ๋ฐฑ ์์ญ (Margin Area) ํ ๋๋ฆฌ ์์ญ (Border Area) ์์ชฝ ์ฌ๋ฐฑ ์์ญ (Padding Area) ๋ด์ฉ ์์ญ (Content Area) โ ๊ฐ ์์ญ์ ๊พธ๋ฐ ๋ ์ฌ์ฉํ๋ ์์ฑ ๋ฐ๊นฅ ์ฌ๋ฐฑ : margin ์์ฑ ํ ๋๋ฆฌ : border ์์ฑ ์์ชฝ ์ฌ๋ฐฑ : padding ์์ฑ ๋ฐ์ค ๊ฐ๋ก ํฌ๊ธฐ : width ์์ฑ ๋ฐ์ค ์ธ๋ก ํฌ๊ธฐ : height ์์ฑ ๋ฐ์ค ํฌ๊ธฐ ๊ธฐ์ค : box-sizing ์์ฑ ๋ฐ์ค์ ๋ฐฐ๊ฒฝ : background ์์ฑ โ ์์ฑ ์ถ์ฝ ํํ (shorthand) 4๊ฐ ์์ฑ : top, right, bottom, left (์๊ณ๋ฐฉํฅ !) 3๊ฐ ์์ฑ : top, right/left, bottom 2๊ฐ ์์ฑ : top/bottom, right/left 1๊ฐ ์์ฑ .. [์คํ๋ฅดํ] ์น๊ฐ๋ฐ ์ข ํฉ๋ฐ 1์ฃผ์ฐจ - HTML, CSS, Javascript 1. HTML HTML์ ๋ผ๋, CSS๋ ๊พธ๋ฏธ๊ธฐ HTML ๊ธฐ์ด - HTML๋ ํฌ๊ฒ head์ body๋ก ๊ตฌ์ฑ - head์๋ ํ์ด์ง ์์ฑ์ ๋ณด, - body์๋ ํ์ด์ง ๋ด์ฉ head ์์ ๋ค์ด๊ฐ๋ ๋ํ ์์๋ค : meta, script, link, title body ์์ ๋ค์ด๊ฐ๋ ๋ํ ์์๋ค ๊ตฌ์ญ ๋๋๊ธฐ ๋ฌธ๋จ bullet point!1 bullet point!2 h1 ์ ๋ชฉ์ ๋ํ๋ด๋ ํ๊ทธ. ํ์ด์ง๋ง๋ค ํ๋์ฉ ์จ์ฃผ๋ฉด ๊ตฌ๊ธ ๊ฒ์ ์ ๋จ. h2 ์์ ๋ชฉ ์ด์ธ์ h3~h6 span ํ๊ทธ: ํน์ ๊ธ์๋ฅผ ๊พธ๋ฐ a ํ๊ทธ: ํ์ดํผ๋งํฌ img ํ๊ทธ: input ํ๊ทธ: button ํ๊ทธ: ๋ฒํผ textarea ํ๊ทธ: text๋ฅผ ์์ฑํ ์ ์๋ ๊ณณ โ ๐ฐ ๋จ์ถ ํค TIP! โ ์ ๋ ฌ ๋จ์ถ ํค - window : Ctrl + A.. ์ด์ 1 ๋ค์