< Return to Video

HTML links

  • 0:00 - 0:03
    여러분들은 HTML 태그에 대해 배워봤어요
  • 0:03 - 0:05
    하지만 HTML이 실제로 무엇을 의미하는지 아시나요?
  • 0:05 - 0:09
    콘텐츠를 마크업하기 위해 태그를 사용합니다
  • 0:11 - 0:14
    HTML과 같은 마크업언어를 사용할 때 태그를 이용합니다
  • 0:14 - 0:17
    그러면 hypertext는 무엇일까요?
  • 0:17 - 0:20
    그것은 인터넷이 발명되기 이전부터 존재하던 문구입니다
  • 0:20 - 0:24
    1960년 대에 그것은 텍스트가 다른 텍스트와 연결되어서
  • 0:24 - 0:26
    독자가 즉시 그리로 갈 수 있게 한 것을 의미했습니다
  • 0:26 - 0:30
    Tim Berners-Lee씨가 HTML을 발명하고
  • 0:30 - 0:33
    HTTP같은 다른 것도 발명해서
  • 0:33 - 0:35
    전세계 텍스트들이 서로 연결될 수 있게 했습니다
  • 0:35 - 0:37
    전세계 어디에서도 가능하죠
  • 0:37 - 0:39
    어떻게 HyperText 마크업 언어를 이용해
  • 0:39 - 0:41
    한 웹페이지를 다른 웹페이지로 연결시킬 수 있을까요?
  • 0:41 - 0:43
    우리가 흔히 Link라고 부르는
  • 0:43 - 0:46
    hyperlink(하이퍼링크)를 이용할거에요
  • 0:46 - 0:49
    어떻게 HTML에서 Link를 만들 수 있을까요?
  • 0:49 - 0:50
    이것이 이번 시간에 여러분들이 배워볼 내용들입니다
  • 0:50 - 0:53
    여러분은 'Link' 태그를 사용해왔다고 생각할지도 몰라요
  • 0:53 - 0:58
    그러나 실제론, HTML의 링크와는 다른 것입니다
  • 0:58 - 1:03
    대신에, 우리는 닻(anchor)을 의미하는 'a' 태그를 사용할 거에요
  • 1:03 - 1:06
    특정 위치의 페이지에 있는 링크를 잡아다가
  • 1:06 - 1:09
    다른 웹페이지에 연결시킵니다
  • 1:09 - 1:12
    Link를 만들기 위해서 태그를 써야 합니다
  • 1:12 - 1:15
    그러나 우리는 항상 링크의 텍스트를 결정해야 합니다
  • 1:15 - 1:17
    그리고 링크가 연결될 주소 역시 결정해야 하죠
  • 1:17 - 1:24
    웹페이지의 탄생에 관한 더 많은 정보가 들어 있는
    페이지에 이 링크를 걸어 봅시다
  • 1:24 - 1:30
    링크의 텍스트는 start와 end 태그 안에 써줄거에요
  • 1:30 - 1:32
    여기에 마우스 커서를 놓고 쓸게요
  • 1:32 - 1:37
    "Read more about the history of HTML"
  • 1:37 - 1:41
    이제 문자가 링크처럼 된 것을 볼 수 있을 거에요
  • 1:41 - 1:44
    하지만 아직 어느 곳으로 연결되어 이동하지는 않아요
    주소를 추가해야겠네요
  • 1:44 - 1:47
    실제 페이지에 주소가 나타나게 하진 않을 거에요
  • 1:47 - 1:50
    하지만 브라우저는 주소가 무엇인지 알도록 해야합니다
  • 1:50 - 1:53
    그래서 a 태그에 있는 속성 안에 그것을 써넣습니다
  • 1:53 - 1:57
    그것이 href 속성 입니다
  • 1:57 - 2:00
    "href"는 그럼 무엇일까요?
  • 2:00 - 2:03
    힌트를 줄게요
    여러분은 "h"를 많이 봤어요
  • 2:03 - 2:06
    바로 "hyper" 를 나타냅니다
    hyper-reference
  • 2:06 - 2:12
    이제 주소를 넣어 붙입니다
    그것을 URL이라고 부릅니다
  • 2:12 - 2:16
    URL 주소가 "http:"로 시작한다는 것은 아시죠?
  • 2:16 - 2:19
    그럼 "http의 h"는 무엇일까요?
    역시 Hyper입니다
  • 2:19 - 2:21
    HTML은 모든 것이 hyper와 관계되어 있어요
  • 2:22 - 2:26
    이 URL은 브라우저가 웹페이지를 찾기 위해
    알고싶어하는 모든 내용을 담고 있어요
  • 2:26 - 2:28
    그것을 찾는데 사용되는 프로토콜
  • 2:28 - 2:30
    그것이 있는 도메인
  • 2:30 - 2:34
    그리고 서버에 위치한 Path도 명시하고 있습니다
  • 2:34 - 2:39
    모든것을 명시하고 있기 때문에,
    우리는 이것을 "절대적 URL"이라고 부릅니다
  • 2:39 - 2:43
    다른 웹페이지에서
    여러분은 /로 시작하는 path를 가진 URL 주소를 볼 수도 있어요
  • 2:44 - 2:46
    그것은 브라우저가 현재 도메인에 있다는 것을 말해요
  • 2:46 - 2:49
    그리고 그 도메인에서의 다른 path를 찾는거죠
  • 2:49 - 2:51
    그것이 "relative URL (상대적 URL) "이라고 불립니다
  • 2:51 - 2:54
    우리는 relative URL을 칸 아카데미에서
    다른 컨텐츠 간 연결할 때사용합니다
  • 2:54 - 2:58
    여러분이 여기서 만드는 웹페이지에서는
    절대적 URL들을 사용해야 합니다
  • 2:58 - 2:59
    그게 더 안전합니다
  • 2:59 - 3:02
    또한 그 페이지를 어디에 보일지도 정할 수 있어요
  • 3:02 - 3:05
    현재 창이나 새로운 창을 열수 있죠
  • 3:05 - 3:07
    링크를 새 윈도우에서 열리게 하려면
  • 3:07 - 3:11
    또 다른 속성인 target을 추가할 거예요
  • 3:11 - 3:15
    'target="_blank"
  • 3:15 - 3:19
    이제, 이야기는 잠시 멈추고
    링크를 클릭해보겠습니다
  • 3:19 - 3:23
    한번 해보세요. 기다릴게요
    클릭!
  • 3:23 - 3:24
    어떻게 되었죠?
  • 3:24 - 3:26
    여러분은 아마도 링크에 대한 경고문을
  • 3:26 - 3:28
    사용자가 만든 웹페이지에서 보았을겁니다
  • 3:28 - 3:31
    그리고 만약 "OK"를 클릭한다면
    링크창이 뜨게 됩니다
  • 3:31 - 3:33
    그것은 여기서 만든 웹페이지에서 링크를
  • 3:33 - 3:34
    조금 특별하게 다루기 때문입니다
  • 3:34 - 3:38
    왜냐하면 그 링크들이 이상하고 무서운
  • 3:38 - 3:41
    웹페이지로 연결될 수 도 있기 때문입니다
  • 3:41 - 3:44
    그래서, 여러분이 여기서 만들게되는
    링크는 모두 경고창이 뜰거에요
  • 3:44 - 3:46
    그리고 모든 링크는 새로운
    창을 띄우게 됩니다
  • 3:46 - 3:50
    그것은 제가 이 target을
  • 3:50 - 3:53
    삭제할 수 있음을 의미합니다
  • 3:53 - 3:54
    혹은 놔둘 수도 있어요
  • 3:54 - 3:58
    놔둔다고 하면 언젠가 이 HTML을 다른곳으로 옮긴다고 해도
  • 3:58 - 4:01
    여전히 링크는 새 윈도우에서 열리게 되는거죠
  • 4:01 - 4:03
    언제 여러분은 target을 사용해야 할까요?
  • 4:03 - 4:06
    일반적으로, 한 링크가 동일한 도메인의 다른 페이지로 연결된다면
  • 4:06 - 4:08
    같은 창에서 열리게 됩니다
  • 4:08 - 4:12
    만약 다른 도메인의 페이지로 연결된다면,
  • 4:12 - 4:14
    새로운 창을 열게 될겁니다
  • 4:14 - 4:17
    여러분에게 링크에 대해 다른 기능을 알려드릴게요
  • 4:17 - 4:19
    우리는 문자 외에도 링크를 걸 수 있어요
  • 4:19 - 4:22
    사진에도 링크를 걸 수 있습니다
  • 4:22 - 4:27
    여기에, Tim Berners-Lee 사진이 있어요
  • 4:27 - 4:30
    그리고
  • 4:30 - 4:34
    여기 링크 안에 잘라 붙여넣겠습니다
  • 4:34 - 4:36
    좋네요
  • 4:36 - 4:39
    이제 마우스 커서를 사진쪽으로 옮기면
  • 4:39 - 4:41
    커서가 포인터로 바뀌는걸 보실 수 있어요
  • 4:41 - 4:44
    그리고 클릭하면 CERN 웹페이지로 연결됩니다
  • 4:44 - 4:47
    이제, 여러분의 모든 웹페이지를 연결할 수 있어요
  • 4:47 - 4:50
    크기나 색깔 밑줄 등을 바꿀수도 있고요
  • 4:50 - 4:57
    하지만 그러진 마세요!
    애정을 갖고 링크해주세요
Title:
HTML links
Video Language:
English
Duration:
04:57
Rosa Sung edited Korean subtitles for HTML links
승환 김 edited Korean subtitles for HTML links
승환 김 edited Korean subtitles for HTML links

Korean subtitles

Revisions