안녕하세요. 이번 편에서는 하이퍼링크와 이미지에 대해 다룹니다. 줄여서 '링크'라고도 부르는 하이퍼링크는 다른 문서로 쉽게 이동할 수 있도록 해줍니다. HTML의 꽃이라고도 할 수 있는 하이퍼링크는 사실 HTML에서 아주 존재감이 큰 요소입니다. 따라서 왠만한 포털 사이트는 잘 다듬어진 꽃밭이라고도 볼 수 있겠습니다.
[포털 사이트는 말 그대로 하이퍼링크의 바다입니다.]
그런데 하이퍼링크과 이미지에는 한 가지 공통점이 있는데, 바로 '주소'를 이용한다는 점입니다. 하이퍼링크를 걸 때는 클릭해서 넘어갈 웹 페이지의 주소가, 이미지 태그는 게시할 그림 파일의 주소가 필요합니다. 이에 대한 자세한 이야기는 나중에 다루도록 하겠습니다.
먼저 다음 하이퍼링크 예제를 보십시오.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>하이퍼링크 걸기 예제</title></head><body></body></html> |
[예제 7-1]
클릭해서 실행 결과 보기
하이퍼링크는 링크를 걸고 싶은 곳에 A 태그를 사용합니다. 그리고 링크로 넘어갈 주소를 href= 다음에 따옴표 사이에 적습니다. (href는 Hyper-REFerence의 줄임말로 기억하십시오.) 위 예제에는 '여기'라는 문자에 네이버로 링크를 걸었습니다. 그래서 '여기'를 클릭하게 되면 네이버가 나타나게 됩니다.
잠깐 용어설명을 달자면, 여기서 href는 A 태그의 속성이라고 부릅니다. 그리고 그에 해당하는 값을 속성값이라고 부릅니다. 위 예제서는 네이버 주소가 속성값이 됩니다. 이를 통해, (4편에서 봤던) META 태그가 charset 속성을 가질 수 있다고 말할 수 있게 되는 것입니다.
그런데 링크를 클릭했을 때 기존 창에서 열지 않고 새 창에 띄우고 싶을 때가 있습니다. 이럴 때는 어떻게 할까요? A 태그는 target 속성을 가지는데, 말 그대로 링크를 띄울 타겟을 설정합니다. 다음 예제를 보십시오.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>하이퍼링크 target 속성 예제 1</title></head><body></body></html> |
[예제 7-2]
클릭해서 실행 결과 보기
위 예제를 따라해보면 금방 익힐 수 있습니다. target 속성값을 _blank 로 함으로써 항상 새 창에서 열 수 있습니다. 링크를 한 번 열든 백 번 열든, 항상 새로운 창을 만들어 띄웁니다. 반면 _self 값이 주어지면 항상 현재 창에서 열게 됩니다.
만약 위와 같은 값이 아니라면 어떻게 될까요? 그 때는 브라우저 창에 이름을 지어주게 됩니다. 이해를 돕기위해 다음 예제를 보십시오.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>하이퍼링크 target 속성 예제 2</title></head><body></body></html> |
[예제 7-3]
클릭해서 실행 결과 보기
한번 네이버 링크를 클릭했다가, 다음 사이트 링크를 클릭해보세요. 무슨 일이 일어났습니까? 아마 네이버 사이트가 띄워졌던 창에 다음 사이트가 열릴 것입니다. 왜 이런일이 일어날까요? 네이버 링크를 열었을 때 새 창이 열리고, target의 속성값인 foo가 그 창의 이름이 됩니다. 그리고 다음 링크를 클릭하면, foo라는 곳에 링크를 띄우게 했으므로, 네이버가 열렸던 창에 다음이 열리게 되는 것입니다.
따라서 이를 통해 주의해야 할 점을 알 수 있는데, target의 속성값으로 blank를 지정했다면, 그것은 blank라는 이름을 가진 창에 링크를 띄우라는 말이 됩니다. 만약 _blank를 생각했는데 실수로 밑줄(_)을 빼먹고 그렇게 지정한 것이라면 그것은 제대로 작성한 것이 아니게 됩니다. 따라서 이 부분을 조심해야 합니다.
다음 편에서는 이 하이퍼링크에 대해 더 자세히 알아보고, '주소'를 다루도록 하겠습니다.
'컴퓨터 관련 > HTML' 카테고리의 다른 글
| HTML 기초 강좌 08: 하이퍼링크와 이미지 (중) (0) | 2017.01.14 |
|---|---|
| HTML 기초 강좌 09: 하이퍼링크와 이미지 (하) (0) | 2017.01.14 |
| 스크랩한 글 쫓아와 새로 고쳐 올리기 (0) | 2016.12.28 |
| 소스 보기 - 복사할 부분 (0) | 2016.12.28 |
| [스크랩] HTML 소스 (0) | 2016.02.14 |