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

4 개월 전 93

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

절대경로

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


한글 맞춤법과 문법 검사기 모음

부산대학교 한국어 맞춤법/문법 검사기를 비롯하여 네이버, 다음, 인크..

홈페이지 이미지 사이즈, 해상도 그리고 비율

웹 이미지를 제작할 때 고려해야 할 중요한 요소는 이미지의 사이즈, ..

로렘 입숨과 한글 로렘 입숨, 웹 디자인 추천 도구

로렘 입숨, Lorem Ipsum은 일종의 더미 텍스트(dummy t..

IP 주소 및 도메인 정보 조회, WHOIS 검색.

원하는 도메인을 사용할 수 있는지, 웹사이트를 누가 소유하고 있는지,..

웹사이트 디자인을 완성하는 웹폰트와 무료 폰트

홈페이지나 쇼핑몰 제작 시 꼭 필요한 무료 폰트, 웹폰트를 소개합니..

웹디자인 참고 사이트와 홈페이지 제작업체 순위

굿디자인웹, 디비컷, 카페24 디자인센터, 비핸스 Behance, 월..