[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.19,0:00:02.68,Default,,0000,0000,0000,,링크는 웹페이지를 서로 연결하기 위한
Dialogue: 0,0:00:02.68,0:00:04.60,Default,,0000,0000,0000,,좋은 수단입니다
Dialogue: 0,0:00:04.74,0:00:07.24,Default,,0000,0000,0000,,또한 링크는 웹페이지의 한 부분을
Dialogue: 0,0:00:07.24,0:00:09.49,Default,,0000,0000,0000,,같은 웹페이지의 다른 부분과 연결할 수도 있습니다
Dialogue: 0,0:00:09.49,0:00:13.70,Default,,0000,0000,0000,,특히 목차를 사용하는 아주 긴 웹페이지에 요긴하게 쓰입니다
Dialogue: 0,0:00:13.86,0:00:16.88,Default,,0000,0000,0000,,이 페이지에는 많은 내용이 있습니다
Dialogue: 0,0:00:16.88,0:00:19.50,Default,,0000,0000,0000,,웹의 히스토리와 HTML 버전 히스토리를
Dialogue: 0,0:00:19.50,0:00:21.71,Default,,0000,0000,0000,,제공하고 있죠
Dialogue: 0,0:00:22.06,0:00:25.81,Default,,0000,0000,0000,,충분히 목차가 필요할 정도로 많은 내용인 것 같네요
Dialogue: 0,0:00:26.23,0:00:29.42,Default,,0000,0000,0000,,이 위에서 순서가 없는 목록으로 시작하겠습니다
Dialogue: 0,0:00:29.42,0:00:32.60,Default,,0000,0000,0000,,목록의 항목은 한 구획의 제목이 됩니다
Dialogue: 0,0:00:32.86,0:00:35.23,Default,,0000,0000,0000,,이 제목마다 링크를 달아서
Dialogue: 0,0:00:35.23,0:00:38.44,Default,,0000,0000,0000,,클릭을 하면 페이지의 그 부분으로 갈 수 있게 하겠습니다
Dialogue: 0,0:00:38.62,0:00:41.70,Default,,0000,0000,0000,,그러면 다시 'a' 태그로 시작합니다
Dialogue: 0,0:00:41.70,0:00:44.95,Default,,0000,0000,0000,,이 제목에 'a'의
Dialogue: 0,0:00:44.95,0:00:48.35,Default,,0000,0000,0000,,시작, 끝 태그를 다는 것으로 시작합니다
Dialogue: 0,0:00:48.65,0:00:54.16,Default,,0000,0000,0000,,그러면, 이 링크의 href는 어떻게 해야 할까요?
Dialogue: 0,0:00:54.81,0:00:57.81,Default,,0000,0000,0000,,우리는 브라우저에게 웹페이지의
Dialogue: 0,0:00:57.81,0:00:59.80,Default,,0000,0000,0000,,어디로 가야 하는지 알려주어야 하는데요
Dialogue: 0,0:01:00.03,0:01:03.13,Default,,0000,0000,0000,,페이지의 특정 부분을 유일하게 나타내는 방법으로요
Dialogue: 0,0:01:03.49,0:01:06.34,Default,,0000,0000,0000,,만약 CSS selector를 배웠다면
Dialogue: 0,0:01:06.34,0:01:09.01,Default,,0000,0000,0000,,어떻게 하는지 이미 알 것입니다
Dialogue: 0,0:01:09.33,0:01:13.52,Default,,0000,0000,0000,,'id' 속성을 태그에 추가하면 됩니다
Dialogue: 0,0:01:13.92,0:01:18.47,Default,,0000,0000,0000,,스크롤을 내려서 제목을 찾은 다음
Dialogue: 0,0:01:18.76,0:01:22.57,Default,,0000,0000,0000,,그리고 'id' 속성을 이 제목에 추가합니다
Dialogue: 0,0:01:22.92,0:01:25.37,Default,,0000,0000,0000,,이제 커서를 'h2'에 두고 다음을 입력합니다
Dialogue: 0,0:01:25.37,0:01:27.43,Default,,0000,0000,0000,,id = "
Dialogue: 0,0:01:27.43,0:01:30.08,Default,,0000,0000,0000,,그리고 유일한 식별자를 씁니다
Dialogue: 0,0:01:30.08,0:01:32.70,Default,,0000,0000,0000,,"web-history" 같은
Dialogue: 0,0:01:33.24,0:01:35.65,Default,,0000,0000,0000,,이제 링크로 돌아가죠
Dialogue: 0,0:01:35.91,0:01:39.56,Default,,0000,0000,0000,,브라우저에게 이것이 internal link임을 알리려면,
Dialogue: 0,0:01:39.56,0:01:41.80,Default,,0000,0000,0000,,해시 (#) 문자로 시작해야 합니다
Dialogue: 0,0:01:41.80,0:01:45.50,Default,,0000,0000,0000,,그리고 아까 썼던 id를 씁니다
Dialogue: 0,0:01:46.35,0:01:48.09,Default,,0000,0000,0000,,이제...
Dialogue: 0,0:01:48.09,0:01:51.34,Default,,0000,0000,0000,,이 강의를 일시정지하고 링크를 클릭해 보세요
Dialogue: 0,0:01:51.44,0:01:56.09,Default,,0000,0000,0000,,해봐요, 기다려 드릴게요\N딸깍 딸깍!
Dialogue: 0,0:01:56.55,0:01:59.58,Default,,0000,0000,0000,,이 구획으로 스크롤이 내려간 것을 보았나요?
Dialogue: 0,0:01:59.70,0:02:01.14,Default,,0000,0000,0000,,그렇다면 성공한 것입니다!
Dialogue: 0,0:02:01.21,0:02:02.88,Default,,0000,0000,0000,,우리는 더 많은 링크를 추가할 수 있어요
Dialogue: 0,0:02:02.88,0:02:05.56,Default,,0000,0000,0000,,id 속성을 모든 제목에 달고
Dialogue: 0,0:02:05.56,0:02:07.70,Default,,0000,0000,0000,,'a' 태그가 그것들을 가리키게 만들면 되죠
Dialogue: 0,0:02:07.79,0:02:09.50,Default,,0000,0000,0000,,직접 해 보세요
Dialogue: 0,0:02:09.54,0:02:12.15,Default,,0000,0000,0000,,중요한 것은 ID는 유일해야 한다는 점입니다
Dialogue: 0,0:02:12.15,0:02:15.31,Default,,0000,0000,0000,,그렇지 않다면 브라우저가 어디로 가야하는지 알 수가 없거든요
Dialogue: 0,0:02:15.42,0:02:17.67,Default,,0000,0000,0000,,그러니 무엇을 나타내는지 명확히 알 수 있도록 쓰세요