상대 경로와 절대 경로의 차이점_CSS/HTML

절대 경로 :

우리가 평소 컴퓨터를 사용할 때 필요한 파일을 찾으려면 파일의 위치를 ​​알아야 하는데, 파일의 위치를 ​​표현하는 방법이 바로 경로이다. 경로는 다음과 같습니다: c:/website/img /photo.jpg photo.jpg 파일은 c 드라이브 웹 사이트 디렉터리의 img 하위 디렉터리에 있습니다. 파일의 위치를 ​​완전히 설명하는 이와 유사한 경로가 절대 경로입니다. 절대 경로를 기반으로 파일의 위치를 ​​결정하기 위해 다른 정보를 알 필요는 없습니다. 홈페이지에서는 http://www.e3i5.net/img/photo.jpg 와 유사한 파일위치를 알아내는 방법도 절대경로입니다.

웹사이트 애플리케이션에서는 일반적으로 "/"를 사용하여 루트 디렉터리를 나타냅니다. /img/photo.jpg는 photo.jpg 파일이 웹사이트 루트 디렉터리의 img 디렉터리에 있음을 의미합니다. 하지만 이 사용은 초보자에게는 위험합니다. 여기서 언급하는 루트 디렉터리는 귀하의 웹 사이트의 루트 디렉터리가 아니라 귀하의 웹 사이트가 위치한 서버의 루트 디렉터리라는 것을 알아야 하기 때문에, 해당 웹 사이트의 루트 디렉터리가 서버 루트와 다르면 오류가 발생합니다.
상대경로 :

사진이 정상적으로 표시되지 않는 이유를 분석해 보세요. 예를 들어 index.htm 페이지가 있고 이 페이지에 연결된 사진 photo.jpg가 있습니다. 절대 경로는 다음과 같습니다:
　c:/website/index.htm
　c:/website/img/photo.jpg

절대 경로 c:/website/img/를 사용하는 경우 photo.jpg를 사용하면 photo.jpg 파일이 실제로 지정된 위치(c:/website/img/photo.jpg)에서 찾을 수 있으므로 컴퓨터에서는 모든 것이 문제가 되지 않습니다. 그러나 웹사이트에 페이지를 업로드하면 귀하의 웹 사이트가 서버의 c 드라이브에 있을 수도 있고, d 드라이브에 있을 수도 있고, aa 디렉토리에 있을 수도 있고, 간단히 말해서 bb 디렉토리에 있을 가능성이 더 높기 때문에 뭔가 잘못될 가능성이 매우 높습니다. , c:/website/img/photo.jpg 경로를 가질 이유가 없습니다. 그렇다면 index.htm 파일에서 photo.jpg 파일을 찾으려면 어떤 경로를 사용해야 할까요? 예, 상대 경로를 사용해야 합니다. 이름에서 알 수 있듯이 상대 경로는 대상 위치를 기준으로 합니다. 위의 예에서 index.htm에 연결된 photo.jpg는 img/photo.jpg를 사용하여 파일을 찾을 수 있습니다. 이러한 파일이 어디에 위치하든 상관 관계가 변경되지 않는 한 오류는 발생하지 않습니다.

또한 "../"를 사용하여 상위 디렉터리를 나타내고 "../../"를 사용하여 상위 디렉터리를 나타냅니다. (DOS를 공부한 친구들은 더 이해하기 쉬울 것입니다.)

몇 가지 예를 더 살펴보세요. 모든 예에는 index.htm 파일에 photo.jpg 사진이 연결되어 있습니다.

예:
c:/website/web/index.htm
c:/website/img/photo.jpg
이 예에서 photo.jpg는 index.htm에 연결됩니다. 어떻게 표현해야 할까요?
잘못된 쓰기: img/photo.jpg
이 예제에서 index.htm 파일의 경우 img/photo.jpg로 표시되는 절대 경로는 c:/website /web/img입니다. /photo.jpg는 분명히 요구 사항을 충족하지 않습니다.
올바른 작성 방법: ../img/photo.jpg의 상대 경로를 사용하여 파일을 찾습니다.


예:
c:/website/web/xz/index.htm
c:/website/img/images/photo.jpg
이 예에서는 index.htm에 연결된 photo.jpg를 어떻게 표현해야 할까요?
잘못된 쓰기: ../img/images/photo.jpg
이 예제에서는 index.htm 파일의 경우 ../img/images/photo.jpg가 절대 경로를 나타냅니다. : c:/website/web/img/images/photo.jpg.
올바른 쓰기: ../../img/images/photo.jpg의 상대 경로를 사용하여 파일을 찾을 수 있습니다.


예:
c:/website/web /xz/ index.htm
c:/website/web/img/photo.jpg
이 예에서 index.htm에 연결된 photo.jpg는 어떻게 표현되어야 할까요?
잘못된 쓰기: ../../img/photo.jpg
이 예제에서는 index.htm 파일의 경우 ../../img/photo.jpg 절대 경로가 잘못되었습니다. 표현되는 내용은 c:/website/img/photo.jpg입니다.
올바른 작성방법 : ../img/photo.jpg 상대경로를 이용하면 파일을 찾을 수 있다


요약 : 위의 예를 통해 절대값으로 변환하면 알 수 있다 경로를 상대 경로로 변경하는 경우 두 파일의 절대 경로 중 동일한 부분은 무시될 수 있으며 고려되지 않습니다. 그들이 어떻게 다른지 생각해보십시오.