절대경로 vs 상대경로

 

절대경로와 상대경로

경로를 지정하는 방법은 절대경로와 상대경로가 있습니다.

 

 

절대경로

·       절대경로는 고유한 경로

·       http://가 포함되어 있는 절대경로

·       PC의 해당 위치 경로

 

 

절대 경로 지정하는 방식

<img src="http://codedragon.tistory.com/images/codedragon.jpg">   <img src="C:\CodeLab\HTML5\images\picture.jpg">

 

 

 

 

상대경로

·       현재 폴더위치에서 경로를 인식하는 방법입니다.

·       이미지가 삽입된 HTML 문서를 기준으로 경로를 인식하게 됩니다.

·       이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지, 하위 폴더에 있는지를 따져서 해당 경로를 지정하는 방법입니다.

 

 

폴더 및 파일경로 도식도

C:. ├─picture.jpg ├─images │      index.html │      picture.jpg │ └─sample         picture.jpg

 

 

HTML 문서와 이미지 파일이 같은 폴더에 있는 경우

이미지 파일명만 적어주면 됩니다.

<img scr="picture.jpg">

 

 

다른 폴더인 하위폴더에 있는 경우

하위폴더명(images)를 적어주고 슬래쉬(/)를 입력

 

<img scr="images/picture.jpg">

현재 폴더의 하위폴더인 images 폴더에 있는 picture.jpg파일의 위치를 의미합니다.

 

 

상위폴더에 있는 경우

상위폴더로 이동하는 방법은 ../ 이와같이 표현합니다.

<img scr="../picture.jpg">

 

 

상위폴더의 다른 폴더에 있는 경우

<img scr="../sample/picture.jpg">