-
여러분들은 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 웹페이지로 연결됩니다
-
이제, 여러분의 모든 웹페이지를 연결할 수 있어요
-
크기나 색깔 밑줄 등을 바꿀수도 있고요
-
하지만 그러진 마세요!
애정을 갖고 링크해주세요