📁 절대경로와 상대경로, 언제 어떻게 써야 할까?
웹 개발을 하다 보면 경로(Path)라는 개념을 자주 마주치게 됩니다. 그중에서도 절대경로와 상대경로는 꼭 이해하고 넘어가야 할 기본 개념입니다. 이 둘은 사용 방법도 다르고, 쓰임새도 명확히 구분됩니다.
이번 글에서는 절대경로와 상대경로의 차이, 그리고 언제 어떤 경로를 써야 할지 쉽게 정리해보겠습니다.
✅ 절대경로란?
**루트 디렉터리(최상위)**부터 시작해 리소스의 위치를 전체 경로로 지정하는 방식입니다.
절대경로는 어디서 호출하든 항상 같은 위치를 가리킵니다.
📌 예시
💻 웹 기준
bash
복사편집
/assets/css/style.css https://example.com/images/logo.png💻 로컬 파일 시스템 기준 (Mac/Linux)
bash
복사편집
/Users/username/Documents/project/index.html👍 장점
- 경로가 고정되어 있어 항상 예측 가능
- 오류 발생 가능성이 적음
👎 단점
- 경로가 길고 복잡해질 수 있음
- 디렉터리 이동 시 깨질 수 있어 재사용이 어려움
✅ 상대경로란?
현재 위치를 기준으로 리소스의 경로를 지정하는 방식입니다.
웹 개발 시 내부 파일들 간에 자주 사용하는 방식입니다.
📌 예시
📁 현재 폴더 내 파일
bash
복사편집
./style.css📁 상위 폴더의 파일
bash
복사편집
../images/logo.png📁 하위 폴더의 파일
bash
복사편집
./scripts/main.js👍 장점
- 경로가 짧고 코드가 간결
- 구조 변경에 유연해 유지보수에 유리
👎 단점
- 기준 위치를 혼동할 수 있음
- 복잡한 구조에선 가독성 저하
🧭 언제 어떤 경로를 써야 할까?
사용 상황추천 경로
| HTML 내부 리소스 (CSS, JS 등) 연결 | 상대경로 |
| 외부 리소스 (CDN, 외부 이미지 등) | 절대경로 |
| 서버 간 통신(API 등) | 절대경로 |
| 같은 프로젝트 내 파일 참조 | 상대경로 |
🖼️ 설명용 이미지: 절대경로 vs 상대경로
다음 그림은 웹 프로젝트 내에서 절대경로와 상대경로가 어떻게 다른 위치를 참조하는지 시각적으로 보여줍니다.
css
프로젝트 루트 (/)
│
├── index.html
├── assets/
│ ├── css/
│ │ └── style.css
│ └── images/
│ └── logo.png
└── scripts/
└── main.js예를 들어, index.html 파일에서 다른 파일을 참조한다고 가정해볼게요.
✅ 절대경로 사용 예
html
<link rel="stylesheet" href="/assets/css/style.css" /> <img src="/assets/images/logo.png" /> <script src="/scripts/main.js"></script>항상 루트(/) 기준으로 참조합니다. 파일 위치가 바뀌어도 경로는 동일합니다.
✅ 상대경로 사용 예
html
<link rel="stylesheet" href="./assets/css/style.css" />
<img src="./assets/images/logo.png" />
<script src="./scripts/main.js"></script>현재 파일 위치 기준으로 상대적으로 경로를 설정합니다.
🧪 실습용 프로젝트 구조 예시
다음은 간단한 정적 웹 프로젝트 구조입니다. 연습하면서 절대/상대경로를 번갈아 사용해볼 수 있어요.
css
my-project/
│
├── index.html
├── about.html
├── assets/
│ ├── css/
│ │ └── style.css
│ └── images/
│ └── profile.jpg
└── scripts/
└── main.js🔗 실습 포인트
- index.html에서 style.css, main.js, profile.jpg를 각각 절대경로와 상대경로로 불러와보기
- about.html에서 동일한 리소스를 불러올 때, 상대경로가 어떻게 달라지는지 비교해보기
💡 상대경로 예시 (about.html 기준)
html
<link rel="stylesheet" href="./assets/css/style.css" />
<img src="./assets/images/profile.jpg" />
<script src="./scripts/main.js"></script>💡 개발자를 위한 팁 요약
- /로 시작하는 경로는 웹에서 절대경로
- ./는 현재 폴더, ../는 상위 폴더
- 작은 프로젝트 → 상대경로 / 큰 프로젝트 → 절대경로가 유지보수에 유리
✍️ 마무리
절대경로와 상대경로는 단순히 문법 문제가 아니라,
프로젝트 유지보수와 확장성에 직접적으로 영향을 주는 중요한 개념입니다.
- 구조 변경에 유연하게 대응하고 싶다면? → 상대경로
- 명확하고 고정된 위치가 필요하다면? → 절대경로
실습을 통해 경로 개념을 잘 익혀두면, 실무에서도 파일 연결 오류를 줄이고 더 깔끔한 구조를 만들 수 있습니다.
나중에 복잡한 프로젝트에서 큰 도움이 될 거예요. 😎