Korean subtitles

← 01-04 The_Resumes_HTML

Get Embed Code
7 Languages

Showing Revision 6 created 01/14/2016 by nc_translator3.

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