๋ธ๋ผ์ฐ์ ๊ฐ HTML, CSS, JS๋ก ์์ฑ๋ ํ ์คํธ ๋ฌธ์๋ฅผ ์ด๋ป๊ฒ ํ์ฑ(ํด์)ํด์ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋งํ ๊น?
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ฌธ๋ฒ์ ๋ง๊ฒ ์์ฑ๋ ํ
์คํธ ๋ฌธ์๋ฅผ ์ฝ์ด ์คํํ๊ธฐ ์ํด์,
ํ
์คํธ ๋ฌธ์์ ๋ฌธ์์ด์ ํ ํฐ์ผ๋ก ๋ถํดํ๊ณ ,
ํ ํฐ์ ๋ฌธ๋ฒ์ ์๋ฏธ์ ๊ตฌ์กฐ๋ฅผ ๋ฐ์ํ์ฌ ํธ๋ฆฌ๊ตฌ์กฐ์ ์๋ฃ๊ตฌ์กฐ์ธ ํ์ค ํธ๋ฆฌ๋ฅผ ์์ฑํ๋ ๊ณผ์
HTML, CSS, JS๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํ์ฑํด ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅํ๋ ๊ฒ
HTML ๋ฌธ์๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ๋ณ์ ์ธ ์์
๋ธ๋ผ์ฐ์ ์์ ๊ฐ๊ฐ์ HTML Tag๋ฅผ ์ฝ์ผ๋ฉด์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ดํดํ ์ ์๋ ์์ ๋ง์ ์ค๋ธ์ ํธ๋ก ๋ณํํ๋๋ฐ, ์ด ์ค๋ธ์ ํธ๋ฅผ ๋
ธ๋ Node ๋ผ๊ณ ํ๋ค.
HTML์ ์์ฑ๋ ํ๊ทธ๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ๋
ธ๋๋ก ๋ณํ๋๋ ๊ฒ์ด๋ค.
node ์์๋ ํด๋์ค, ํ
์คํธ์ ๊ฐ์ ์ ๋ณด๋ค์ด ํฌํจ๋์ด ์๋ค.
Node๋ผ๋ ์ค๋ธ์ ํธ๋ eventTarget์ ์์ํ๋ค.
์ด HTML element๊ฐ ๋ ๋๋ง ์์ง์ ์ํด ํ์ฑ๋์ด DOM์ ๊ตฌ์ฑํ๋ ์์ ๋ ธ๋ ๊ฐ์ฒด๋ก ๋ณํ๋๋ค.
์๋๋ฅผ ํฌํจํ ์ด 15๊ฐ์ ๋ ธ๋ ์ข ๋ฅ๊ฐ ์๋ค.
๊ฐ์ฒดํํ ๋ชจ๋ ๋ ธ๋ ๊ฐ์ฒด๋ค์ ํธ๋ฆฌ์๋ฃ ๊ตฌ์กฐ๋ก ๋ค์ ๊ตฌ์ฑ๋๋ค.
ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ : ๋ถ๋ชจ ๋ ธ๋์ ์์ ๋ ธ๋๋ก ๊ตฌ์ฑ๋์ด ๋ ธ๋๊ฐ์ ๊ณ์ธต์ ๊ตฌ์กฐ๋ฅผ ํํํ๋ ๋น์ ํ ์๋ฃ๊ตฌ์กฐ
์ด ๋ ธ๋ ๊ฐ์ฒด๋ค๋ก ๊ตฌ์ฑ๋ ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ๋ฅผ DOM์ด๋ผํ๋ค.
DOM
์ Document Object Model
์ ์ฝ์๋ก, ์๋ฒ์์ ๋ฐ์์จ ์์ ํ
์คํธ๋ก ์ด๋ฃจ์ด์ง HTML๋ฌธ์๋ฅผ, ๋ธ๋ผ์ฐ์ ๊ฐ ์ดํดํ ์ ์๋ ์๋ฃ๊ตฌ์กฐ์ธ ๊ฐ์ฒด์ ํํ๋ก ๋ณํํ ๊ฒ์ด๋ค.
๋ ๋๋ง ์์ง์ HTML์ ํ์ค์ฉ ์์ฐจ์ ์ผ๋ก ํ์ฑํด DOM์ ์์ฑํด ๋๊ฐ๋ค. ์ฆ, HTML ๋ฌธ์๋ฅผ ํ์ฑํ ๊ฒฐ๊ณผ๋ฌผ์ด๋ค.
๋ ๋๋ง ์์ง์ด HTML์ ํ์ฑํ๋ฉฐ DOM ์ ์์ฑํ๋ค๊ฐ
CSS๋ฅผ ๋ก๋ํ๋ link / style ํ๊ทธ๋ฅผ ๋ง๋๋ฉด DOM ์์ฑ์ ์ผ์์ค๋จํ๋ค.
๊ทธ๋ฆฌ๊ณ ํด๋น ํ๊ทธ์ ์ง์ ๋ cssํ์ผ์ ์๋ฒ์ ์์ฒญํ์ฌ ๋ก๋ํ ๋ค์, ๋์ผํ ๊ณผ์ ์ ๊ฑฐ์ณ DOM์ CSS๋ฅผ ๋ณํฉํ ํํ์ธ CSSOM (CSS Object Model)์ ์์ฑํ๋ค.
(์ด CSS ํ์ฑ์ ์๋ฃํ ๋ค์ ๋ค์ DOM ์์ฑ์ ์ฌ๊ฐ ํ๋ค.)
CSSOM์ cascading rule์ ๋ฐ๋ฅด๋๋ฐ, ๋ถ๋ชจ์์์ ์ ์ฉ๋ css๋ ์์์์์ ๊ทธ๋๋ก ์์๋๋ค๋ ์๋ฏธ์ด๋ค. (์ ์ด๋ฏธ์ง ์ฐธ๊ณ )
์ต์ข
์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์ ํ๊ธฐ๋ ๊ตฌ์กฐ
๋ ๋๋ง ์์ง์ด ์๋ฒ๋ก๋ถํฐ ์๋ต๋ HTML๊ณผ CSS๋ฅผ ํ์ฑํ์ฌ ๊ฐ๊ฐ DOM ๊ณผ CSSOM์ ์์ฑํ๊ณ ๋๋ฉด, ๋ ๋๋ง์ ์ํด ์ด ๋์ render tree๋ก ๊ฒฐํฉํ๋ค.
rendertree๋
๋ ๋๋ง์ ์ํ
ํธ๋ฆฌ๊ตฌ์กฐ์ ์๋ฃ๊ตฌ์กฐ์ด๋ฏ๋ก, ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๋ ๋๋ง ๋๋ ๋ ธ๋๋ง์ผ๋ก ๊ตฌ์ฑ๋๋ค.
๋ฐ๋ผ์ ๋ค์์ ๋ ธ๋๋ค์ ํฌํจํ์ง ์๋๋ค.
<meta>
, <script>
display: none
opacity: 0 ํน์ visibility: hidden์ render tree์ ํฌํจ์ด ๋๋ค.
์์ฑ๋ ๋ ๋ํธ๋ฆฌ๋ ๊ฐ HTML์์์ ๋ ์ด์์์ ๊ณ์ฐํ๋๋ฐ ์ฌ์ฉ๋๋ค.
์ดํ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํฝ์
์ ๋ ๋๋งํ๋ painting ์ฒ๋ฆฌ์ ์
๋ ฅ๋๋ค.
๋ธ๋ผ์ฐ์ ์์ ์นํ์ด์ง๋ฅผ ์ด์์ ๋,
DOM๊ณผ, BOM(browser object model)- navigator,location,fetch์ ๊ฐ์ web API์ ๊ด๋ จ๋ ์์
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ํฌํจ๋์ด ์๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ์์์ ๋์ํ๋ ๊ฒ์ ๋ง๋ค ๋DOM, BOM๊ณผ ์ฐ๊ด๋ API๋ฅผ ์ฌ์ฉํ ์ ์๋ฐ.
console.log(window)๋ฅผ ํด๋ณด๋ฉด ๋ด๋ถ์ API์ ์ค๋ธ์ ํธ, ์ด๋ฒคํธ API, ์คํฌ๋ฆฐ ์ฌ์ด์ฆ ์ ๋ณด ๋ฑ์ด ํฌํจ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.