[WIL] w+3

riverยท2022๋…„ 3์›” 27์ผ
0

์ง€๋‚œ ํ•œ ์ฃผ ๐Ÿ’จ
d+14
d+16, d+16.5
d+17
d+18
d+20, d+20.5

์ž๊ดด๊ฐ์œผ๋กœ ์ ์ฒ ๋œ ํ•œ ์ฃผ...
๊ธฐ์ดˆ ์ฃผ๊ฐ„์€ ๊ทธ๋ƒฅ ์–ด๋–ป๊ฒŒ ๊ณต๋ถ€ํ•ด์•ผ ํ•˜๋Š”์ง€๋ฅผ ๋ชจ๋ฅด๊ฒ ์–ด์„œ ๋งค์ผ๋งค์ผ ํ—ค๋งค๊ธฐ๋งŒ ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋ฒˆ ์ฃผ์ฐจ ๊ณผ์ œ๋Š” ์˜ˆ์ œ ์‚ฌ์ดํŠธ์˜ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์ฐธ๊ณ ํ•˜์ง€ ์•Š๊ณ  ํ˜ผ์ž ๊ฐ•์˜๋งŒ ๋ณด๋ฉฐ ์ž‘์„ฑํ•ด ๋ณด๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ! ๐Ÿ’ช๐Ÿต


๐Ÿ“‚DOM(Document Object Model)

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์ด ์•„๋‹ˆ๋‹ค.

DOM์€ HTML ๋ฌธ์„œ๋กœ๋ถ€ํ„ฐ ์ƒ์„ฑ๋˜์ง€๋งŒ ํ•ญ์ƒ ๋™์ผํ•˜์ง„ ์•Š์œผ๋ฉฐ, ์‹ค์ œ๋กœ ์›๋ณธ HTML์˜ ์†Œ์Šค์™€ ๋‹ค๋ฅผ ์ˆ˜๋„ ์žˆ๋‹ค.

  • ์ž‘์„ฑ๋œ HTML ๋ฌธ์„œ๊ฐ€ ์œ ํšจํ•˜์ง€ ์•Š์„ ๋•Œ html ๋ฌธ์„œ์— ํ•„์ˆ˜์ ์ธ <head>, <body>๊ฐ€ ๋น ์ ธ์žˆ์Œ์—๋„ DOM์ด ์ƒ์„ฑ๋˜๋Š” ๊ณผ์ •์—์„œ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ต์ •๋˜์–ด ๋‚˜ํƒ€๋‚œ๋‹ค.
  • JavaScript์— ์˜ํ•ด DOM์ด ์ˆ˜์ •๋˜์—ˆ์„ ๋•Œ

    DOM์€ HTML ๋ฌธ์„œ์˜ ๋‚ด์šฉ์„ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์ธํ„ฐํŽ˜์ด์Šค์˜ ์—ญํ• ์„ ํ•จ๊ณผ ๋™์‹œ์— ๋™์  ์ž์›์ด ๋˜์–ด ์ˆ˜์ •๋  ์ˆ˜ ์žˆ๋‹ค.
    JS๋ฅผ ์‚ฌ์šฉํ•ด DOM์— ์ƒˆ๋กœ์šด ๋…ธ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์˜€์„ ๊ฒฝ์šฐ, DOM์€ ์—…๋ฐ์ดํŠธ ๋˜์ง€๋งŒ, ์‹ค์งˆ์ ์ธ HTML ๋ฌธ์„œ๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค.


โ— ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ์€ DOM์ด ์•„๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €์˜ ๋ทฐํฌํŠธ์— ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ์€ ๋ Œ๋”ํŠธ๋ฆฌ๋กœ, DOM๊ณผ CSSOM์˜ ์กฐํ•ฉ์ด๋‹ค. ๋ Œ๋”ํŠธ๋ฆฌ๋Š” ์‰ฝ๊ฒŒ ๋งํ•˜์ž๋ฉด ๋ Œ๋”๋ง ๋˜๋Š” ์š”์†Œ๋งŒ์„ ๊ด€์—ฌํ•˜๋ฉฐ, ์‹œ๊ฐ์ ์œผ๋กœ ๋ณด์ด์ง€ ์•Š๋Š” ์š”์†Œ๋Š” ์ œ์™ธ๋œ๋‹ค.

์ฒซ ์‚ฌ์ง„์˜ HTML์—์„œ <p>์š”์†Œ์— display:none ์Šคํƒ€์ผ ์†์„ฑ์„ ์ฃผ์—ˆ์„ ๊ฒฝ์šฐ, DOM ํŠธ๋ฆฌ์—” ๊ทธ๋Œ€๋กœ <p>์š”์†Œ๊นŒ์ง€ ๋‚˜ํƒ€๋‚˜์ง€๋งŒ, ๋ Œ๋”ํŠธ๋ฆฌ์—์„  ์ œ์™ธ๋˜์–ด ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

profile
๊ฐ€๋ณด์ž๊ณ 

0๊ฐœ์˜ ๋Œ“๊ธ€