HTML 경로 지정 방법: 절대경로와 상대경로의 차이점 정리

홈페이지를 만들 때 가장 많이 검색하는 것 중 하나가 바로 HTML 경로 지정 방법입니다. 특히 이미지나 CSS, JS 파일을 연결할 때 절대경로와 상대경로의 차이를 헷갈려 하는 경우가 많습니다. 이 포스팅에서는 웹 페이지를 처음 제작하는 분들을 위해 절대경로와 상대경로의 개념과 차이점, 사용법을 쉽게 정리해드리겠습니다.

---

절대경로란?

절대경로(Absolute Path)는 파일이나 리소스의 전체 위치를 명시적으로 지정하는 방법입니다.

예시:

<img src="https://paged.kr/theme/paged/img/toplogo.png" alt="로고">

또는 로컬 경로일 경우,

<img src="/images/toplogo.png" alt="로고">

• /로 시작하는 경로는 사이트 루트(최상위 디렉토리)를 기준으로 지정합니다.
• 다른 서버에 있는 리소스를 가져올 때도 절대경로를 사용합니다.

장점

• 경로가 명확하여 다른 위치에서 불러와도 동일한 파일을 참조합니다.

단점

• 유지보수가 어려울 수 있습니다. 폴더 구조가 바뀌면 경로도 일일이 수정해야 합니다.

---

상대경로란?

상대경로(Relative Path)는 현재 HTML 파일을 기준으로 파일의 위치를 지정하는 방법입니다.

예시:

<img src="images/toplogo.png" alt="로고">

또는 상위 폴더를 참조할 때,

<img src="../images/toplogo.png" alt="로고">

• ./ 현재 위치
• ../ 상위 폴더

장점

• 프로젝트 내부에서 경로를 유연하게 설정할 수 있어 유지보수가 용이합니다.
• 동일한 구조를 가진 다른 프로젝트에서도 쉽게 재사용할 수 있습니다.

단점

• HTML 파일의 위치가 바뀌면 경로가 깨질 수 있습니다.

---

언제 절대경로를 쓰고 언제 상대경로를 써야 할까?

상황	추천 경로 방식
외부 리소스(CDN, 외부 이미지)	절대경로
같은 프로젝트 내 리소스(CSS, JS, 이미지 등)	상대경로
루트 기준으로 항상 같은 리소스를 참조하고 싶을 때	절대경로 (/ 시작)

---

예제: 이미지 경로 지정 비교

절대경로

<img src="/assets/img/banner.jpg" alt="배너 이미지">

상대경로

<img src="./assets/img/banner.jpg" alt="배너 이미지">

---

홈페이지 만들기 기초를 다지는 팁

• 처음부터 폴더 구조를 잘 짜는 것이 중요합니다.
• 이미지, CSS, JS 파일을 각각 폴더에 정리해두면 경로 설정이 쉬워집니다.
• 여러 HTML 파일을 만들 때는 상대경로가 특히 유용합니다.
• ../를 너무 많이 사용하면 복잡해지므로 폴더 구조를 단순하게 유지하세요.

---

HTML에서 경로를 올바르게 설정하는 것은 웹사이트 제작의 기초이자 핵심입니다. 특히 홈페이지를 처음 만들어보는 사람들이라면 경로가 틀어져서 이미지가 안 보이거나 CSS가 적용되지 않아 당황하는 경우가 많습니다.

절대경로는 명확성, 상대경로는 유연성이라는 점을 기억하세요. 프로젝트의 규모나 목적에 따라 적절한 경로 방식을 선택하는 것이 좋습니다.

---

추천 검색어

• html 이미지 경로 지정 방법
• 홈페이지 만들기 기초
• 절대경로 상대경로 차이
• html 상대경로 예제
• 웹사이트 파일 구조 설정

 

홈페이지 제작이 어려우시다면 페이지디 홈페이지 제작 서비스에 문의해 주세요!

https://paged.kr

페이지디 반응형 홈페이지 제작 서비스