0:00:00.000,0:00:02.843
여러분들은 HTML 태그에 대해 배워봤어요

0:00:03.000,0:00:04.800
하지만 HTML이 실제로 무엇을 의미하는지 아시나요?

0:00:04.850,0:00:09.091
콘텐츠를 마크업하기 위해 태그를 사용합니다

0:00:11.470,0:00:14.177
HTML과 같은 마크업언어를 사용할 때 태그를 이용합니다

0:00:14.181,0:00:16.860
그러면 hypertext는 무엇일까요?

0:00:16.869,0:00:20.494
그것은 인터넷이 발명되기 이전부터 존재하던 문구입니다

0:00:20.494,0:00:23.823
1960년 대에 그것은 텍스트가 다른 텍스트와 연결되어서

0:00:23.823,0:00:26.263
독자가 즉시 그리로 갈 수 있게 한 것을 의미했습니다

0:00:26.273,0:00:29.720
Tim Berners-Lee씨가 HTML을 발명하고

0:00:29.720,0:00:32.756
HTTP같은 다른 것도 발명해서

0:00:32.787,0:00:34.912
전세계 텍스트들이 서로 연결될 수 있게 했습니다

0:00:34.912,0:00:36.722
전세계 어디에서도 가능하죠

0:00:36.751,0:00:39.191
어떻게 HyperText 마크업 언어를 이용해

0:00:39.191,0:00:41.280
한 웹페이지를 다른 웹페이지로 연결시킬 수 있을까요?

0:00:41.282,0:00:43.451
우리가 흔히 Link라고 부르는

0:00:43.451,0:00:46.280
hyperlink(하이퍼링크)를 이용할거에요

0:00:46.280,0:00:48.599
어떻게 HTML에서 Link를 만들 수 있을까요?

0:00:48.636,0:00:50.304
이것이 이번 시간에 여러분들이 배워볼 내용들입니다

0:00:50.304,0:00:52.770
여러분은 'Link' 태그를 사용해왔다고 생각할지도 몰라요

0:00:52.770,0:00:57.633
그러나 실제론, HTML의 링크와는 다른 것입니다

0:00:57.633,0:01:03.106
대신에, 우리는 닻(anchor)을 의미하는 'a' 태그를 사용할 거에요

0:01:03.172,0:01:06.453
특정 위치의 페이지에 있는 링크를 잡아다가

0:01:06.453,0:01:09.420
다른 웹페이지에 연결시킵니다

0:01:09.443,0:01:11.989
Link를 만들기 위해서 태그를 써야 합니다

0:01:11.989,0:01:14.621
그러나 우리는 항상 링크의 텍스트를 결정해야 합니다

0:01:14.621,0:01:17.219
그리고 링크가 연결될 주소 역시 결정해야 하죠

0:01:17.233,0:01:24.068
웹페이지의 탄생에 관한 더 많은 정보가 들어 있는[br]페이지에 이 링크를 걸어 봅시다

0:01:24.068,0:01:29.506
링크의 텍스트는 start와 end 태그 안에 써줄거에요

0:01:29.599,0:01:31.900
여기에 마우스 커서를 놓고 쓸게요

0:01:31.900,0:01:36.610
"Read more about the history of HTML"

0:01:36.610,0:01:41.017
이제 문자가 링크처럼 된 것을 볼 수 있을 거에요

0:01:41.061,0:01:44.317
하지만 아직 어느 곳으로 연결되어 이동하지는 않아요[br]주소를 추가해야겠네요

0:01:44.347,0:01:47.480
실제 페이지에 주소가 나타나게 하진 않을 거에요

0:01:47.480,0:01:49.937
하지만 브라우저는 주소가 무엇인지 알도록 해야합니다

0:01:49.990,0:01:53.040
그래서 a 태그에 있는 속성 안에 그것을 써넣습니다

0:01:53.088,0:01:56.942
그것이 href 속성 입니다

0:01:56.985,0:01:59.749
"href"는 그럼 무엇일까요?

0:01:59.769,0:02:03.264
힌트를 줄게요[br]여러분은 "h"를 많이 봤어요

0:02:03.283,0:02:06.124
바로 "hyper" 를 나타냅니다[br]hyper-reference

0:02:06.124,0:02:11.966
이제 주소를 넣어 붙입니다[br]그것을 URL이라고 부릅니다

0:02:12.036,0:02:15.940
URL 주소가 "http:"로 시작한다는 것은 아시죠?

0:02:16.051,0:02:19.044
그럼 "http의 h"는 무엇일까요?[br]역시 Hyper입니다

0:02:19.084,0:02:21.483
HTML은 모든 것이 hyper와 관계되어 있어요

0:02:21.553,0:02:25.664
이 URL은 브라우저가 웹페이지를 찾기 위해 [br]알고싶어하는 모든 내용을 담고 있어요

0:02:25.724,0:02:27.965
그것을 찾는데 사용되는 프로토콜

0:02:28.035,0:02:30.357
그것이 있는 도메인

0:02:30.457,0:02:34.265
그리고 서버에 위치한 Path도 명시하고 있습니다

0:02:34.294,0:02:38.579
모든것을 명시하고 있기 때문에,[br]우리는 이것을 "절대적 URL"이라고 부릅니다

0:02:38.622,0:02:43.499
다른 웹페이지에서[br]여러분은 /로 시작하는 path를 가진 URL 주소를 볼 수도 있어요

0:02:43.562,0:02:46.179
그것은 브라우저가 현재 도메인에 있다는 것을 말해요

0:02:46.179,0:02:48.634
그리고 그 도메인에서의 다른 path를 찾는거죠

0:02:48.645,0:02:50.631
그것이 "relative URL (상대적 URL) "이라고 불립니다

0:02:50.682,0:02:54.054
우리는 relative URL을 칸 아카데미에서[br]다른 컨텐츠 간 연결할 때사용합니다

0:02:54.136,0:02:57.623
여러분이 여기서 만드는 웹페이지에서는 [br]절대적 URL들을 사용해야 합니다

0:02:57.623,0:02:59.288
그게 더 안전합니다

0:02:59.321,0:03:02.146
또한 그 페이지를 어디에 보일지도 정할 수 있어요

0:03:02.146,0:03:04.728
현재 창이나 새로운 창을 열수 있죠

0:03:04.769,0:03:07.061
링크를 새 윈도우에서 열리게 하려면

0:03:07.061,0:03:10.748
또 다른 속성인 target을 추가할 거예요

0:03:10.796,0:03:15.258
'target="_blank"

0:03:15.288,0:03:19.406
이제, 이야기는 잠시 멈추고[br]링크를 클릭해보겠습니다

0:03:19.444,0:03:23.373
한번 해보세요. 기다릴게요[br]클릭!

0:03:23.393,0:03:24.372
어떻게 되었죠?

0:03:24.432,0:03:25.802
여러분은 아마도 링크에 대한 경고문을

0:03:25.802,0:03:28.244
사용자가 만든 웹페이지에서 보았을겁니다

0:03:28.244,0:03:30.625
그리고 만약 "OK"를 클릭한다면[br]링크창이 뜨게 됩니다

0:03:30.676,0:03:33.122
그것은 여기서 만든 웹페이지에서 링크를

0:03:33.122,0:03:34.395
조금 특별하게 다루기 때문입니다

0:03:34.423,0:03:37.797
왜냐하면 그 링크들이 이상하고 무서운

0:03:37.797,0:03:41.054
웹페이지로 연결될 수 도 있기 때문입니다

0:03:41.066,0:03:43.992
그래서, 여러분이 여기서 만들게되는[br]링크는 모두 경고창이 뜰거에요

0:03:43.992,0:03:46.163
그리고 모든 링크는 새로운[br]창을 띄우게 됩니다

0:03:46.300,0:03:50.223
그것은 제가 이 target을 [br]

0:03:50.223,0:03:53.048
삭제할 수 있음을 의미합니다

0:03:53.088,0:03:54.420
혹은 놔둘 수도 있어요

0:03:54.420,0:03:57.764
놔둔다고 하면 언젠가 이 HTML을 다른곳으로 옮긴다고 해도

0:03:57.764,0:04:00.840
여전히 링크는 새 윈도우에서 열리게 되는거죠

0:04:00.870,0:04:02.723
언제 여러분은 target을 사용해야 할까요?

0:04:02.783,0:04:06.302
일반적으로, 한 링크가 동일한 도메인의 다른 페이지로 연결된다면

0:04:06.302,0:04:08.023
같은 창에서 열리게 됩니다

0:04:08.023,0:04:12.179
만약 다른 도메인의 페이지로 연결된다면,[br]

0:04:12.239,0:04:13.641
새로운 창을 열게 될겁니다

0:04:13.641,0:04:16.649
여러분에게 링크에 대해 다른 기능을 알려드릴게요

0:04:16.689,0:04:18.653
우리는 문자 외에도 링크를 걸 수 있어요

0:04:18.653,0:04:21.627
사진에도 링크를 걸 수 있습니다

0:04:21.656,0:04:26.815
여기에, Tim Berners-Lee 사진이 있어요

0:04:26.867,0:04:30.454
그리고

0:04:30.464,0:04:34.067
여기 링크 안에 잘라 붙여넣겠습니다

0:04:34.094,0:04:36.068
좋네요

0:04:36.068,0:04:38.958
이제 마우스 커서를 사진쪽으로 옮기면

0:04:38.958,0:04:41.309
커서가 포인터로 바뀌는걸 보실 수 있어요

0:04:41.309,0:04:44.379
그리고 클릭하면 CERN 웹페이지로 연결됩니다

0:04:44.379,0:04:46.948
이제, 여러분의 모든 웹페이지를 연결할 수 있어요

0:04:46.948,0:04:49.867
크기나 색깔 밑줄 등을 바꿀수도 있고요

0:04:49.867,0:04:57.000
하지만 그러진 마세요![br]애정을 갖고 링크해주세요