본문으로 건너뛰기

절대경로, 상대경로와 HTML 예제

조회수 193 게시일 2024.07.10 1개월 전 수정

절대경로는 파일 시스템의 루트 디렉토리부터 파일까지의 전체 경로를 지정합니다. 현재 문서의 위치와 무관합니다.
반면에 상대경로는 현재 문서의 디렉토리를 기준으로 파일까지의 경로를 지정합니다. 이는 문서의 현재 위치에 따라 달라집니다.

절대경로

서버 내 최상위 디렉터리인 루트 (/, ROOT) 디렉터리부터 표기하는 경로.
예컨대 '/var/log/mail/' 혹은 윈도우즈에서 'C:\Users\Username\Documents'.

상대경로

현재 위치한 디렉터리를 기준으로 표기하는 경로. 현재 경로 표기는 '.', 상위 디렉터리는 '..'로 표기.
만약 '/var/log/mail/' 디렉토리와 '/var/home/' 디렉토리가 있다면 현재 '/mail/' 위치에서 '/home/'의 상대적 위치는 '../../home/'가 됩니다. 또한 '/log/' 위치에서 '/mail/'의 상대적 위치는 './mail/' 입니다.

HTML 예제코드

HTML에서 파일 경로를 지정하는 예시입니다.

<!-- 이미지의 절대경로 -->
<img src="https://www.example.com/images/image.jpg" alt="Example Image">

<!-- 다른 페이지로 이동하는 상대경로 -->
<a href="../about.html">About</a>

이미지 파일 경로 예시

이미지 파일의 경로 설정 예시입니다.

<!-- 상대경로 -->
<img src="../images/picture.jpg" alt="Picture">

<!-- 절대경로 -->
<img src="https://www.example.com/images/profile.jpg" alt="Profile Picture">

문서 표시와 관련된 경로 예제

문서 간의 링크된 경로를 예시로 보여줍니다.

<!-- 현재 폴더 내의 다른 HTML 문서 -->
<a href="another-page.html">Link to Another Page</a>

<!-- 부모 폴더의 문서 -->
<a href="../parent-page.html">Link to Parent Page</a>

위 예시는 HTML 문서 작성 시에 흔히 사용되는 절대경로와 상대경로의 예시를 제공하고 있습니다.

제작·운영 상담이
필요하시면

이 글과 맞는 범위·일정을 함께 정리해 드립니다.