์ง๋ ํ ์ฃผ ๐จ
d+14
d+16
,d+16.5
d+17
d+18
d+20
,d+20.5
์๊ดด๊ฐ์ผ๋ก ์ ์ฒ ๋ ํ ์ฃผ...
๊ธฐ์ด ์ฃผ๊ฐ์ ๊ทธ๋ฅ ์ด๋ป๊ฒ ๊ณต๋ถํด์ผ ํ๋์ง๋ฅผ ๋ชจ๋ฅด๊ฒ ์ด์ ๋งค์ผ๋งค์ผ ํค๋งค๊ธฐ๋ง ํ๋ ๊ฒ ๊ฐ๋ค. ์ด๋ฒ ์ฃผ์ฐจ ๊ณผ์ ๋ ์์ ์ฌ์ดํธ์ ์์ค์ฝ๋๋ฅผ ์ฐธ๊ณ ํ์ง ์๊ณ ํผ์ ๊ฐ์๋ง ๋ณด๋ฉฐ ์์ฑํด ๋ณด๋ ๊ฒ์ด ๋ชฉํ! ๐ช๐ต
DOM์ด๋?
๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(The Document Object Model, ์ดํ DOM) ์ HTML, XML ๋ฌธ์์ ํ๋ก๊ทธ๋๋ฐ interface ์ด๋ค. DOM์ ๋ฌธ์์ ๊ตฌ์กฐํ๋ ํํ(structured representation)์ ์ ๊ณตํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ DOM ๊ตฌ์กฐ์ ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ๊ทธ๋ค์ด ๋ฌธ์ ๊ตฌ์กฐ, ์คํ์ผ, ๋ด์ฉ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋๋๋ค.
๐ MDN
์ฐ๋ฆฌ๊ฐ ํํ ์๊ณ ์๋ <html>
, <body>
, <div>
๋ฑ์ด ๋ฐ๋ก ๋ฌธ์ ๊ฐ์ฒด์ด๋ค. JavaScript๋ฅผ ์ฌ์ฉํด ์์ ์ด ๊ฐ๋ฅํ ๊ฐ์ฒด๋ฅผ ๋งํ๋ค.
DOM ์ ์๋ณธ HTML ๋ฌธ์์ ๊ฐ์ฒด ๊ธฐ๋ฐ ํํ ๋ฐฉ์์ด๋ค. DOM๊ณผ html์ ๋ง์น ์ด๋ฆ๋ง ๋ค๋ฅธ, ๊ฐ์ ์กด์ฌ์ธ ๊ฒ ์ฒ๋ผ ๋๊ปด์ง์ง๋ง, DOM์ ๋ค์ํ ํ๋ก๊ทธ๋จ์์ ์ฌ์ฉ๋ ์ ์๋๋ก ๋จ์ ํ ์คํธ๋ก ๊ตฌ์ฑ๋ HTML ๋ฌธ์์ ๋ด์ฉ๊ณผ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ฒด ๋ชจ๋ธ๋ก ๋ณํํ ๊ฒ์ ๋งํ๋ค.
html, css๊ฐ ์ฌ์ฉ์์๊ฒ ์ง์ ์ ์ผ๋ก ๋ณด์ฌ์ง๋ ๊ฒ์ด๋ผ๋ฉด DOM์ ๊ธฐ๊ณ๋ ์ํํธ์จ์ด๊ฐ ์น์ฌ์ดํธ์ ๊ตฌ์กฐ๋ฅผ ์ด๋ป๊ฒ ์ดํดํด์ผ ํ๋์ง
์ ๋ํ ํ์ค์ด๋ค.
DOM์ HTML ๋ฌธ์๋ก๋ถํฐ ์์ฑ๋์ง๋ง ํญ์ ๋์ผํ์ง ์์ผ๋ฉฐ, ์ค์ ๋ก ์๋ณธ HTML์ ์์ค์ ๋ค๋ฅผ ์๋ ์๋ค.
<head>
, <body>
๊ฐ ๋น ์ ธ์์์๋ DOM์ด ์์ฑ๋๋ ๊ณผ์ ์์ ์ฌ๋ฐ๋ฅด๊ฒ ๊ต์ ๋์ด ๋ํ๋๋ค.JavaScript์ ์ํด DOM์ด ์์ ๋์์ ๋
DOM์ HTML ๋ฌธ์์ ๋ด์ฉ์ ๋ณผ ์ ์๋ ์ธํฐํ์ด์ค์ ์ญํ ์ ํจ๊ณผ ๋์์ ๋์ ์์์ด ๋์ด ์์ ๋ ์ ์๋ค.
JS๋ฅผ ์ฌ์ฉํด DOM์ ์๋ก์ด ๋
ธ๋๋ฅผ ์ถ๊ฐํ์์ ๊ฒฝ์ฐ, DOM์ ์
๋ฐ์ดํธ ๋์ง๋ง, ์ค์ง์ ์ธ HTML ๋ฌธ์๋ฅผ ๋ณ๊ฒฝํ์ง๋ ์๋๋ค.
๋ธ๋ผ์ฐ์ ์ ๋ทฐํฌํธ์ ๋ณด์ฌ์ง๋ ๊ฒ์ ๋ ๋ํธ๋ฆฌ๋ก, DOM๊ณผ CSSOM์ ์กฐํฉ์ด๋ค. ๋ ๋ํธ๋ฆฌ๋ ์ฝ๊ฒ ๋งํ์๋ฉด ๋ ๋๋ง ๋๋ ์์๋ง์ ๊ด์ฌํ๋ฉฐ, ์๊ฐ์ ์ผ๋ก ๋ณด์ด์ง ์๋ ์์๋ ์ ์ธ๋๋ค.
์ฒซ ์ฌ์ง์ HTML์์ <p>
์์์ display:none
์คํ์ผ ์์ฑ์ ์ฃผ์์ ๊ฒฝ์ฐ, DOM ํธ๋ฆฌ์ ๊ทธ๋๋ก <p>
์์๊น์ง ๋ํ๋์ง๋ง, ๋ ๋ํธ๋ฆฌ์์ ์ ์ธ๋์ด ๋ํ๋๋ ๊ฒ์ ์ ์ ์๋ค.