< Return to Video

HTML internal links

  • 0:00 - 0:03
    링크는 웹페이지를 서로 연결하기 위한
  • 0:03 - 0:05
    좋은 수단입니다
  • 0:05 - 0:07
    또한 링크는 웹페이지의 한 부분을
  • 0:07 - 0:09
    같은 웹페이지의 다른 부분과 연결할 수도 있습니다
  • 0:09 - 0:14
    특히 목차를 사용하는 아주 긴 웹페이지에 요긴하게 쓰입니다
  • 0:14 - 0:17
    이 페이지에는 많은 내용이 있습니다
  • 0:17 - 0:20
    웹의 히스토리와 HTML 버전 히스토리를
  • 0:20 - 0:22
    제공하고 있죠
  • 0:22 - 0:26
    충분히 목차가 필요할 정도로 많은 내용인 것 같네요
  • 0:26 - 0:29
    이 위에서 순서가 없는 목록으로 시작하겠습니다
  • 0:29 - 0:33
    목록의 항목은 한 구획의 제목이 됩니다
  • 0:33 - 0:35
    이 제목마다 링크를 달아서
  • 0:35 - 0:38
    클릭을 하면 페이지의 그 부분으로 갈 수 있게 하겠습니다
  • 0:39 - 0:42
    그러면 다시 'a' 태그로 시작합니다
  • 0:42 - 0:45
    이 제목에 'a'의
  • 0:45 - 0:48
    시작, 끝 태그를 다는 것으로 시작합니다
  • 0:49 - 0:54
    그러면, 이 링크의 href는 어떻게 해야 할까요?
  • 0:55 - 0:58
    우리는 브라우저에게 웹페이지의
  • 0:58 - 1:00
    어디로 가야 하는지 알려주어야 하는데요
  • 1:00 - 1:03
    페이지의 특정 부분을 유일하게 나타내는 방법으로요
  • 1:03 - 1:06
    만약 CSS selector를 배웠다면
  • 1:06 - 1:09
    어떻게 하는지 이미 알 것입니다
  • 1:09 - 1:14
    'id' 속성을 태그에 추가하면 됩니다
  • 1:14 - 1:18
    스크롤을 내려서 제목을 찾은 다음
  • 1:19 - 1:23
    그리고 'id' 속성을 이 제목에 추가합니다
  • 1:23 - 1:25
    이제 커서를 'h2'에 두고 다음을 입력합니다
  • 1:25 - 1:27
    id = "
  • 1:27 - 1:30
    그리고 유일한 식별자를 씁니다
  • 1:30 - 1:33
    "web-history" 같은
  • 1:33 - 1:36
    이제 링크로 돌아가죠
  • 1:36 - 1:40
    브라우저에게 이것이 internal link임을 알리려면,
  • 1:40 - 1:42
    해시 (#) 문자로 시작해야 합니다
  • 1:42 - 1:45
    그리고 아까 썼던 id를 씁니다
  • 1:46 - 1:48
    이제...
  • 1:48 - 1:51
    이 강의를 일시정지하고 링크를 클릭해 보세요
  • 1:51 - 1:56
    해봐요, 기다려 드릴게요
    딸깍 딸깍!
  • 1:57 - 2:00
    이 구획으로 스크롤이 내려간 것을 보았나요?
  • 2:00 - 2:01
    그렇다면 성공한 것입니다!
  • 2:01 - 2:03
    우리는 더 많은 링크를 추가할 수 있어요
  • 2:03 - 2:06
    id 속성을 모든 제목에 달고
  • 2:06 - 2:08
    'a' 태그가 그것들을 가리키게 만들면 되죠
  • 2:08 - 2:09
    직접 해 보세요
  • 2:10 - 2:12
    중요한 것은 ID는 유일해야 한다는 점입니다
  • 2:12 - 2:15
    그렇지 않다면 브라우저가 어디로 가야하는지 알 수가 없거든요
  • 2:15 - 2:18
    그러니 무엇을 나타내는지 명확히 알 수 있도록 쓰세요
Title:
HTML internal links
Video Language:
English
Duration:
02:19

Korean subtitles

Revisions

Our website uses cookies for analysis purposes.