Hypertext(하이퍼텍스트)와 절대경로 그리고 상대경로

Hypertext(하이퍼텍스트)

하이퍼텍스트는 웹페이지에서 다른 웹페이지로 이동하는 것을 말한다.
또한 같은 페이지 내 영역에서 다른 영역을 이동하는 것도 가능하다.

이동은 a태그를 활용하는 방법이 대표적이다.
또한 javascript나 jQuery를 이용할 수도 있습니다.

하지만 웹표준, 웹접근성, seo를 위해서 a태그를 활용하는 것을 추천하는 편입니다.

<a href="이동할 페이지 주소">바로가기</a>
<a href="#아이디명">바로가기</a>

a태그의 href 속성을 통하여 '바로가기'를 클릭할 경우 해당 페이지로 이동할 수 있다.
href 속성에 다음과 같은 속성값을 주면 해당페이지로 가거나 해당영역으로 이동합니다.

1. naver.com, sub/sub.html과 같은 경로와 파일명이나 인터넷 주소 입력
2. #아이디명을 입력

#아이디명을 사용하면 원페이지 형태의 웹페이지의 네비게이션을 만들 수 있다.

 

파일경로(절대, 상대)

웹페이지 하나로 모든 것을 담아낼 수 없다.

웹페이지 기획에 따라 메인페이지를 작성하고, 보다 자세한 내용은 상세페이지를 통해서 해당 정보를 알릴 수 있다.
이때 메인페이지에서 상세페이지로 이동할 때 a태그를 활용하여, 해당 상세페이지로 이동할 수 있다.
속성값에 사용할 위치정보, 즉 경로가 필요하다.

웹페이지가 텍스트뿐만 아니라 이미지, 비디오, 오디오 등을 활용한다. 이때 해당 파일을 불러와야 한다.
웹페이지에서 보여줄 이미지 등의 파일들은 웹페이지 파일과 같이 서버에 업로드 되어 있어야 하며,
이 때 해당파일의 위치정보, 즉 경로가 필요하다.

경로는 절대경로와 상대경로가 있으며, 특히 상대경로를 사용하기 위해서 경로에 대한 이해가 필요하다.

절대경로

절대경로는 웹페이지가 어느 폴더에 위치해 있던지, 파일을 불러오는데 필요한 경로가 항상 같은 것을 말한다.
절대경로를 사용하면 코드 작성 시 헷갈리는 경우를 줄일 수 있으나 경로가 필요이상으로 작성해야 해서 불편함이 있다.

 

상대경로

상대경로는 웹페이지와 불러오고자 하는 파일 또는 이동하고자 하는 웹페이지의 위치를 연결하는 경로를 말한다.
웹페이지 위치에 따라 경로가 다르게 된다. 장단점은 절대경로와 반대로 생각하시면 편할 것 같습니다.

 

경로 예시

root
ㄴimg
  ㄴimg1.png
  ㄴimg2.png
ㄴcss
  ㄴcss.css
ㄴjs
  ㄴmain.js
ㄴsub
  ㄴsub1.html
  ㄴsub2.html
index.html

위의 그림처럼 root에 index.html파일이 있고 각각의 폴더로 img, css, js, sub가 있다.
또한 각각 폴더에는 성격이 맞는 파일들이 업로드 되어있다.

root는 기본폴더다.
도메인으로 별다른 설정 없이 웹상으로 접속 할 경우 root폴더의 index.html 파일을 찾아 보여준다.

 

절대경로 예시

index.html에서 sub1.html으로 이동하기 a태그를 사용할 경우, href 속성값으로 root의 도메인주소 및 폴더 파일명을 작성해야 한다.
이미지 파일을 불러올 때도 마찬가지로 사용할 수 있다.

<a href="root(도메인주소)/sub/sub1.html">바로가기</a>
<img src="root(도메인주소)/img/img1.png">

만약 sub2.html에서 sub1.html로 가기 위한 a태그를 사용할 때도 위의 같은 속성값을 작성하면 sub1.html으로 이동할 수 있다.
"root(도메인주소)/sub/sub1.html"
또한 img태그의 속성 src의 속성값으로 절대주소를 사용하여도 img폴더내의 img1.png파일을 불러올 수 있다.

 

상대경로 예시

반면 상대경로는 a태그가 있는 웹페이지의 위치를 기준으로 이동하고자 하는 파일의 위치를 작성해야 한다.
따라서 기준 웹페이지가 변경되면 속성값의 경로값도 변경해야 한다.

1. <a href="sub/sub1.html">바로가기</a>
2. <a href="./sub/sub1.html">바로가기</a>

가. <a href="./sub1.html">바로가기</a>
나. <a href="sub1.html">바로가기</a>

a. <img src="img/img1.png"> //index.html에서 img1파일을 찾을 경우
b. <img src="../img/img1.png"> //sub1.html에서 img1파일을 찾을 경우

1번과 2번은 index.html에서 sub1.html을 이동하기 위한 상대주소이다.
index.html과 같은 레벨에 sub폴더가 있으니깐 sub/ 혹은 ./sub/를 작성하여 폴더를 찾고,
하위의 sub1.html 파일을 지정하였기 때문에 해당 페이지로 이동하게 된다.

가와 나는 sub2.html 에서 sub1.html으로 이동하는 상대주소 이다.
같은 폴더에 있는 웹페이지 이동은 폴더명 지정없이 바로 파일명을 작성하거나,
./ 현재폴더를 의미하는 것을 작성하고 파일명을 입력하여 이동할 수 있다.

a, b는 img태그를 사용하여 그림파일을 불러와 표시하도록 하는 것이다.
다만 a는 index.html에서 작성한 예시이고 b는 sub1.html이나 sub2.html에서 작성한 예시다.

특히 b는 sub폴더의 파일에서 img폴더의 이미지파일을 찾아야 한다.
그래서 img1.png를 찾기 위해 상대주소를 활용할 경우, 우선 폴더(img)를 찾아야 한다.
해당 웹페이지에 존재하지 않기 때문에 한단계 올라가야 한다.
이때 사용하는 것이 ../를 사용하고 img폴더를 찾아야 한다. 만약에 한단계 더 올라가야 하는 경우 ../../ 를 작성하면 된다.

/ 폴더를 의미한다.
sub/sub1.html 은 sub폴더에 sub1.html 파일을 의미한다.
다만 / 만 작성하면 최상위폴더로 이동하게 된다.
./ 현재폴더를 의미한다. 즉 같은 레벨에 있는 다른 파일을 찾을 때 사용한다.(생략가능)
../ 상위폴더를 의미한다. 한단계 높은 폴더를 탐색할 수 있다.

작성한 경로에 해당 파일이 없을 경우 위의 사진처럼 404에러가 발생한다.
1. 경로지정이 잘 못 되었을 때
2. 오탈자가 있을 경우
3. 한글을 사용할 경우
(한글의 경우 로컬에서는 작동하나 웹상에서는 표현이 안 될 수 있으니 영문숫자로 해야 한다.)