html img 이미지 가져오기 절대경로와 상대경로

html img태그의 src속성 이미지 경로 가져오기에 대한 많은 고민이 있습니다.

다음은 img 태그의 src 속성의 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다.

 

 

html 상대경로와 절대경로

 

<img>

img 태그는 src와 alt 두 가지 필수 속성이 있습니다.

그중 src속성에 경로를 지정하여 이미지를 가져올 때

<img src="이미지 경로" alt="이미지" />

위와 같이 html 코드를 작성 합니다. img 태그는 종료태그가 없기 때문에

<img src="" alt="" ></img>이 아닌 <img src="" alt="" />

태그 안에서 마지막 종료 >에 ./로 닫아 줍니다.

 

그럼 절대경로와 상대경로의 차이와 사용하는 방법을 소개합니다.

 

 

절대경로

파일의 탐색을 위한 접근 경로를 파일 시스템의 루트로부터 시작해 명시해 주는 것을 절대 경로라고 합니다.

인터넷 파일(서버호스트에 업로드된 이미지)의 경우 파일 경로를 전체 url을 사용하여 지정해 줍니다.

 

예)

위치	경로
로컬 pc에 저장된 이미지	C:\Users\사용자이름\Pictures\MyImg.jpg
서버 호스트에 저장된 이미지	http://www.나의도메인.com/images/MyImg.jpg
	/images/MyImg.jpg

 

http://www.나의도메인.com/images/ 도메인을 넣는 경우는 나의 파일이 저장한 이미지 호스트와 Html 작업을 하는 호스트 서버가 다를 경우에 사용됩니다.

/images/MyImg.jpg의 경우는 동일한 호스트 안에 이미지 파일과 html문서가 존재할 때 사용됩니다.
"/"은 서버의 루트 폴더로부터 경로 시작을 의미합니다.

<img src="http://www.나의도메인.com/images/MyImg.jpg" alt="이미지" />

<img src="/images/MyImg.jpg" alt="이미지" />

 

 

 

상대경로

html 문서의 현재 위치부터 시작하여 파일로 이동하는 경로입니다.

 

예)

위치	경로
html 문서와 이미지 파일이 현재 동일한 폴더에 있을때	MyImg.jpg 또는 ./MyImg.jpg
파일이 현재 폴더의 images폴더에 있을때	images/MyImg.jpg 또는 ./images/MyImg.jpg
파일이 현재 폴더의 한단계 위의 폴더에 있을때	../MyImg.jpg
파일이 현재 폴더 한단계 위의 폴더 images폴더에 있을때	../images/MyImg.jpg

 

./ 작성하는 경우와 작성하지 않는 경우 모두 현재 폴더를 의미합니다.

html 문서의 현재 위치에서 ../은 한 단계 위의 폴더로 이동을 의미합니다.
만약 두 단계 위로 폴더를 이동할 경우 ../../ 두 번 반복 사용하면 됩니다.

<img src="MyImg.jpg" alt="이미지" />

<img src="images/MyImg.jpg" alt="이미지" />

<img src="../MyImg.jpg" alt="이미지" />

<img src="../images/MyImg.jpg" alt="이미지" />

 

 

 

이제 원하는 위치의 파일을 불러오기 위해 웹사이트 또는 로컬의 현재 문서 위치와 이미지 파일의 위치를 파악한 후

절대 경로를 사용할지 또는 상대 경로를 사용하지 결정한 후 위의 예를 참고하여 사용하시면 됩니다.

 

W3C(웹표준)안에 모범사례를 보면 가능한 경우 상대 파일 경로를 사용하는 것이 가장 좋습니다.
상대 파일 경로를 사용하면 웹 페이지가 현재 기본 URL에 바인딩되지 않기 때문에 향후 도메인을 변경 또는 웹 호스트를 이동할 경우에도 작동을 합니다.

위 권고안의 내용을 간단히 설명하면 "http://www.마이도메인.com/images/MyImg.jpg" 라는 경로를 사용할 경우 도메인을 변경했을 때 html문서의 이미지 파일 경로를 찾지 못하는 현상이 생기기 때문입니다.

하지만 "/images/MyIMg.jpg"로 루트 폴더로부터 시작되는 절대 경로를 사용하면 해결되므로 반드시 상대 경로만을 사용하실 필요는 없습니다.

 

 

 

관련된 글 링크

 

• HTML 기초 tag 많이 사용되는 태그 정리
• HTML이란 무엇인가요?