๐Ÿ“DOM CSSOM ๋ Œ๋”๋ง ๊ณผ์ •(๋ธŒ๋ผ์šฐ์ €๋Š” ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”๊ฐ€?)

์ด์ค€์„ยท2024๋…„ 3์›” 19์ผ

๊ฐœ๋… ์ •๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
3/11

๐Ÿ” ๋ธŒ๋ผ์šฐ์ €์˜ ๊ตฌ์กฐ


  • ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค

    ๋’ค๋กœ๊ฐ€๊ธฐ, ์•ž์œผ๋กœ๊ฐ€๊ธฐ, ์ƒˆ๋กœ๊ณ ์นจ ๋“ฑ๋“ฑ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์ƒ๋‹จ๋ฐ”๋ฅผ ์นญํ•œ๋‹ค.(url์ด ๋ณ€๊ฒฝ๋ผ๋„ ๋ฐ”๋€Œ์ง€ ์•Š๋Š”๋‹ค.)

  • ๋ Œ๋”๋ง ์—”์ง„

    ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ทธ๋ฆฌ๋Š”(๋ Œ๋”) ์—”์ง„์ด๋‹ค.(๋ Œ๋” = ๊ทธ๋ฆฌ๋‹ค)
    ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋ถ€๋ถ„์ด ๋ Œ๋”๋ง ์—”์ง„์ด๋‹ค.

  • ๋ธŒ๋ผ์šฐ์ € ์—”์ง„

    ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์™€ ๋ Œ๋”๋ง ์—”์ง„ ์‚ฌ์ด์— ๊ฐ€๊ต์—ญํ• 
    ex) ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๋ˆ„๋ฅด๋ฉด ๋ Œ๋”๋ง ์—”์ง„์—๊ฒŒ ์•Œ๋ ค์ค€๋‹ค.

  • ์ž๋ฃŒ ์ €์žฅ์†Œ

    ๋ธŒ๋ผ์šฐ์ €์˜ ์ž๋ฃŒ ์ €์žฅ๊ณต๊ฐ„, ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€, ์„ธ์…˜์Šคํ† ๋ฆฌ์ง€ ๋“ฑ๋“ฑ์ด ์—ฌ๊ธฐ์— ์†ํ•œ๋‹ค.

  • ํ†ต์‹ 

    Network
    ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ๋„คํŠธ์›Œํฌ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„
    ex) ์›น์‚ฌ์ดํŠธ๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ๋„คํŠธ์›Œํฌ๋ฅผ ๋‹ด๋‹นํ•จ, ๊ฐœ๋ฐœ์ž ํˆด์—์„œ ๋„คํŠธ์›Œํฌ ํƒญ์—์„œ ํ™œ๋™์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•ด์„๊ธฐ

    ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ•ด์„ํ•ด์„œ ๋™์ž‘ํ•˜๊ฒŒ ํ•จ, ํฌ๋กฌ์—์„œ๋Š” V8์ด๋ผ๋Š” ์—”์ง„์„ ์”๋‹ˆ๋‹ค.

  • UI ๋ฐฑ์—”๋“œ

    ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ, ๋งˆ์šฐ์Šค ์›€์ง์ž„, ํด๋ฆญ๋“ฑ์„ ํ•ธ๋“ค๋ง ํ•œ๋‹ค.

โŒจ๏ธ ์ฃผ์†Œ์ฐฝ์— 'naver.com'์„ ์ž…๋ ฅํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์–ด๋–ค์ผ์ด ๋ฒŒ์–ด์งˆ๊นŒ?

  • 'naver.com'์€ ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ธฐ ํŽธํ•˜๊ฒŒ ๋ถ€์—ฌํ•œ ์ด๋ฆ„์ด๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ์‹ค์ œ๋กœ 'naver.com'์„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•˜๋Š” ๊ฑด IP์ฃผ์†Œ์ด๋‹ค.
  • HTML์˜ ์ตœ์ข… ๋ชฉํ‘œ๋Š” ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•ด์„œ ๋งˆ์ง€๋ง‰์— DOM tree๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค.


  1. ๋ธŒ๋ผ์šฐ์ €๋Š” 'naver.com'์˜ IP์ฃผ์†Œ๋ฅผ ์ฐพ์œผ๋Ÿฌ DNS(Domain Name System)์„ ์ฐพ์•„๊ฐ„๋‹ค. ๊ทธ๊ณณ์—๋Š” ์ด๋ฆ„๊ณผ IP์ฃผ์†Œ๋“ค์ด ์žˆ๋‹ค.
  2. DNS์—์„œ IP์ฃผ์†Œ๋ฅผ ๋ฐ›์œผ๋ฉด ์ฃผ์†Œ๋ฅผ ์ฐพ์•„๊ฐ„๋‹ค.(๊ฐ„๋žตํ•˜๊ฒŒ ์„ค๋ช…ํ–ˆ์ง€๋งŒ ๋งŽ์€ ๋‚ด์šฉ๋“ค์ด ์žˆ๋‹ค.)
    DNS cache์— ์ €์žฅํ•ด์„œ ๋‹ค์Œ์—๋Š” ๊ทธ๊ณณ์—์„œ IP์ฃผ์†Œ๋ฅผ ๋ฐ”๋กœ ๊ฐ€์ ธ์˜จ๋‹ค.
  3. IP์ฃผ์†Œ๋กœ ํ•ด๋‹น ์„œ๋ฒ„์— ์ฐพ์•„๊ฐ€์„œ HTML์„ ์š”์ฒญํ•œ๋‹ค.
  4. ๋ฐ”์ดํŠธ ์Šคํฌ๋ฆผ์„ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค. ex) 010110
    ๋ฐ”์ดํŠธ ์Šคํฌ๋ฆผ์„ ์ธ์ฝ”๋”ฉ๋กœ์ง์„ ์จ์„œ ์šฐ๋ฆฌ๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด๋กœ ์บ๋ฆญํ„ฐํ™” ์‹œํ‚จ๋‹ค. (UTF-8์œผ๋กœ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค.) meta charset="utf-8"๋กœ ์จ๋†“๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์œผ๋กœ ์ธ์ฝ”๋”ฉ ๋๋Š”์ง€ ๋ฉ˜์…˜ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด์„œ ์“ด๋‹ค.
  5. Document ๋ฌธ์„œ๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๋ธŒ๋ผ์šฐ์ €๋Š” ํ† ๊ทผํ™”(1์ฐจ ํ•ด์„)๋ฅผ ํ•œ๋‹ค. ์—”์ง„์ด ํ•œ๊ธ€์ž ํ•œ๊ธ€์ž์”ฉ ์ฝ์€ ํ›„ ํ† ํฐ์„ ์ƒ์„ฑํ•œ๋‹ค.
  6. ์ƒ์„ฑ๋œ ํ† ํฐ์„ ์˜๋ฏธ์žˆ๋Š” Object๋กœ ์žฌํ•ด์„ ํ•œ๋‹ค. ์ด๊ฒƒ์„ Nodes๋ผ๊ณ  ํ•œ๋‹ค.
  7. ์ƒ์„ฑ๋œ Objectํƒœ๊ทธ(Nodes)์— ๊ด€๊ณ„๋ฅผ ์ค€๋‹ค. ์ด๋ฅผ Model์ด๋ผ๊ณ  ํ•˜๊ณ  ์ด๋ฅผ ํ•ฉ์ณ์„œ DOM(Document Object Model)๋”์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.
    ๊ด€๊ณ„๋ฅผ ๋‹ค ์ฃผ๋ฉด ๊ฒฐ๊ณผ๋ฌผ์ด ๋‚˜๋ฌด๊ฐ™์€ ๋ชจ์Šต์ด๋ผ DOM tree(๋”ํŠธ๋ฆฌ)๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. tree๋Š” ์ž๋ฃŒ์˜ ๊ตฌ์กฐ ์ค‘ ํ•˜๋‚˜์ด๋‹ค.
  8. ํƒœ๊ทธ ์ค‘ css link๋ฅผ ๋งŒ๋‚˜๋Š” ์ˆœ๊ฐ„ HTML์€ ์ž ๊น ๋ฉˆ์ถฐ์„œ DNS์—์„œ ๋ฐ›์€ IP์ฃผ์†Œ๋ฅผ ๋‹ค์‹œ ์ฐพ์•„๊ฐ€์„œ cssํŒŒ์ผ์„ ์š”์ฒญํ•œ๋‹ค.(HTML์€ IP๋ฅผ ์ฐพ์€ ํ›„ ํŒŒ์‹ฑ์„ ๋‹ค์‹œ ์ง„ํ–‰ํ•œ๋‹ค.)
    css๋„ ๋ฐ”์ดํŠธ ์ŠคํŠธ๋ฆผ => ์บ๋ฆญํ„ฐํ™” => ํ† ํฐํ™” => ๋…ธ๋“œ => CSSOM tree ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.

    - css๋Š” DOM์˜ ์ƒ์„ฑ์„ ๋ง‰์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ž˜์„œ ์ƒ๋‹จ์— ์œ„์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค. DOM์€ Render Tree๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด CSSOM์„ ๊ธฐ๋‹ค๋ฆฐ๋‹ค. DOM๊ณผ CSSOM์ด ์™„์„ฑ์ด ๋ผ์•ผ ๋‹ค์Œ ์Šคํ…์œผ๋กœ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— HTML์ž…์žฅ์—์„œ๋Š” CSSOM์„ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

    - CSSOM์€ ์›น์‚ฌ์ดํŠธ ์„ฑ๋Šฅ์— ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•œ๋‹ค. cssํŒŒ์ผ์ด ๋„ˆ๋ฌด ํฌ๋ฉด DOM์€ ์ž‘์—…์ด ๋๋‚ฌ์–ด๋„ CSSOM์„ ์˜ค๋ž˜ ๊ธฐ๋‹ค๋ ค์•ผํ•จ์œผ๋กœ ์„ฑ๋Šฅ์ด ๋–จ์–ด์ง€๊ธฐ๋„ ํ•œ๋‹ค. cssํŒŒ์ผ์˜ ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ๋ฒ•์—๋Š” ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์‚ฌ์ด์ฆˆ ๋งˆ๋‹ค ๋‹ค๋ฅธ css๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ฌ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค
    ex) ๋ฐ์Šคํฌํƒ‘ ๋ฒ„์ „ ์Šคํƒ€์ผ๋งŒ ๋ณด์—ฌ์ฃผ๋ฉด ๋˜๋Š”๋ฐ ๋ชจ๋ฐ”์ผ ๋ฒ„์ „์ผ ๋•Œ ์Šคํƒ€์ผ์„ ๊ตณ์ด ์ง€๊ธˆ ๋“ค๊ณ ์˜ฌ ํ•„์š”๊ฐ€ ์—†๋‹ค.
  9. css ๊ณผ์ •์ด ๋๋‚˜๋ฉด CSSOM tree๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.
  10. ํƒœ๊ทธ ์ค‘ javaScript ๋ฅผ ๋งŒ๋‚˜๋Š” ์ˆœ๊ฐ„ HTML์€ ์ž ๊น ๋ฉˆ์ถฐ์„œ DNS์—์„œ ๋ฐ›์€ IP์ฃผ์†Œ๋ฅผ ๋‹ค์‹œ ์ฐพ์•„๊ฐ€์„œ javaScriptํŒŒ์ผ์„ ์š”์ฒญํ•œ๋‹ค.
  11. javaScriptํŒŒ์ผ์ด ์‹คํ–‰๋œ๋‹ค. javaScript๋Š” ๊ฐ•๋ ฅํ•˜๊ธฐ์— javaScript๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋™์•ˆ์—๋Š” DOMํŒŒ์‹ฑ์„ ๋ฉˆ์ถ˜๋‹ค. ์™œ๋ƒํ•˜๋ฉด HTML์ž…์žฅ์—์„œ๋Š” javaScript๊ฐ€ ๋…ธ๋“œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ณ  ์š”์ฒญ์‚ฌํ•ญ๊ณผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์ด ๋งŽ์€๋ฐ, DOM์„ ๋‹ค ๊ทธ๋ฆฐ ํ›„ javaScript์š”์ฒญ์„ ๋ฐ›์œผ๋ฉด ๋งŽ์€ ๋ณ€ํ™”๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ๊ณ  ๊ทธ๋ ‡๋‹ค๋ฉด DOM์„ ๋‹ค์‹œ ๊ทธ๋ ค์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— DOMํŒŒ์‹ฑ์„ ๋ฉˆ์ถ˜ ๋‹ค์Œ javaScript์š”์ฒญ์„ ๋ฐ›์•„์„œ ํ•œ๋ฒˆ์— ์ฒ˜๋ฆฌํ•˜๋Š”๊ฒŒ ๋” ํšจ์œจ์ ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.(javaScriptํŒŒ์ผ์ด ์‹คํ–‰๋˜๋Š” ๋™์•ˆ์—๋Š” HTML์€ DOMํŒŒ์‹ฑ์„ ๋ฉˆ์ถค)


    - scriptํƒœ๊ทธ์˜ ์œ„์น˜๋ฅผ HTMLํƒœ๊ทธ ์ƒ๋‹จ์— ๋‘๊ฒŒ๋˜๋ฉด HTML๋‚ด์šฉ์„ ๋ณ€๊ฒฝํ•˜์ง€ ๋ชปํ•œ๋‹ค.scriptํƒœ๊ทธ ์ดํ›„์— HTMLํƒœ๊ทธ ๊ทธ๋ฆฌ๊ธฐ๋ฅผ ๋ฉˆ์ถฐ๋†“์€ ์ƒํƒœ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ž˜์„œ scriptํƒœ๊ทธ๋ฅผ body ๋ฐ”๋‹ฅ์— ์œ„์น˜ ์‹œ์ผœ์•ผํ•œ๋‹ค.

    - javaScript๊ฐ€ DOM์˜ ์ƒ์„ฑ์„ ๋ง‰์ง€ ์•Š๊ฒŒํ•˜๋Š” ์˜ต์…˜๋„ ์žˆ๋‹ค.(defer, async) scriptํŒŒ์ผ์ด ์œ„์— ์žˆ์–ด๋„ DOM์˜ ์ƒ์„ฑ์„ ๋ง‰์ง€์•Š๋Š”๋‹ค.
  12. HTML์„ ํ†ตํ•ด์„œ DOM์„ ๋งŒ๋“ค์—ˆ๊ณ , javaScript๋ฅผ ๋ถˆ๋Ÿฌ์™”๊ณ , CSSํ†ตํ•ด์„œ CSSOM์„ ๋งŒ๋“ค์—ˆ๋‹ค. DOM๊ณผ CSSOM์„ ํ•ฉ์ณ์„œ Render Tree๋ผ๋Š” ์ตœ์ข… ๋ฒ„์ „์„ ๋งŒ๋“ค๊ฒŒ ๋œ๋‹ค.
    Render Tree(๊ทธ๋ฆด ์ค€๋น„๊ฐ€ ๋œ tree, CSS์™€ DOM์ด ํ•ฉ์ณ์ง„ tree)๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ์œ„ํ•œ ์ตœ์ข… ์„ค๊ณ„๋„์ด๋‹ค. Render Tree๋Š” ์“ธ ๋•Œ ์—†๋Š” ๋…ธ๋“œ๋“ค์„ ๋‹ค ๋บ€๋‹ค. ex) headํƒœ๊ทธ, metaํƒœ๊ทธ ๋“ฑ๋“ฑ ํ™”๋ฉด์— ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒƒ ๋“ค์„ ์‹น ๋บ€๋‹ค. display: none ์†์„ฑ์„ ๊ฐ€์ง„ ํƒœ๊ทธ๋“ค๋„ Render Tree์—์„œ ๋บ€๋‹ค.

  13. Layout ๋‹จ๊ณ„๋Š” ์ •ํ™•ํ•œ px๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ๋‹จ๊ณ„์ด๋‹ค.

  14. Paint ๋‹จ๊ณ„๋Š” pxํ•˜๋‚˜ ํ•˜๋‚˜๋ฅผ Layout์•Œ๋ ค์ค€๋Œ€๋กœ ๊ทธ๋ฆฌ๋Š” ๋‹จ๊ณ„์ด๋‹ค. ํ•œ ํŽ˜์ด์ง€์— ๋‹ค ๊ทธ๋ฆฌ์ง€ ์•Š๊ณ  ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋ ˆ์ด์–ด๋กœ ๋‚˜๋ˆ ์„œ ๊ทธ๋ฆฐ๋‹ค. ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋ ˆ์ด์–ด๋กœ ๊ทธ๋ฆฌ๋ฉด ์ˆ˜์ •์‚ฌํ•ญ์ด ์ƒ๊ฒผ์„ ๋•Œ ์ˆ˜์ •์‚ฌํ•ญ ๋ ˆ์ด์–ด๋งŒ ๋ณ€๊ฒฝํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์„ฑ์ด ์ข‹๋‹ค.
  15. Composite ๋‹จ๊ณ„์—์„œ Paint์˜ ๋ ˆ์ด์–ด๋ฅผ ํ•ฉ์ณ์„œ ๋ณด์—ฌ์ค€๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์œ ์ €์ž…์žฅ์—์„œ๋Š” ํ•œํŽ˜์ด์ง€๋กœ ๋ณด์ด๊ฒŒ ๋œ๋‹ค.

๐Ÿ”Reflow๋˜๋Š” ์ƒํ™ฉ

  1. ํŽ˜์ด์ง€ ์ดˆ๊ธฐ ๋ Œ๋”๋ง ์‹œ (์ตœ์ดˆ Layout ๊ณผ์ •)
  2. ์œˆ๋„์šฐ ๋ฆฌ์‚ฌ์ด์ง• ์‹œ (Viewport ํฌ๊ธฐ ๋ณ€๊ฒฝ์‹œ)
  3. ๋…ธ๋“œ ์ถ”๊ฐ€ ๋˜๋Š” ์ œ๊ฑฐ
  4. ์š”์†Œ์˜ ์œ„์น˜, ํฌ๊ธฐ ๋ณ€๊ฒฝ(left, top, margin, padding, border, width, height ๋“ฑ...)
  5. ํฐํŠธ ๋ณ€๊ฒฝ(ํ…์ŠคํŠธ ๋‚ด์šฉ)๊ณผ ์ด๋ฏธ์ง€ ํฌ๊ธฐ ๋ณ€๊ฒฝ(ํฌ๊ธฐ๊ฐ€ ๋‹ค๋ฅธ ์ด๋ฏธ์ง€๋กœ ๋ณ€๊ฒฝ ์‹œ)

Layout์ด ๋ฐ”๋€Œ๋Š” ๊ฒƒ์€ ์›น์‚ฌ์ดํŠธ ์„ฑ๋Šฅ ์ธก๋ฉด์—์„œ ์†ํ•ด๋‹ค. ๋‹ค์‹œ ์ฒ˜์Œ๋ถ€ํ„ฐ Painting์„ ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์›น์‚ฌ์ดํŠธ ์„ฑ๋Šฅ์— ๋ฌธ์ œ๋ฅผ ์ค„ ์ˆ˜ ์žˆ์–ด์„œ ์ตœ์†Œํ•œ์œผ๋กœ ๋ฐ”๋€Œ์–ด์•ผ ์„ฑ๋Šฅ๊ฐœ์„ ์— ๋„์›€์ด ๋œ๋‹ค.

๐Ÿ†™์›น์‚ฌ์ดํŠธ ์„ฑ๋Šฅ์„ ์ข‹๊ฒŒ ํ•˜๋ ค๋ฉด

  1. ์†Œ์Šค์˜ ์‚ฌ์ด์ฆˆ ์ค„์ด๊ธฐ(๋ฐ”์ดํŠธ ์ˆ˜ ์ค„์ด๊ธฐ, ํฌ๋ฉด ์ฝ๋Š”๋ฐ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค.)
  2. ์™ธ๋ถ€์—์„œ ๊ฐ€์ ธ์˜ค๋Š” ๋ฆฌ์†Œ์Šค์–‘ ์ค„์ด๊ธฐ(media query, ๋ถˆํ•„์š”ํ•œ ํŒŒ์ผ ๋‚˜์ค‘์— ๊ฐ€์ ธ์˜ค๊ธฐ)
  3. ์™ธ๋ถ€์—์„œ ๊ฐ€์ ธ์˜ค๋Š” ํšŸ์ˆ˜ ์ค„์ด๊ธฐ. ์™ธ๋ถ€์—์„œ ๊ฐ€์ ธ์˜ค๋ฉด ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ์ƒํ™ฉ(์™ธ๋ถ€์—์„œ ์“ฐ์ง€ ์•Š๋Š” ์Šคํƒ€์ผ ๋“ฑ๋“ฑ)์— ๋”ฐ๋ผ ์ธ๋ผ์ธ์Šคํƒ€์ผ์„ ์ฃผ๋Š”๊ฒŒ ๋” ํšจ์œจ์ ์ด๋‹ค.
  4. Reflow, Repaint ์ค„์ด๊ธฐ, position:left, right(Reflow๋ถ€ํ„ฐ ์‹œ์ž‘ํ•จ)๋ณด๋‹จ trasfrom์“ฐ๋Š”๊ฒŒ ๋„์›€์ด๋œ๋‹ค.
    ์• ๋‹ˆ๋ฉ”์ด์…˜ ์›€์ง์ผ ๋Œ€ 1px์”ฉ ๋ณด๋‹จ 3px์”ฉ ํ•˜๋ฉด Repaint๋•Œ ๋œ๊ทธ๋ฆฌ๊ฒŒ ๋˜์„œ ๋„์›€์ด ๋จ

์ถœ์ฒ˜_์ฝ”๋”ฉ์•Œ๋ ค์ฃผ๋Š”๋ˆ„๋‚˜: https://www.youtube.com/watch?v=Mqh13dNI8jc

profile
ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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