WEB 경로 표기법은?

오늘은 WEB에서 경로를 어떻게 표기하는가에 대해 알아보고자 합니다.

WEB 경로 표기법

우선 웹에서 경로를 사용하는 목적은 현재 페이지에 다른 페이지(리소스)를 가져와 사용하기 위해서입니다.

이러한, 웹에서 경로를 표기할 수 있는 방법은 총 4가지가 있습니다.

 

1. 상대 경로

<!-- 1. 상대 경로
"./": 현재 웹페이지 디렉토리 -->
<img src="./images/cat.jpg">

<!-- "../": 현재 웹페이지 디렉토리의 상위 디렉토리 -->
<img src =".././images/cat.jpg">

 

가장 많이 사용하는 경로로써 위 코드의 출력 결과는 동일합니다. 단, "../"을 통해 상위 디렉토리에서 다른값도 가져올 수 있다는 특징이 있습니다. 

 

2. 절대 경로

<!-- 2. 절대 경로-->
<!-- 최상위 디렉토리/02/images의 포함된 사진인 경우 -->
<img src="/02/images/cat.jpg">

절대 경로는 "절대" 라는 언어에서도 알 수 있듯이 고정된 경로를 지정할 때 사용합니다. 즉, 웹 페이지가 올라간 가장 최상위 디렉토리부터 우리가 원하는 데이터의 디렉토리 위치까지 모두 표시해줘야 한다는 특징이 있습니다.

 

3. 로컬 경로

<!-- 3. 로컬 경로 -->
<img src="C:\xampp\htdocs\02\images\cat.jpg">

 

웹서버가 아니라 브라우저가 동작 중인 로컬 컴퓨터(내 컴퓨터)에서 경로를 찾는 것을 말합니다. 리눅스처럼 CLI 환경에 익숙하신 분이라면 해당 경로에 대해 익숙하실텐데요. "C:"는 해당 드라이브명, "\"는 포함된 각 디렉토리를 구분해주는 구분자라고 보시면 됩니다. 경로를 읽어오시기 버겁다. 그러시면, 윈도우에서는 해당 위치로 가서 상단의 폴더창을 클릭해주시면 손쉽게 복사가 가능합니다. 이를 응용한다면 여기서 "\" 구분자를 통해 원하는 폴더로도 이동가능하겠죠? ^^

▲ 상단 폴더창을 클릭시

 

4. 외부 경로

<!-- 4. 외부 경로 -->
<a href = "https://www.google.com">구글 홈페이지</a>

마지막은 흔히들 보셨을 외부 경로입니다. 보통 "http://"나 "https://"로 시작하는 경로이구요. 웹서버에 이미 올라가진 사이트들에서 데이터를 가져오는데 사용합니다. 혹은 위에 처럼 링크로도 자주 사용되곤 합니다.

 

---

이렇게 오늘은 경로 표기법에 대해 알아보았구요. 더 궁금하신 내용이나 오정보가 있다면 댓글을 남겨주세요~!

 

그럼 오늘도 즐거운 코딩!