YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Korean subtitles

← Layout - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. 좋아요, 결승선이 보이네요
  2. 우리는 렌더 트리를 배웠습니다
    이제 화면에 픽셀을 넣을 수 있는 건가요?
  3. 확실히 매우 가까워졌어요
    하지만 한가지 단계가 더 남아있습니다
  4. 우리는 여전히 모든 요소가 페이지 어디에
  5. 그리고 어떻게 위치해야 하는지 알아내야 해요
  6. 그리고 그게 바로 레이아웃 단계예요, 보시죠
  7. 레이아웃이 어떻게 작동되는지 보여드리기 위해
    간단한 렌더 트리를 가져왔어요
  8. 여기 최종 결과물이 보입니다
  9. 만약 우리가 폰을 돌리면
    박스 크기가 변화하는 게 보이시죠?
  10. 하지만 이 박스들의 속성은 여전히 같습니다
  11. 브라우저가 여기서 무엇을 하는지 알아보죠
  12. 위에서부터 시작해 볼까요?
  13. 우리는 body 요소의 배경색을 회색으로 설정했고
    이건 이해가 되네요
  14. 정확히 우리가 보았던 것입니다
    그리고 폭을 100%로 설정했어요
  15. >> 잠시만요, 정확히 무엇의 100%라는 거죠?
  16. >> 레이아웃 뷰포트 크기의 100%에요
    만일 여러분들이 주의 깊게 보았다면
  17. 우리의 Hello world 예제가
    추가적인 meta 태그를 포함하는 것을 보았을 거에요
  18. >> 오 맞아요, 반응형 디자인에 관한
    웹 기초 가이드를 읽어본 적 있어요
  19. 그 가이드에서는 제가 항상 추가적인 meta 태그를
    써야한다고 했던 것 같아요
  20. 하지만 무슨 의미인지 이해하진 못했어요
  21. >> 약간 수수께끼 같죠, 하지만 이해하려고 노력해 봅시다
  22. 이것이 하는 일은 브라우저에
  23. 레이아웃 뷰포트의 폭이
    기기의 폭과 일치해야 한다고 알려주는 것이죠
  24. 예를들어, 기기의 폭이 320px이라고 합시다
  25. 만약 이 meta 뷰포트 태그가 존재하면
  26. 브라우저는 레이아웃 뷰포트를
  27. 우리가 말하는 100%인 320px로 설정할 거에요
  28. >> 오, 알겠네요
    그렇다면 제가 이 태그를 쓰지 않으면 어떻게 되나요?
  29. >> 그러면 브라우저는 기본 뷰포트 폭을 쓰게 됩니다
  30. 일반적으로 980px이죠
    큰 스크린에서 최적화된 크기에요
  31. 그리고 때때로 겪어보았겠지만
    사이트가 줌 아웃된 채로 렌더링이 돼서
  32. 텍스트를 읽고 탐색을 하려면 확대를 해야 하죠,
    뷰포트의 레이아웃이 설정되지 않았기 때문이에요
  33. >> 오 이해가 되네요
  34. 전 확실히 그런 사이트를 좋아하지 않아요
  35. >> 저도 좋아하지 않죠, 멋진 모바일 경험을 주기 위해서
  36. 여러분들은 항상 뷰포트에 신경을 써야 합니다
    다시 우리의 예제로 돌아가 보죠
  37. 만약 기기의 폭이 320px이면
  38. body는 320px의 폭을 가질 것입니다
    다음으로, div 노드는 50%의 폭을 가지고 있어요
  39. 그리고 이 노드는 body의 자식이고
    그 폭은 부모에 상대적이에요
  40. 그리고 320px의 50%는 160픽셀입니다
  41. 또한 paragraph는 부모의 50% 폭을 가지므로
  42. 80px의 폭을 가지게 됩니다
    그리고 이게, 끝입니다
  43. 이것이 레이아웃이에요
    자, 한번 실습을 해볼까요?