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

7 일 전 21

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

절대경로

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


홈페이지 제작 기간은 보통 얼마나 걸리나요?

홈페이지, 쇼핑몰 등 웹사이트 제작에 걸리는 기간은 짧게는 며칠에서 ..

홈페이지, 웹사이트 디자인 사이즈

현재 인터넷 이용자의 미디어 해상도를 고려했을 때 적절한 홈페이지 가..

웹 호스팅 선택 기준과 비용, 추천 업체

웹 호스팅은 홈페이지나 쇼핑몰을 운영하기 위해 꼭 필요한 웹 서버를 ..

그누보드, 워드프레스, 제로보드 등 편리한 웹사이트 제…

홈페이지, 쇼핑몰, 커뮤니티 제작 시 비용과 시간을 줄이고 편리하게 ..

디비컷, 추천 웹에이전시와 웹디자인 참고 사이트

웹디자이너 커뮤니티 '디비컷'과 카페24 디자인센터, 아카데미 정글,..

웹 호스팅, 웹 서버 관리 방법

전문적인 호스팅 업체를 이용할 경우 데이터와 DB의 백업이 매일 새벽..