1
00:00:00,000 --> 00:00:02,843
여러분들은 HTML 태그에 대해 배워봤어요
2
00:00:03,000 --> 00:00:04,800
하지만 HTML이 실제로 무엇을 의미하는지 아시나요?
3
00:00:04,850 --> 00:00:09,091
콘텐츠를 마크업하기 위해 태그를 사용합니다
4
00:00:11,470 --> 00:00:14,177
HTML과 같은 마크업언어를 사용할 때 태그를 이용합니다
5
00:00:14,181 --> 00:00:16,860
그러면 hypertext는 무엇일까요?
6
00:00:16,869 --> 00:00:20,494
그것은 인터넷이 발명되기 이전부터 존재하던 문구입니다
7
00:00:20,494 --> 00:00:23,823
1960년 대에 그것은 텍스트가 다른 텍스트와 연결되어서
8
00:00:23,823 --> 00:00:26,263
독자가 즉시 그리로 갈 수 있게 한 것을 의미했습니다
9
00:00:26,273 --> 00:00:29,720
Tim Berners-Lee씨가 HTML을 발명하고
10
00:00:29,720 --> 00:00:32,756
HTTP같은 다른 것도 발명해서
11
00:00:32,787 --> 00:00:34,912
전세계 텍스트들이 서로 연결될 수 있게 했습니다
12
00:00:34,912 --> 00:00:36,722
전세계 어디에서도 가능하죠
13
00:00:36,751 --> 00:00:39,191
어떻게 HyperText 마크업 언어를 이용해
14
00:00:39,191 --> 00:00:41,280
한 웹페이지를 다른 웹페이지로 연결시킬 수 있을까요?
15
00:00:41,282 --> 00:00:43,451
우리가 흔히 Link라고 부르는
16
00:00:43,451 --> 00:00:46,280
hyperlink(하이퍼링크)를 이용할거에요
17
00:00:46,280 --> 00:00:48,599
어떻게 HTML에서 Link를 만들 수 있을까요?
18
00:00:48,636 --> 00:00:50,304
이것이 이번 시간에 여러분들이 배워볼 내용들입니다
19
00:00:50,304 --> 00:00:52,770
여러분은 'Link' 태그를 사용해왔다고 생각할지도 몰라요
20
00:00:52,770 --> 00:00:57,633
그러나 실제론, HTML의 링크와는 다른 것입니다
21
00:00:57,633 --> 00:01:03,106
대신에, 우리는 닻(anchor)을 의미하는 'a' 태그를 사용할 거에요
22
00:01:03,172 --> 00:01:06,453
특정 위치의 페이지에 있는 링크를 잡아다가
23
00:01:06,453 --> 00:01:09,420
다른 웹페이지에 연결시킵니다
24
00:01:09,443 --> 00:01:11,989
Link를 만들기 위해서 태그를 써야 합니다
25
00:01:11,989 --> 00:01:14,621
그러나 우리는 항상 링크의 텍스트를 결정해야 합니다
26
00:01:14,621 --> 00:01:17,219
그리고 링크가 연결될 주소 역시 결정해야 하죠
27
00:01:17,233 --> 00:01:24,068
웹페이지의 탄생에 관한 더 많은 정보가 들어 있는
페이지에 이 링크를 걸어 봅시다
28
00:01:24,068 --> 00:01:29,506
링크의 텍스트는 start와 end 태그 안에 써줄거에요
29
00:01:29,599 --> 00:01:31,900
여기에 마우스 커서를 놓고 쓸게요
30
00:01:31,900 --> 00:01:36,610
"Read more about the history of HTML"
31
00:01:36,610 --> 00:01:41,017
이제 문자가 링크처럼 된 것을 볼 수 있을 거에요
32
00:01:41,061 --> 00:01:44,317
하지만 아직 어느 곳으로 연결되어 이동하지는 않아요
주소를 추가해야겠네요
33
00:01:44,347 --> 00:01:47,480
실제 페이지에 주소가 나타나게 하진 않을 거에요
34
00:01:47,480 --> 00:01:49,937
하지만 브라우저는 주소가 무엇인지 알도록 해야합니다
35
00:01:49,990 --> 00:01:53,040
그래서 a 태그에 있는 속성 안에 그것을 써넣습니다
36
00:01:53,088 --> 00:01:56,942
그것이 href 속성 입니다
37
00:01:56,985 --> 00:01:59,749
"href"는 그럼 무엇일까요?
38
00:01:59,769 --> 00:02:03,264
힌트를 줄게요
여러분은 "h"를 많이 봤어요
39
00:02:03,283 --> 00:02:06,124
바로 "hyper" 를 나타냅니다
hyper-reference
40
00:02:06,124 --> 00:02:11,966
이제 주소를 넣어 붙입니다
그것을 URL이라고 부릅니다
41
00:02:12,036 --> 00:02:15,940
URL 주소가 "http:"로 시작한다는 것은 아시죠?
42
00:02:16,051 --> 00:02:19,044
그럼 "http의 h"는 무엇일까요?
역시 Hyper입니다
43
00:02:19,084 --> 00:02:21,483
HTML은 모든 것이 hyper와 관계되어 있어요
44
00:02:21,553 --> 00:02:25,664
이 URL은 브라우저가 웹페이지를 찾기 위해
알고싶어하는 모든 내용을 담고 있어요
45
00:02:25,724 --> 00:02:27,965
그것을 찾는데 사용되는 프로토콜
46
00:02:28,035 --> 00:02:30,357
그것이 있는 도메인
47
00:02:30,457 --> 00:02:34,265
그리고 서버에 위치한 Path도 명시하고 있습니다
48
00:02:34,294 --> 00:02:38,579
모든것을 명시하고 있기 때문에,
우리는 이것을 "절대적 URL"이라고 부릅니다
49
00:02:38,622 --> 00:02:43,499
다른 웹페이지에서
여러분은 /로 시작하는 path를 가진 URL 주소를 볼 수도 있어요
50
00:02:43,562 --> 00:02:46,179
그것은 브라우저가 현재 도메인에 있다는 것을 말해요
51
00:02:46,179 --> 00:02:48,634
그리고 그 도메인에서의 다른 path를 찾는거죠
52
00:02:48,645 --> 00:02:50,631
그것이 "relative URL (상대적 URL) "이라고 불립니다
53
00:02:50,682 --> 00:02:54,054
우리는 relative URL을 칸 아카데미에서
다른 컨텐츠 간 연결할 때사용합니다
54
00:02:54,136 --> 00:02:57,623
여러분이 여기서 만드는 웹페이지에서는
절대적 URL들을 사용해야 합니다
55
00:02:57,623 --> 00:02:59,288
그게 더 안전합니다
56
00:02:59,321 --> 00:03:02,146
또한 그 페이지를 어디에 보일지도 정할 수 있어요
57
00:03:02,146 --> 00:03:04,728
현재 창이나 새로운 창을 열수 있죠
58
00:03:04,769 --> 00:03:07,061
링크를 새 윈도우에서 열리게 하려면
59
00:03:07,061 --> 00:03:10,748
또 다른 속성인 target을 추가할 거예요
60
00:03:10,796 --> 00:03:15,258
'target="_blank"
61
00:03:15,288 --> 00:03:19,406
이제, 이야기는 잠시 멈추고
링크를 클릭해보겠습니다
62
00:03:19,444 --> 00:03:23,373
한번 해보세요. 기다릴게요
클릭!
63
00:03:23,393 --> 00:03:24,372
어떻게 되었죠?
64
00:03:24,432 --> 00:03:25,802
여러분은 아마도 링크에 대한 경고문을
65
00:03:25,802 --> 00:03:28,244
사용자가 만든 웹페이지에서 보았을겁니다
66
00:03:28,244 --> 00:03:30,625
그리고 만약 "OK"를 클릭한다면
링크창이 뜨게 됩니다
67
00:03:30,676 --> 00:03:33,122
그것은 여기서 만든 웹페이지에서 링크를
68
00:03:33,122 --> 00:03:34,395
조금 특별하게 다루기 때문입니다
69
00:03:34,423 --> 00:03:37,797
왜냐하면 그 링크들이 이상하고 무서운
70
00:03:37,797 --> 00:03:41,054
웹페이지로 연결될 수 도 있기 때문입니다
71
00:03:41,066 --> 00:03:43,992
그래서, 여러분이 여기서 만들게되는
링크는 모두 경고창이 뜰거에요
72
00:03:43,992 --> 00:03:46,163
그리고 모든 링크는 새로운
창을 띄우게 됩니다
73
00:03:46,300 --> 00:03:50,223
그것은 제가 이 target을
74
00:03:50,223 --> 00:03:53,048
삭제할 수 있음을 의미합니다
75
00:03:53,088 --> 00:03:54,420
혹은 놔둘 수도 있어요
76
00:03:54,420 --> 00:03:57,764
놔둔다고 하면 언젠가 이 HTML을 다른곳으로 옮긴다고 해도
77
00:03:57,764 --> 00:04:00,840
여전히 링크는 새 윈도우에서 열리게 되는거죠
78
00:04:00,870 --> 00:04:02,723
언제 여러분은 target을 사용해야 할까요?
79
00:04:02,783 --> 00:04:06,302
일반적으로, 한 링크가 동일한 도메인의 다른 페이지로 연결된다면
80
00:04:06,302 --> 00:04:08,023
같은 창에서 열리게 됩니다
81
00:04:08,023 --> 00:04:12,179
만약 다른 도메인의 페이지로 연결된다면,
82
00:04:12,239 --> 00:04:13,641
새로운 창을 열게 될겁니다
83
00:04:13,641 --> 00:04:16,649
여러분에게 링크에 대해 다른 기능을 알려드릴게요
84
00:04:16,689 --> 00:04:18,653
우리는 문자 외에도 링크를 걸 수 있어요
85
00:04:18,653 --> 00:04:21,627
사진에도 링크를 걸 수 있습니다
86
00:04:21,656 --> 00:04:26,815
여기에, Tim Berners-Lee 사진이 있어요
87
00:04:26,867 --> 00:04:30,454
그리고
88
00:04:30,464 --> 00:04:34,067
여기 링크 안에 잘라 붙여넣겠습니다
89
00:04:34,094 --> 00:04:36,068
좋네요
90
00:04:36,068 --> 00:04:38,958
이제 마우스 커서를 사진쪽으로 옮기면
91
00:04:38,958 --> 00:04:41,309
커서가 포인터로 바뀌는걸 보실 수 있어요
92
00:04:41,309 --> 00:04:44,379
그리고 클릭하면 CERN 웹페이지로 연결됩니다
93
00:04:44,379 --> 00:04:46,948
이제, 여러분의 모든 웹페이지를 연결할 수 있어요
94
00:04:46,948 --> 00:04:49,867
크기나 색깔 밑줄 등을 바꿀수도 있고요
95
00:04:49,867 --> 00:04:57,000
하지만 그러진 마세요!
애정을 갖고 링크해주세요