YouTube

Got a YouTube account?

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

Korean subtitles

← The Resumes HTML - JavaScript Basics

Get Embed Code
7 Languages

Showing Revision 14 created 04/05/2016 by nc_review1.

  1. index.html부터 시작해보죠
  2. HTML은 정말 간단하니 걱정하지 마세요
  3. HTML은 웹페이지 요소의 내용과 레이아웃을 나타냅니다
  4. 여기 보이는 것과 실제 웹사이트를 비교해볼까요?
  5. 위쪽에 head 태그가 정의되어 있네요
  6. 자바스크립트 링크에는 CSS가 자주 보입니다
  7. 부분에서는
  8. Hello world!라는 문구를 볼 수 있어요
  9. 그리고 Chrome 창을 열면
  10. 보이시죠?
  11. HTML에 대해 더 알고 싶다면
  12. 체크해두면 좋을 내용이 있으니
  13. instructor's notes의 링크를 확인하세요
  14. >> 같은 것들요
  15. 웹사이트에 나타난 Hello world!가 여기 있네요
  16. div는 페이지 각각의 요소를 나타냅니다
  17. 빈 상자라고 생각하시면 될 것 같아요
  18. 여기서는 div에 id="main"이라는 선택자를 넣어줬습니다
  19. 이 부분은 추후 자바스크립트가 참조할겁니다
  20. 제임스, 더 설명할 거 있어요?
  21. >>아직 이력서 같지 않지만
  22. 학력, 경력, 프로젝트 이력 등의
  23. 몇 가지 형식은 보이네요
  24. 그럼 내용을 채워볼까요?
  25. >> 그래요
  26. 좋은 웹페이지를 만드는 다양한 방법이 있겠지만
  27. 크게 두 가지 전략이 있다고 생각해요
  28. 하나는 사용자들이 봐야 하는 내용을 명시적으로
  29. 하나하나 코딩하여 구현하는 방법(하드코딩)과
  30. 다른 하나는 사용자들이 페이지를 찾을 때마다
  31. 프로그램을 이용해 HTML 템플릿을 채우는 방법이에요
  32. 여기 2개의 경력란이 있는데요
  33. 하드코딩 버전을 보면
  34. 필립 제이 프라이(애니메이션 등장인물)의 정보가 있고
  35. 반면 템플릿 방식 경력란을 보면
  36. 지금은 비어있어요
  37. >>처음 시작할 때는 하드코딩이 좋을 수 있겠지만
  38. 장기적으로 봤을 때 좋은 방법은 아니죠
  39. 페이지에서 바꾸고 싶은 게 생길 때마다
  40. 일일이 고친다면 매우 힘들겠죠?
  41. 그래서 우리는 템플릿 방법을 써보려고 합니다
  42. 어떻게 생각하세요?
  43. >>좋아요
  44. 게다가 템플릿 방법을 사용하지 않는다면
  45. HTML 강의가 되어버릴 거예요
  46. >> 필요하다면 instructor's notes에 HTML 온라인 강의 링크를
  47. 걸어두었으니 참고해보세요
  48. HTML 상단에 jQuery.js라는
    jQuery 라이브러리 링크가 있네요
  49. helper.js도 있어요
  50. hepler.js는 간단한 자바스크립트 도우미랍니다
  51. 이 부분은 잠시 후에 다시 보도록 하죠
  52. >>아래에 2개의 script 태그가 더 있군요
  53. 이 태그는 브라우저에게
  54. 자바스크립트를 다운로드하고 실행하라고 명령합니다
  55. 이 스크립트로 HTML을 작성해보겠습니다
  56. >> 브라우저에는 Hello world만 보일 거예요
  57. 페이지를 확대해 설명드리겠습니다
  58. Hello world가 있고
    빈 이력서 부분과 자바스크립트가 보입니다
  59. 그리고 오른쪽에
  60. 브라우저에 보일 화면을 그려봤습니다
  61. 먼저 Hello world를 출력하고
  62. 이력서 영역이 나오겠죠
  63. 아래 쪽의 resume builder가 포함된 부분을 누르면
  64. 브라우저에서 코드가 실행될 거예요
  65. 그러면 경력란의 HTML이 바뀌고
  66. 이력서가 페이지에 나타날 것입니다
  67. >>잠시만요
  68. 페이지에 경력란이 왜 보이지 않는지 궁금하실 수 있어요
  69. 이력서 안에 경력란이 있는 것 같지만
  70. 실제 페이지에서는 보이지 않죠
  71. 이력서 아래의 코드 때문인데요
  72. 자바스크립트에서는
  73. 각 칸이 내용을 담고 있는지 확인하고
  74. 내용이 없다면, 칸 자체가 숨겨집니다
  75. 이 부분은 나중에 더 알아봅시다