08. 파일경로 _ 절대경로, 상대경로

이미지를 불러오거나 페이지를 이동할때 필요한 경로에 관한 내용입니다.

img태그에서 http://ododog12.com/img/img/img_tv.png 라는 파일경로를 사용했었는데
이는 흔히 쓰이는 절대경로입니다.
우리가 사이트에 접속할때 사용하는 경로로 익숙한 형태입니다.

이 경로 외에도 좀 더 간편하게 내 서버내에서 사용할 수 있는 경로가 상대경로입니다.
상대경로는 나 자신의 위치를 기준으로 움직입니다.

1. 같은 폴더 안 같은 위치에 있는 파일

file1처럼 나와 같은 선상에 동등하게 들어있는 파일의 경우
거치는 곳 없이 바로 파일명을 써주면 됩니다.
이 경우 경로는 그냥 'file1'입니다. (물론 실제 파일에서는 확장자도 같이 써줘야 해요.)

<img src="file1.확장자"/>
 

2. 같은 위치에 있는 폴더 안에 들어있는 파일

file2처럼 나와 같은 선상에 있는 폴더가 있고 그 안에 들어있는 경우
folder2로 들어가서 file2에 접근해야 합니다.
그러므로 경로는 'folder2/file2'가 되겠네요.

<img src="folder2/file2.확장자"/>
 

3. 나를 담고 있는 폴더와 같은 위치에 있는 파일

file3처럼 내가 들어있는 폴더보다 밖에 있는 경우
folder1을 나가서 file3에 접근해야 합니다.
이처럼 폴더를 나가야 하는 경우 ../를 사용합니다.
두번 나가야 할때는 ../../ 하고 두번 쳐주면 됩니다.
이 경우에 경로는 '../file3'이 되지요.

<img src="../file3.확장자"/>
 

실제 에디터에서 살펴봅시다.

index 파일에서 img의 경로로 01.png를 불러오고 싶을때,
01.png는 index와 같은 위치에 있는 img 폴더 안에 담겨 있으므로 파일경로는 img/01.png 입니다.

반면, sub폴더 안에 있는 sub_page에서 01.png를 불러오고 싶다면 우선 밖으로 한번 나갔다가
다시 img폴더에 들어가 불러와야 하므로 ../img/01.png 가 파일경로가 됩니다.
이와같은 방법으로 img를 불러오거나 클릭시 링크이동을 할 수 있습니다.

* 개인적인 공부를 정리하는 블로그입니다.