이전 편에서는 하이퍼링크에 대해 간단히 알아보았는데, 링크를 거는 기본적인 방법과, 새 창 또는 지정한 이름을 가진 창에서 링크를 여는 방법에 대해 소개했었습니다. 여태 링크를 외부 사이트로만 지정했었는데, 이번엔 조금 다른 종류의 링크를 걸어볼까 합니다.
먼저, 바탕화면 같이 접근하기 쉬운 곳에 아무 이름을 가진 폴더를 만드십시오. 저는 HTML 폴더를 만들겠습니다. 그리고 이 폴더에 두 개의 HTML 문서를 만들 것입니다. 어떤 이름을 지어도 좋지만, 저는 A.HTML 와 B.HTML 로 만들겠습니다. 이쯤에서 눈치채셨습니까? 같은 폴더에 있는 다른 문서로 링크를 걸어볼 것입니다. 다음 예제를 따라하십시오.
우선 링크를 거는 문서(A.HTML)입니다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>링크를 거는 문서</title></head><body> <p>이 문서는 링크를 거는 문서입니다. <br><a href="B.HTML">이곳</a>에 링크를 걸겠습니다.</p></body></html> |
[예제 8-1]
그 다음, 링크가 걸리는 문서(B.HTML)입니다.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>링크가 걸린 문서</title></head><body> <p>이 문서는 링크가 걸린 문서입니다.</p></body></html> |
[예제 8-2]
클릭해서 실행 결과 보기
위 예제와 같이, http:// 로 시작하지 않고 바로 파일 이름을 입력하면, 같은 폴더에서 링크 목적지를 찾게됩니다. 약간의 용어 설명을 덧붙이자면, http:// 로 시작하는 경로를 '절대경로'라고 합니다. (혹은 윈도우 운영체제에서 C:\Windows\System32 와 같은 경로도 절대경로라고 부릅니다.) 주소가 처음부터 시작해서 잘 적혀있다면 기본적으로 그렇게 일컫습니다. 반면 방금 예제처럼 현재 파일이 위치한 곳을 기준으로 기술하는 방식을 '상대경로'라고 부릅니다.
주소값이 상대경로임을 좀더 정확하게 밝히기 위해 ./ 로 시작하기도 합니다. ./는 현재 파일이 위치한 곳에서 시작한다는 의미가 있어서, 위 예제 8-1의 BODY 부분을 다음과 같이 고쳐도 같은 결과를 가져옵니다.
7 8 9 10 | <body> <p>이 문서는 링크를 거는 문서입니다. <br><a href="./B.HTML">이곳</a>에 링크를 걸겠습니다.</p></body> |
[예제 8-3]
이제 상황을 조금 바꿔보겠습니다. 아까 만든 폴더에 (저 같은 경우는 HTML 폴더에) 다른 폴더를 추가하십시오. 저는 이 폴더를 SUB이라고 짓겠습니다. 이제 여기에 링크가 걸린 문서(여기서는 B.HTML)를 옮기십시오. 즉, 다음과 같은 상황입니다.
이제 그러면 A 태그를 어떻게 수정해야 할까요? 링크를 거는 쪽에서 SUB 폴더로 들어가야합니다. 그러면 링크를 거는 문서(A.HTML)를 다음과 같이 고칩니다.
7 8 9 10 | <body> <p>이 문서는 링크를 거는 문서입니다. <br><a href="./SUB/B.HTML">이곳</a>에 링크를 걸겠습니다.</p></body> |
[예제 8-4]
아니면, href 속성값을 ./를 생략하고 SUB/B.HTML 이라고 적어도 됩니다. 이렇게 링크를 거는 위치에서 시작해서 목적지까지 온전히 적으면 됩니다.
이 상대경로 사용법은 정말 중요합니다. 경로를 복잡하게 일일이 전부 적을 필요가 없기 때문입니다. 만약 두 문서들이 담긴 폴더의 이름이 바뀐다거나, 위치가 바뀐다고 해보십시오. 가령 HTML 폴더가 EXAM 으로 이름을 바꾼다면, 절대경로를 사용했을 땐 href 값을 일일이 HTML에서 EXAM으로 수정해야합니다. 위 예제의 상대경로에는 이러한 HTML 폴더를 거치지 않았기 때문에, 위와 같은 상황에서 코드를 수정할 필요가 없습니다.
마지막으로 살펴볼 상황은 방금 상황에서 두 문서의 위치가 맞바뀐 상황입니다. 즉, 링크를 거는 쪽이 SUB 폴더에, 걸리는 쪽이 HTML 폴더에 있는 경우입니다.
A.HTML의 링크는 SUB 폴더에서 나가서 HTML 폴더로 향해야 합니다. 이런 경우에는 ../ 경로를 사용합니다. 보통 '상위 폴더로 간다', 아니면 간단히 '위로 간다'라고 표현합니다. 이제 A 태그는 다음과 같이 수정되어야합니다.
7 8 9 10 | <body> <p>이 문서는 링크를 거는 문서입니다. <br><a href="./../B.HTML">이곳</a>에 링크를 걸겠습니다.</p></body> |
[예제 8-5]
만약 두번 위로 가야한다면 연속으로 사용하면 됩니다. (../../) 이로써 이제 하이퍼링크를 자유자재로 걸 수 있게 되었습니다. 하지만 하이퍼링크는 문서에만 걸 수 있는 것이 아닙니다. 사실상 모든 파일이 가능합니다. 예를 들어, 웹에서 링크를 클릭해 PDF 파일을 다운 받거나 할때면, PDF 파일로 하이퍼링크를 사용한 것입니다.
다음 편에서는 (위의 경로 개념이 그대로 적용된) 이미지 태그에 대해 알아보겠습니다.
'컴퓨터 관련 > HTML' 카테고리의 다른 글
| HTML 기초 강좌 07: 하이퍼링크와 이미지 (상) (0) | 2017.01.14 |
|---|---|
| HTML 기초 강좌 09: 하이퍼링크와 이미지 (하) (0) | 2017.01.14 |
| 스크랩한 글 쫓아와 새로 고쳐 올리기 (0) | 2016.12.28 |
| 소스 보기 - 복사할 부분 (0) | 2016.12.28 |
| [스크랩] HTML 소스 (0) | 2016.02.14 |