상대 경로, 절대 경로

경로라는 것은 특정 파일의 위치를 말합니다

이때 경로를 2가지로 나눌 수 있습니다

1. 상대경로 : 현재 위치를 기준으로 파일, 리소스의 위치를 나타냄
2. 절대경로 : 현재 위치가 어디에 있든 정확한 위치를 나타냄

예시: 현재 위치가 남산타워 케이블카 승강장에 있을 때

절대경로

절대경로는 웹 사이트의 파일이 인터넷 상의 정확한 위치를 나타냅니다.

• 서울특별시 용산구 남산공원길 105

상대경로

상대경로는 현재 파일의 위치를 기준으로 다른 파일이나 리소스의 위치를 나타냅니다.

• 케이블카를 탑승 후 하차

만약 현재 위치가 부산역일 때

절대경로

• 서울특별시 용산구 남산공원길 105

상대경로

• 기차 탑승
• 서울역 하차
• 서울역버스환승센터(5번승강장)까지 이동
• 402번 버스 탑승
• 보성여중고입구 정류장 하차
• 남산서울타워까지 걷기

이렇게 현재 위치에 따라 경로가 달라지는 것이 상대경로, 현재 위치가 어디에 있든 절대적인 경로를 나타내는 것이 절대 경로입니다.

 

코드로 작성하기

상대경로

./        현재 자신의 위치 주변(생략 가능)
../       현재 자신의 위치보다 상위 경로
파일명/    해당 파일명의 하위 경로


./main.css 는 현재 자신의 위치 주변에 있는 main.css 파일을 지칭함
../main.css는 현재 자신의 위치 상위의 main.css 파일을 지칭함

여기에서 상위라는 것은 무엇일까요?

여러분이 바탕화면에 A라는 파일을 생성했습니다.

• A파일 안에 B1, B2파일을 생성
• B1파일 안에 C파일을 생성했을 때
• B1 파일의 상위 파일은 A파일입니다
• B1 파일의 하위 파일은 C파일입니다
• B1 파일의 주변 파일은 B2파일입니다

예시로 위치를 맞춰보세요 (현재 위치 B1파일의 index.html)

<link rel="stylesheet" href="../main.css">

 

 

정답은 A파일에 있는 main.css파일을 연결하는 코드입니다.

 

<link rel="stylesheet" href="./B2/main.css">

 

정답은 현재 주변에 있는 B2파일의 하위 파일인 main.css 문서와 연결하는 코드입니다. 파일, 문서 명 뒤에 /가 오는 것은 해당 파일의 하위로 경로를 이동한다는 뜻입니다.

절대 경로

• http:// 혹은 https:// (인터넷상의 경로)
• / (현재 자신의 컴퓨터 최상위 경로, root 경로)

예시:

<link rel="stylesheet" href="http://www.example.com/styles/main.css">

이 코드는 인터넷상의 http://www.example.com/styles/ 경로에 있는 main.css 파일을 가져옵니다.

<link rel="stylesheet" href="/styles/main.css">

이 코드는 서버의 최상위 경로(root 경로)에 있는 styles 폴더 내의 main.css 파일을 가져옵니다.

이처럼 상대경로와 절대경로를 이해하고 올바르게 사용하는 것은 웹 개발에서 매우 중요합니다.