HTML links

여러분들은 HTML 태그에 대해 배워봤어요

하지만 HTML이 실제로 무엇을 의미하는지 아시나요?

콘텐츠를 마크업하기 위해 태그를 사용합니다

HTML과 같은 마크업언어를 사용할 때 태그를 이용합니다

그러면 hypertext는 무엇일까요?

그것은 인터넷이 발명되기 이전부터 존재하던 문구입니다

1960년 대에 그것은 텍스트가 다른 텍스트와 연결되어서

독자가 즉시 그리로 갈 수 있게 한 것을 의미했습니다

Tim Berners-Lee씨가 HTML을 발명하고

HTTP같은 다른 것도 발명해서

전세계 텍스트들이 서로 연결될 수 있게 했습니다

전세계 어디에서도 가능하죠

어떻게 HyperText 마크업 언어를 이용해

한 웹페이지를 다른 웹페이지로 연결시킬 수 있을까요?

우리가 흔히 Link라고 부르는

hyperlink(하이퍼링크)를 이용할거에요

어떻게 HTML에서 Link를 만들 수 있을까요?

이것이 이번 시간에 여러분들이 배워볼 내용들입니다

여러분은 'Link' 태그를 사용해왔다고 생각할지도 몰라요

그러나 실제론, HTML의 링크와는 다른 것입니다

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

특정 위치의 페이지에 있는 링크를 잡아다가

다른 웹페이지에 연결시킵니다

Link를 만들기 위해서 태그를 써야 합니다

그러나 우리는 항상 링크의 텍스트를 결정해야 합니다

그리고 링크가 연결될 주소 역시 결정해야 하죠

웹페이지의 탄생에 관한 더 많은 정보가 들어 있는
페이지에 이 링크를 걸어 봅시다

링크의 텍스트는 start와 end 태그 안에 써줄거에요

여기에 마우스 커서를 놓고 쓸게요

"Read more about the history of HTML"

이제 문자가 링크처럼 된 것을 볼 수 있을 거에요

하지만 아직 어느 곳으로 연결되어 이동하지는 않아요
주소를 추가해야겠네요

실제 페이지에 주소가 나타나게 하진 않을 거에요

하지만 브라우저는 주소가 무엇인지 알도록 해야합니다

그래서 a 태그에 있는 속성 안에 그것을 써넣습니다

그것이 href 속성 입니다

"href"는 그럼 무엇일까요?

힌트를 줄게요
여러분은 "h"를 많이 봤어요

바로 "hyper" 를 나타냅니다
hyper-reference

이제 주소를 넣어 붙입니다
그것을 URL이라고 부릅니다

URL 주소가 "http:"로 시작한다는 것은 아시죠?

그럼 "http의 h"는 무엇일까요?
역시 Hyper입니다

HTML은 모든 것이 hyper와 관계되어 있어요

이 URL은 브라우저가 웹페이지를 찾기 위해
알고싶어하는 모든 내용을 담고 있어요

그것을 찾는데 사용되는 프로토콜

그것이 있는 도메인

그리고 서버에 위치한 Path도 명시하고 있습니다

모든것을 명시하고 있기 때문에,
우리는 이것을 "절대적 URL"이라고 부릅니다

다른 웹페이지에서
여러분은 /로 시작하는 path를 가진 URL 주소를 볼 수도 있어요

그것은 브라우저가 현재 도메인에 있다는 것을 말해요

그리고 그 도메인에서의 다른 path를 찾는거죠

그것이 "relative URL (상대적 URL) "이라고 불립니다

우리는 relative URL을 칸 아카데미에서
다른 컨텐츠 간 연결할 때사용합니다

여러분이 여기서 만드는 웹페이지에서는
절대적 URL들을 사용해야 합니다

그게 더 안전합니다

또한 그 페이지를 어디에 보일지도 정할 수 있어요

현재 창이나 새로운 창을 열수 있죠

링크를 새 윈도우에서 열리게 하려면

또 다른 속성인 target을 추가할 거예요

'target="_blank"

이제, 이야기는 잠시 멈추고
링크를 클릭해보겠습니다

한번 해보세요. 기다릴게요
클릭!

어떻게 되었죠?

여러분은 아마도 링크에 대한 경고문을

사용자가 만든 웹페이지에서 보았을겁니다

그리고 만약 "OK"를 클릭한다면
링크창이 뜨게 됩니다

그것은 여기서 만든 웹페이지에서 링크를

조금 특별하게 다루기 때문입니다

왜냐하면 그 링크들이 이상하고 무서운

웹페이지로 연결될 수 도 있기 때문입니다

그래서, 여러분이 여기서 만들게되는
링크는 모두 경고창이 뜰거에요

그리고 모든 링크는 새로운
창을 띄우게 됩니다

그것은 제가 이 target을

삭제할 수 있음을 의미합니다

혹은 놔둘 수도 있어요

놔둔다고 하면 언젠가 이 HTML을 다른곳으로 옮긴다고 해도

여전히 링크는 새 윈도우에서 열리게 되는거죠

언제 여러분은 target을 사용해야 할까요?

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

같은 창에서 열리게 됩니다

만약 다른 도메인의 페이지로 연결된다면,

새로운 창을 열게 될겁니다

여러분에게 링크에 대해 다른 기능을 알려드릴게요

우리는 문자 외에도 링크를 걸 수 있어요

사진에도 링크를 걸 수 있습니다

여기에, Tim Berners-Lee 사진이 있어요

그리고

여기 링크 안에 잘라 붙여넣겠습니다

좋네요

이제 마우스 커서를 사진쪽으로 옮기면

커서가 포인터로 바뀌는걸 보실 수 있어요

그리고 클릭하면 CERN 웹페이지로 연결됩니다

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

크기나 색깔 밑줄 등을 바꿀수도 있고요

하지만 그러진 마세요!
애정을 갖고 링크해주세요