[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.84,Default,,0000,0000,0000,,여러분들은 HTML 태그에 대해 배워봤어요
Dialogue: 0,0:00:03.00,0:00:04.80,Default,,0000,0000,0000,,하지만 HTML이 실제로 무엇을 의미하는지 아시나요?
Dialogue: 0,0:00:04.85,0:00:09.09,Default,,0000,0000,0000,,콘텐츠를 마크업하기 위해 태그를 사용합니다
Dialogue: 0,0:00:11.47,0:00:14.18,Default,,0000,0000,0000,,HTML과 같은 마크업언어를 사용할 때 태그를 이용합니다
Dialogue: 0,0:00:14.18,0:00:16.86,Default,,0000,0000,0000,,그러면 hypertext는 무엇일까요?
Dialogue: 0,0:00:16.87,0:00:20.49,Default,,0000,0000,0000,,그것은 인터넷이 발명되기 이전부터 존재하던 문구입니다
Dialogue: 0,0:00:20.49,0:00:23.82,Default,,0000,0000,0000,,1960년 대에 그것은 텍스트가 다른 텍스트와 연결되어서
Dialogue: 0,0:00:23.82,0:00:26.26,Default,,0000,0000,0000,,독자가 즉시 그리로 갈 수 있게 한 것을 의미했습니다
Dialogue: 0,0:00:26.27,0:00:29.72,Default,,0000,0000,0000,,Tim Berners-Lee씨가 HTML을 발명하고
Dialogue: 0,0:00:29.72,0:00:32.76,Default,,0000,0000,0000,,HTTP같은 다른 것도 발명해서
Dialogue: 0,0:00:32.79,0:00:34.91,Default,,0000,0000,0000,,전세계 텍스트들이 서로 연결될 수 있게 했습니다
Dialogue: 0,0:00:34.91,0:00:36.72,Default,,0000,0000,0000,,전세계 어디에서도 가능하죠
Dialogue: 0,0:00:36.75,0:00:39.19,Default,,0000,0000,0000,,어떻게 HyperText 마크업 언어를 이용해
Dialogue: 0,0:00:39.19,0:00:41.28,Default,,0000,0000,0000,,한 웹페이지를 다른 웹페이지로 연결시킬 수 있을까요?
Dialogue: 0,0:00:41.28,0:00:43.45,Default,,0000,0000,0000,,우리가 흔히 Link라고 부르는
Dialogue: 0,0:00:43.45,0:00:46.28,Default,,0000,0000,0000,,hyperlink(하이퍼링크)를 이용할거에요
Dialogue: 0,0:00:46.28,0:00:48.60,Default,,0000,0000,0000,,어떻게 HTML에서 Link를 만들 수 있을까요?
Dialogue: 0,0:00:48.64,0:00:50.30,Default,,0000,0000,0000,,이것이 이번 시간에 여러분들이 배워볼 내용들입니다
Dialogue: 0,0:00:50.30,0:00:52.77,Default,,0000,0000,0000,,여러분은 'Link' 태그를 사용해왔다고 생각할지도 몰라요
Dialogue: 0,0:00:52.77,0:00:57.63,Default,,0000,0000,0000,,그러나 실제론, HTML의 링크와는 다른 것입니다
Dialogue: 0,0:00:57.63,0:01:03.11,Default,,0000,0000,0000,,대신에, 우리는 닻(anchor)을 의미하는 'a' 태그를 사용할 거에요
Dialogue: 0,0:01:03.17,0:01:06.45,Default,,0000,0000,0000,,특정 위치의 페이지에 있는 링크를 잡아다가
Dialogue: 0,0:01:06.45,0:01:09.42,Default,,0000,0000,0000,,다른 웹페이지에 연결시킵니다
Dialogue: 0,0:01:09.44,0:01:11.99,Default,,0000,0000,0000,,Link를 만들기 위해서 태그를 써야 합니다
Dialogue: 0,0:01:11.99,0:01:14.62,Default,,0000,0000,0000,,그러나 우리는 항상 링크의 텍스트를 결정해야 합니다
Dialogue: 0,0:01:14.62,0:01:17.22,Default,,0000,0000,0000,,그리고 링크가 연결될 주소 역시 결정해야 하죠
Dialogue: 0,0:01:17.23,0:01:24.07,Default,,0000,0000,0000,,웹페이지의 탄생에 관한 더 많은 정보가 들어 있는\N페이지에 이 링크를 걸어 봅시다
Dialogue: 0,0:01:24.07,0:01:29.51,Default,,0000,0000,0000,,링크의 텍스트는 start와 end 태그 안에 써줄거에요
Dialogue: 0,0:01:29.60,0:01:31.90,Default,,0000,0000,0000,,여기에 마우스 커서를 놓고 쓸게요
Dialogue: 0,0:01:31.90,0:01:36.61,Default,,0000,0000,0000,,"Read more about the history of HTML"
Dialogue: 0,0:01:36.61,0:01:41.02,Default,,0000,0000,0000,,이제 문자가 링크처럼 된 것을 볼 수 있을 거에요
Dialogue: 0,0:01:41.06,0:01:44.32,Default,,0000,0000,0000,,하지만 아직 어느 곳으로 연결되어 이동하지는 않아요\N주소를 추가해야겠네요
Dialogue: 0,0:01:44.35,0:01:47.48,Default,,0000,0000,0000,,실제 페이지에 주소가 나타나게 하진 않을 거에요
Dialogue: 0,0:01:47.48,0:01:49.94,Default,,0000,0000,0000,,하지만 브라우저는 주소가 무엇인지 알도록 해야합니다
Dialogue: 0,0:01:49.99,0:01:53.04,Default,,0000,0000,0000,,그래서 a 태그에 있는 속성 안에 그것을 써넣습니다
Dialogue: 0,0:01:53.09,0:01:56.94,Default,,0000,0000,0000,,그것이 href 속성 입니다
Dialogue: 0,0:01:56.98,0:01:59.75,Default,,0000,0000,0000,,"href"는 그럼 무엇일까요?
Dialogue: 0,0:01:59.77,0:02:03.26,Default,,0000,0000,0000,,힌트를 줄게요\N여러분은 "h"를 많이 봤어요
Dialogue: 0,0:02:03.28,0:02:06.12,Default,,0000,0000,0000,,바로 "hyper" 를 나타냅니다\Nhyper-reference
Dialogue: 0,0:02:06.12,0:02:11.97,Default,,0000,0000,0000,,이제 주소를 넣어 붙입니다\N그것을 URL이라고 부릅니다
Dialogue: 0,0:02:12.04,0:02:15.94,Default,,0000,0000,0000,,URL 주소가 "http:"로 시작한다는 것은 아시죠?
Dialogue: 0,0:02:16.05,0:02:19.04,Default,,0000,0000,0000,,그럼 "http의 h"는 무엇일까요?\N역시 Hyper입니다
Dialogue: 0,0:02:19.08,0:02:21.48,Default,,0000,0000,0000,,HTML은 모든 것이 hyper와 관계되어 있어요
Dialogue: 0,0:02:21.55,0:02:25.66,Default,,0000,0000,0000,,이 URL은 브라우저가 웹페이지를 찾기 위해 \N알고싶어하는 모든 내용을 담고 있어요
Dialogue: 0,0:02:25.72,0:02:27.96,Default,,0000,0000,0000,,그것을 찾는데 사용되는 프로토콜
Dialogue: 0,0:02:28.04,0:02:30.36,Default,,0000,0000,0000,,그것이 있는 도메인
Dialogue: 0,0:02:30.46,0:02:34.26,Default,,0000,0000,0000,,그리고 서버에 위치한 Path도 명시하고 있습니다
Dialogue: 0,0:02:34.29,0:02:38.58,Default,,0000,0000,0000,,모든것을 명시하고 있기 때문에,\N우리는 이것을 "절대적 URL"이라고 부릅니다
Dialogue: 0,0:02:38.62,0:02:43.50,Default,,0000,0000,0000,,다른 웹페이지에서\N여러분은 /로 시작하는 path를 가진 URL 주소를 볼 수도 있어요
Dialogue: 0,0:02:43.56,0:02:46.18,Default,,0000,0000,0000,,그것은 브라우저가 현재 도메인에 있다는 것을 말해요
Dialogue: 0,0:02:46.18,0:02:48.63,Default,,0000,0000,0000,,그리고 그 도메인에서의 다른 path를 찾는거죠
Dialogue: 0,0:02:48.64,0:02:50.63,Default,,0000,0000,0000,,그것이 "relative URL (상대적 URL) "이라고 불립니다
Dialogue: 0,0:02:50.68,0:02:54.05,Default,,0000,0000,0000,,우리는 relative URL을 칸 아카데미에서\N다른 컨텐츠 간 연결할 때사용합니다
Dialogue: 0,0:02:54.14,0:02:57.62,Default,,0000,0000,0000,,여러분이 여기서 만드는 웹페이지에서는 \N절대적 URL들을 사용해야 합니다
Dialogue: 0,0:02:57.62,0:02:59.29,Default,,0000,0000,0000,,그게 더 안전합니다
Dialogue: 0,0:02:59.32,0:03:02.15,Default,,0000,0000,0000,,또한 그 페이지를 어디에 보일지도 정할 수 있어요
Dialogue: 0,0:03:02.15,0:03:04.73,Default,,0000,0000,0000,,현재 창이나 새로운 창을 열수 있죠
Dialogue: 0,0:03:04.77,0:03:07.06,Default,,0000,0000,0000,,링크를 새 윈도우에서 열리게 하려면
Dialogue: 0,0:03:07.06,0:03:10.75,Default,,0000,0000,0000,,또 다른 속성인 target을 추가할 거예요
Dialogue: 0,0:03:10.80,0:03:15.26,Default,,0000,0000,0000,,'target="_blank"
Dialogue: 0,0:03:15.29,0:03:19.41,Default,,0000,0000,0000,,이제, 이야기는 잠시 멈추고\N링크를 클릭해보겠습니다
Dialogue: 0,0:03:19.44,0:03:23.37,Default,,0000,0000,0000,,한번 해보세요. 기다릴게요\N클릭!
Dialogue: 0,0:03:23.39,0:03:24.37,Default,,0000,0000,0000,,어떻게 되었죠?
Dialogue: 0,0:03:24.43,0:03:25.80,Default,,0000,0000,0000,,여러분은 아마도 링크에 대한 경고문을
Dialogue: 0,0:03:25.80,0:03:28.24,Default,,0000,0000,0000,,사용자가 만든 웹페이지에서 보았을겁니다
Dialogue: 0,0:03:28.24,0:03:30.62,Default,,0000,0000,0000,,그리고 만약 "OK"를 클릭한다면\N링크창이 뜨게 됩니다
Dialogue: 0,0:03:30.68,0:03:33.12,Default,,0000,0000,0000,,그것은 여기서 만든 웹페이지에서 링크를
Dialogue: 0,0:03:33.12,0:03:34.40,Default,,0000,0000,0000,,조금 특별하게 다루기 때문입니다
Dialogue: 0,0:03:34.42,0:03:37.80,Default,,0000,0000,0000,,왜냐하면 그 링크들이 이상하고 무서운
Dialogue: 0,0:03:37.80,0:03:41.05,Default,,0000,0000,0000,,웹페이지로 연결될 수 도 있기 때문입니다
Dialogue: 0,0:03:41.07,0:03:43.99,Default,,0000,0000,0000,,그래서, 여러분이 여기서 만들게되는\N링크는 모두 경고창이 뜰거에요
Dialogue: 0,0:03:43.99,0:03:46.16,Default,,0000,0000,0000,,그리고 모든 링크는 새로운\N창을 띄우게 됩니다
Dialogue: 0,0:03:46.30,0:03:50.22,Default,,0000,0000,0000,,그것은 제가 이 target을 \N
Dialogue: 0,0:03:50.22,0:03:53.05,Default,,0000,0000,0000,,삭제할 수 있음을 의미합니다
Dialogue: 0,0:03:53.09,0:03:54.42,Default,,0000,0000,0000,,혹은 놔둘 수도 있어요
Dialogue: 0,0:03:54.42,0:03:57.76,Default,,0000,0000,0000,,놔둔다고 하면 언젠가 이 HTML을 다른곳으로 옮긴다고 해도
Dialogue: 0,0:03:57.76,0:04:00.84,Default,,0000,0000,0000,,여전히 링크는 새 윈도우에서 열리게 되는거죠
Dialogue: 0,0:04:00.87,0:04:02.72,Default,,0000,0000,0000,,언제 여러분은 target을 사용해야 할까요?
Dialogue: 0,0:04:02.78,0:04:06.30,Default,,0000,0000,0000,,일반적으로, 한 링크가 동일한 도메인의 다른 페이지로 연결된다면
Dialogue: 0,0:04:06.30,0:04:08.02,Default,,0000,0000,0000,,같은 창에서 열리게 됩니다
Dialogue: 0,0:04:08.02,0:04:12.18,Default,,0000,0000,0000,,만약 다른 도메인의 페이지로 연결된다면,\N
Dialogue: 0,0:04:12.24,0:04:13.64,Default,,0000,0000,0000,,새로운 창을 열게 될겁니다
Dialogue: 0,0:04:13.64,0:04:16.65,Default,,0000,0000,0000,,여러분에게 링크에 대해 다른 기능을 알려드릴게요
Dialogue: 0,0:04:16.69,0:04:18.65,Default,,0000,0000,0000,,우리는 문자 외에도 링크를 걸 수 있어요
Dialogue: 0,0:04:18.65,0:04:21.63,Default,,0000,0000,0000,,사진에도 링크를 걸 수 있습니다
Dialogue: 0,0:04:21.66,0:04:26.82,Default,,0000,0000,0000,,여기에, Tim Berners-Lee 사진이 있어요
Dialogue: 0,0:04:26.87,0:04:30.45,Default,,0000,0000,0000,,그리고
Dialogue: 0,0:04:30.46,0:04:34.07,Default,,0000,0000,0000,,여기 링크 안에 잘라 붙여넣겠습니다
Dialogue: 0,0:04:34.09,0:04:36.07,Default,,0000,0000,0000,,좋네요
Dialogue: 0,0:04:36.07,0:04:38.96,Default,,0000,0000,0000,,이제 마우스 커서를 사진쪽으로 옮기면
Dialogue: 0,0:04:38.96,0:04:41.31,Default,,0000,0000,0000,,커서가 포인터로 바뀌는걸 보실 수 있어요
Dialogue: 0,0:04:41.31,0:04:44.38,Default,,0000,0000,0000,,그리고 클릭하면 CERN 웹페이지로 연결됩니다
Dialogue: 0,0:04:44.38,0:04:46.95,Default,,0000,0000,0000,,이제, 여러분의 모든 웹페이지를 연결할 수 있어요
Dialogue: 0,0:04:46.95,0:04:49.87,Default,,0000,0000,0000,,크기나 색깔 밑줄 등을 바꿀수도 있고요
Dialogue: 0,0:04:49.87,0:04:57.00,Default,,0000,0000,0000,,하지만 그러진 마세요!\N애정을 갖고 링크해주세요