html 문서 연결하기
[HTML 쉽게 따라하기] 문서 연결하기
오늘은 표 속성에서 문서를 연결하는 방법에 대해 알아보겠습니다.
문서를 연결하기 위해서는 경로를 설정해 줘야 하는데요, 경로 설정에는 절대 경로와 상대 경로가 있어요.
그럼 이게 뭔가 한번 자세히 알아볼까요.
1> 절대 경로
절대경로를 이용해서 문서를 연결하는 방법은 해당 파일의 문서 경로를 모두 써줘야 한다는 것을 의미합니다.
이때 각 디렉토리는 ' / '를 이용해서 구분해 주면 되요.
예를 들면 exampe.png 파일을 연결한다고 할때 이 파일이 디렉토리가 a폴더 안에 b폴더 그리고 다시 그 안의 c폴더에 존재한다면 경로는
'웹주소/a/b/c/exampe.png' 가 되는데요, 앞의 웹주소는 파일을 업로드한 웹 공간이 있는 주소를 말합니다.
이렇게 절대 경로는 파일이 존재하는 곳의 상위 폴더부터 하위폴더까지 자세히 적어주는 것을 말해요.
html 형식은 다음과 같아요.
<a href="///절대경로 명시>텍스트</a>
여기까지는 아주 쉽죠?
2> 상대 경로
상대 경로는 절대 경로와는 다르게 사용자가 작업하고 있는 디렉토리를 모두 보여줄 필요가 없이, 현재 파일이 존재하는 위치에서 '/'를 기준으로 구분해 주고 점 하나(.)와 점 두개(..)를 이용해서 나타내 주어요. 뭔소린가 하죠? 저도 처음엔 뭔 소린지 몰랐어요.
즉 상대 경로는 현재의 위치를 나타낼때는 점 하나(.)를 찍어주고, 현재의 위치보다 한 단계 상위 계층을 나타내고자 한다면 점 두개(..)를 찍어서 나타내 줍니다.
예를 들면 현재와 같은 폴더에 있다면 ./ 를 사용하면 되는데요,
./c/exampe.png 은 바로 /a/b/c/exampe.png 을 의미해요.
이경우 ./ 를 생략하고 c/exampe.png 라고 해도 괜찮습니다.
html 형식은 아래와 같아요.
<a href="///상대 경로 명시>텍스트</a>
아직 이해가 안가시나요? 그럼 좀 더 실 예를 들어볼께요.
티스토리에서 포스팅을 하면서 다른 포스팅을 연결한다고 해볼께요. 그 포스팅의 주소가 "웹주소/290"이라고 한다면
앞에거 생략하고 '/290' 만 써줘도 된다는 거에요.
html 문서를 연결하고자 할때 연갈할 위치를 지정해서 사용자가 원하는 위치로 이동할 수 있는데요, 형식은 다음과 같아요.
<a href="연결할 문서의 위치 지정">...</a>
여기서 <href>태그는 홈페이지의 여러 문서를 서로 연결해 줄 때 사용하는 태그에요.
문서를 연결한다는 것은 당연히 연결한 문서들이 존재해야 합니다.
물론 티스토리 포스팅을 하다보면 다른 포스팅을 연결한다든지 하는 것들은 이미 클릭만으로 가능하도록 되어 있지만 지금 공부하는 것은 이러한 기능들이 없이 순수 HTML만으로 할 때를 말한다는것 잊지 않고 계시죠? ^^
자 그럼 문서를 연결하는 HTML을 작성해 보겠습니다.
[예시1]---------------------------------------------------------
<html>
<head>
<title> 계절 </title>
</head>
<body>
<center>
<h3>좋아하는 계절을 선택하세요</h3><br>
<a href="봄.html">봄</a>
<a href="여름.html">여름</a>
<a href="가을.html">가을</a>
<a href="겨울.html">겨울</a>
</body>
</html>
------------------------------------------------------------------
[예시2] < 예시 1의 연결 문서 >-------------------------------
<html>
<head>
<title>봄</title>
</head>
<body>
<center>
<img scr="sping.gif">
봄을 선택하셨네요!!
</body>
</html>
-------------------------------------------------------------------
연결문서가 봄, 여름, 가을, 겨울 이므로 [예시2] 같은 문서가 4개 존재 해야 하겠죠?
예시1을 웹상에 나타내 보면 이런 식으로 나올거에요.
[예시 1 결과]-----------------------------------------------------
좋아하는 계절을 선택하세요
봄 여름 가을 겨울
--------------------------------------------------------------------
여기서 봄을 클릭하면 봄에 연결된 문서인 [예시2]의 문서로 이동하게 됩니다.
그 결과는 아마 아래 같을 것이고요.
[결과]--------------------------------------------------------------
----------------------------------------------------------------------
여기서 노란 네모박스는 [예시2]에서 spring.gif 파일에 해당되는 이미지 입니다.
오늘은 문서를 연결하는 방법에 대해 알아 보았습니다.
요약해 보면 문서를 연결하기 위해서 각각 문서를 만들어 놨어야 하고요,
문서를 연결하기 위해서 각각의 위치를 설정해 줘야 하는데 절대 경로로 설정해 줘도 되고 상대 경로로 설정해 줘도 됩니다.
아무래도 상대 경로가 입력도 쉽고 글자를 잘못써서 연결이 안되는 잘못을 저지르지 않을 확률이 높겠죠. ㅎㅎ
문서를 연결하는 태그는 바로 <href> 이고요.
이 태그가 문서를 연결하는 태그라는 것은 곧 내가 연결하고자 하는 것을 연결하는 태그라는것!
즉 문서 연결에 한정되는 것이 아니라 다른것들을 연결할 때 사용하면 된다는 것입니다.
이해 되셨죠? ^^
다음시간엔 문서 연결중에 좀 더 요긴한 것을 배워볼까 합니다.
문서가 길 경우 오른쪽에 스크롤바가 생기잖아요.
그런데 그걸 움직여서 내가 원하는 내용을 찾는것은 좀 불편한 점이 있어요.
그럴때 목차를 만들어 놓고 클릭하면 해당 내용으로 이동할 수 있게 만들어 놓으면 아주 좋겠죠.
요즘 홈페이지에서 많이 쓰는 방법이죠.
그래서 다음 시간엔 문서 내에서 한 부분으로 연결하는 방법에 대해 알아보도록 할께요.
이 글을 공유합시다
