์ฐ๊ด๋ ๋ชฉ์ ์ ๊ฐ์ง๋ ๋ณ์, ํจ์๋ฅผ ํ๋์ ํด๋์ค๋ก ๋ฌถ์ด ์ธ๋ถ์์ ์ฝ๊ฒ ์ ๊ทผํ์ง ๋ชปํ๋๋ก ์ ๋ณด์๋(information hiding)ํ๋ ๊ฒ์บก์ํ๋ฅผ ํตํด ์ธ๋ถ์์ ๋ด๋ถ ์ ๋ณด์ ์ ๊ทผํ๊ฑฐ๋ ๋ณ๊ฒฝํ ์ ์๊ฒ ์ง์ ์ ์ธ ์ ๊ทผ์ ๋ง๊ณ ๊ฐ์ฒด๊ฐ ์ ๊ณตํ๋ ํ๋์ ๋ฉ์๋๋ฅผ ํตํด์๋ง ์ ๊ทผ
ul - unordered list (์์์์ด ๋ฆฌ์คํธ ํํ)ol - ordered list (์์๊ฐ ์๊ธฐ๋๋ฌธ์ ๋ฆฌ์คํธ ์์ ์ซ์ ๋ถ์)li - listtr - table row (ํ)td - table division (์ด-column)x๋ ์ฝ๋์ ์๋ tr(ํ)์์
์์ ์๋ ์ ๋ถ div ๋ก ์น์ ์ ๋๋ ๊ตฌ์ฑํ์ง๋ง ์ด์ ๊ฐ ๋ถ๋ถ๋ง๋ค ์๋ง์ ํ๊ทธ (์๋ฉํฑ ํ๊ทธ)๋ฅผ ํ์ฉํ์ฌ ๊ตฌ์ฑ๊ฒฐ๊ณผ๊ฒฐ๊ณผ๊ฒฐ๊ณผ๊ฒฐ๊ณผ๊ฒฐ๊ณผ
๋ชจ๋ HTML ์์๋ ๋ฐ์ค(box) ๋ชจ์์ผ๋ก ๊ตฌ์ฑ๋๋ฉฐ, ์ด๊ฒ์ ๋ฐ์ค ๋ชจ๋ธ(box model)์ด๋ผ๊ณ ํ๋ค.๋ฐ์ค ๋ชจ๋ธ์ HTML ์์๋ฅผ ํจ๋ฉ(padding), ํ ๋๋ฆฌ(border), ๋ง์ง(margin), ๋ด์ฉ(content)์ผ๋ก ๊ตฌ๋ถํ๋ค.๋ด์ฉ(content) : ํ ์คํธ๋
Static: ๊ธฐ๋ณธ๊ฐRelative: ์๊ธฐ ์์ ๊ธฐ์ค - position์ด ์๋ฌด๊ฒ๋ ์์ ๋(Static์ผ ๋)์ ์๊ธฐ ์์ ๊ธฐ์คAbsolute: ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ๋์ ์ธ ๊ฐFixed: ๋ทฐํฌํธ ๊ธฐ์ค ex) ์ฑํ ์๋ด์ฐฝ (์คํฌ๋กค ๋ด๋ ค๋ ์์น ๊ณ ์ ) ๊ฒฐ๊ณผ๋๋ฐ์ด์ค ์ข ๋ฅ