Korean subtitles

← 02-14 The Render Tree

Get Embed Code
6 Languages

Showing Revision 6 created 03/15/2016 by nc_review1.

  1. 좋아요, 그럼 DOM은 페이지의 모든 내용을 포함하고
  2. CSSOM은 페이지의 모든 스타일을 포함하죠
  3. 그렇다면 어떻게 내용과 스타일을 받아서
  4. 그것들을 화면의 픽셀로 표현하는 거죠?
    무언가 중단 단계를 놓치고 있는 느낌이 들어요
  5. 좋은 직관이에요
    우리는 이제 DOM과 CSSOM 트리를 합쳐서
  6. 캐머런씨가 설명한 것을 정확히 표현하는
    렌더 트리가 필요해요
  7. 렌더 트리의 가장 중요한 속성 중 하나는
  8. 렌더 트리는 눈에 보이는 내용만 가지고 있다는 것이죠
  9. 그리고 이것을 실제로 확인해 보기 위해
  10. 우리 앞에 있는 간단한 예제를 살펴보기로 하죠
  11. 위에는 DOM 트리가, 아래에는 CSSOM이 있습니다
  12. 렌더 트리를 생성하기 위해
  13. DOM 트리의 루트 부분부터 시작하도록 하죠
  14. 여기서는 paragraph 노드이고
    이에 상응하는 어떤 CSS 규칙이 있는지 확인합니다
  15. 이 경우에는 모든 텍스트를
  16. 16px의 폰트 크기와 굵은 두께로
  17. 렌더링하게 하는 매칭 규칙이 보이네요
  18. 따라서 paragraph 노드는 그 CSS 속성과 함께
  19. 렌더 트리로 복사됩니다
    좋아요
  20. paragraph 노드를 마쳤어요
    트리 아래쪽으로 가봅시다
  21. 다음은 단순한 텍스트 노드인 Hello네요
  22. 따라서 이것을 복사해서 렌더 트리에 붙입니다
  23. 다음은 span 노드에 도착했습니다
    이에 맞는 CSS 규칙을 가지고 있네요
  24. 우리는 span을 가지고 있고
    실제로 paragraph 노드의 자식이에요
  25. 하지만 이 규칙의 속성 중
    display가 none으로 되어있는 것이 보이죠
  26. 이 속성은 이 span이 렌더링 되면 안 된다는 것을 말해주죠
  27. 렌더 트리는 눈에 보이는 내용만 가진다는 것을 말했었죠
  28. 그래서 이 노드를 건너뛰고 그 자식도 건너뜁니다
  29. >> display: none이라는 속성이 상속되기 때문에
    span 노드의 자식을 건너뛴 거죠, 맞나요?
  30. >> 정확해요, 그리고 결과적으로
  31. 이 span 노드의 자식들이 단지 텍스트 노드라면
  32. 그 모든 자식을 건너뛰고
    다음 노드로 갈 수 있어요
  33. 그리고 다음 노드를 렌더 트리로 한 번 더 복사합니다
  34. >> 그렇다면 렌더 트리는
    내용과 스타일 모두 가지게 되는 것이군요
  35. >> 맞아요
    자 그럼 이제 우리의 Hello World 페이지를 봅시다
  36. 좋아요, Hello World 페이지의
    DOM과 CSS 트리가 여기에 있어요
  37. 렌더 트리를 만들기 위해
    DOM 트리의 html 노드부터 시작하죠
  38. html과 헤드 부분은 눈에 보이는 정보를
    포함하고 있지 않아요
  39. 그러므로 빠르게 렌더 트리에서
  40. 이 부분들을 제거합시다
  41. 다음으로 body 노드가 있네요
    이쪽으로 복사합니다
  42. 이 왼쪽부분은 익숙하게 보일 거예요
  43. 우리가 방금 만들었던 부분이죠
    그러니 이 부분도 복사해옵시다
  44. 마지막으로 div와 img 노드가 있네요
  45. 이 두 노드 모두 눈에 보이는 내용을 포함해요
  46. 그러니까 이 두 노드와 스타일들을
  47. 렌더 트리로 복사해 옵니다
    모두 완료하면
  48. 이 렌더 트리와 화면에 보이는 내용을 비교해 봅시다
  49. >> 하 멋져요, 렌더 트리는 표현을 매우 잘하는 군요
  50. 필요 없는 텍스트가 없어졌어요
    화면에는 이미지가 있어야 하고
  51. 그 이미지는 오른쪽에 치우쳐져 보이네요
  52. 그러면, 이제 모두 끝난 건가요?
  53. >> 다는 아니에요, 아직 레이아웃이 남아있습니다
    하지만 퀴즈를 풀고 넘어가 보죠