HTML 파일 경로 완벽 정리: 상대 경로와 절대 경로의 차이와 사용법

웹사이트에서 파일 경로(File Path)란 해당 웹사이트 내에 있는 특정 파일의 위치를 의미합니다. HTML에서 이미지, 동영상, 스크립트 등 외부 리소스를 불러올 때 반드시 파일 경로를 지정해야 하며, 이 경로는 크게 상대 경로(Relative Path)와 절대 경로(Absolute Path) 두 가지 방식으로 표현할 수 있습니다.

파일 경로의 종류

1) 상대 경로 (Relative Path)

상대 경로는 현재 작업 중인 문서의 위치를 기준으로 파일의 위치를 나타내는 방식입니다. 사이트를 로컬에서 개발하거나 도메인 변경 없이 폴더 구조를 유지할 때 유용합니다.

src="ImgFolder/picture.jpg"

현재 폴더의 상위 폴더로 이동해야 하는 경우에는 ../를 사용합니다.

src="../ImgFolder/picture.jpg"

웹사이트의 루트(root) 디렉터리를 기준으로 경로를 지정하려면 맨 앞에 슬래시(/)를 붙입니다.

src="/ImgFolder/picture.jpg"

2) 절대 경로 (Absolute Path)

절대 경로는 파일이 위치한 전체 URL 주소를 그대로 사용하는 방식입니다. 외부 서버에 호스팅된 리소스를 불러올 때 주로 활용됩니다.

src="https://www.tutorialspoint.com/html5/foo.mp4"

실전 예제: HTML DOM Video src 속성

아래 예제는 HTML DOM의 video 요소 src 속성을 활용하여, 버튼 클릭 시 동영상의 전체 URL을 화면에 출력하는 코드입니다. 사용자 인증 여부에 따라 다른 결과를 보여주도록 구현되어 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video src</title>
<style>
    * {
        padding: 2px;
        margin: 5px;
    }
    form {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-src</legend>
<video id="wordPressIntro" width="320" controls src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Get URL">
<input type="text" id="textSelect" placeholder="Full Name...">
<div id="divDisplay">
</div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    var wordPressIntro = document.getElementById("wordPressIntro");
    function getTrackDetails() {
        if(textSelect.value === 'admin')
            divDisplay.textContent = 'Video URL: ' + wordPressIntro.src;
        else
            divDisplay.textContent = 'Cannot Provide URL, Unauthorized User';
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

1) 'Get URL' 버튼을 클릭하기 전 — 동영상 플레이어와 입력창이 표시됩니다.

HTML 파일 경로 완벽 정리: 상대 경로와 절대 경로의 차이와 사용법

2) 'Get URL' 버튼을 클릭한 후 — 입력창에 'admin'을 입력한 경우 동영상의 전체 URL이 출력되며, 그렇지 않은 경우 '권한 없는 사용자'라는 메시지가 표시됩니다.

HTML 파일 경로 완벽 정리: 상대 경로와 절대 경로의 차이와 사용법

정리

파일 경로는 웹 개발의 기본 중 기본입니다. 상대 경로는 프로젝트 내부 리소스 관리에 적합하고, 절대 경로는 외부 리소스 참조에 적합합니다. 두 방식의 차이를 정확히 이해하고 상황에 맞게 사용하면 유지보수가 쉽고 안정적인 웹페이지를 만들 수 있습니다.