Return to Video

01-04 The_Resumes_HTML

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

more » « less
Video Language:
English
Team:
Udacity
Projekt:
ud804 - Javascript Basics
Duration:
04:01

Korean subtitles

Revisions Compare revisions