본문으로 건너뛰기

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

조회수 221 게시일 2024.07.10 1일 전 수정

절대경로와 상대경로의 차이를 HTML 예제로 설명하고 링크, 이미지 경로 지정 시 실수하기 쉬운 포인트를 정리했습니다. 절대경로, 상대경로, HTML 예제코드, 이미지 파일 경로 예시, 문서 표시와 관련된 경로 예제 등을 다룹니다.

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

절대경로

서버 내 최상위 디렉터리인 루트 (/, 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 문서 작성 시에 흔히 사용되는 절대경로와 상대경로의 예시를 제공하고 있습니다.

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

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