[HTML] 절대경로 | 상대경로 차이는?

html은 링크가 매우 많이 활용된다. 그만큼 올바른 경로를 지정해주는 게 중요하다. 이때 경로는 두 가지로 분류된다.

• 절대경로(Absolute File Paths)
• 상대경로(Relative File Paths)

절대경로

절대경로는 어느 곳이든 동일한 위치를 갖는 경로를 말한다. 일반적인 URL을 떠올리면 쉽다. 네이버 메인으로 향하는 경로는 어디서나 https://naver.com이다. 쉽게 말해 http또는 https로 시작하는 URL로 이루어진 경로는 절대경로라고 보면 된다.

<a href="https://www.naver.com">네이버 주소</a>

외부 사이트에 존재하는 이미지 파일을 불러오는 것도 역시 절대경로의 예시다.

<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

상대경로

상대경로는 현재 웹 페이지를 기준으로 이동할 파일의 경로가 어디 있는지를 표시하는 개념이다. 예를 들어

• path
  • path2(현재 위치: file.html)
    • path3

이런 상위 하위 구조를 가진 폴더가 있고 현재 페이지(file.html)가 path2에 있다면 동일 폴더인 path2에 있는 파일로 이동하는 경로와 상위 폴더인 path에 존재하는 파일로 이동하는 경로의 표시는 다르다. . .. / 등의 기호를 사용해서 경로를 지정한다.

 

이는 자연스러운 일이다. 브라우저는 개발자가 구성한 프로젝트 폴더 구조를 모르고 페이지의 URL과 HTML 코드만 알고 있기 때문이다. 때문에 현재 페이지를 기준으로 경로를 정확히 적어줘야 찾아갈 수 있다.

<!--path2 폴더(동일 폴더)에 있는 file2.html 경로-->
<a href="file2.html">같은 경로</a>

<!--path3 폴더(하위 폴더)에 있는 file3.html 경로-->
<a href="path3/file3.html">하위 폴더 경로</a>

<!--path 폴더(상위 폴더)에 있는 file4.html 경로-->
<a href="../file4.html">상위 폴더 경로</a>

다소 헷갈릴만하다. 때문에 경로를 지정할 땐 페이지를 열어보고 URL을 보고 정확히 어떤 경로에 있는지 확인하는 게 좋다.