HTML 이미지 : img 태그 src url 지정하는 방법

 

HTML 문서에서 이미지를 표시하기 위해 사용하는 img 태그에는 src라는 속성이 있고, 이 속성은 속성값으로 표시할 이미지 소스 파일의 위치 정보, 즉 url을 입력받습니다. 이번 포스팅에서는 이 src 속성에 url을 지정하는 몇 가지 방법에 대해서 소개하도록 하겠습니다. 

 

img 태그의 src 속성에는 다음과 같은 유형의 url들을 지정할 수 있습니다.

 

1. 상대경로 

2. 절대경로

3. 웹서버 주소

 

각각에 대해 알아보겠습니다. 

 

 

상대경로 

 

상대경로는 이미지를 표시할 HTML 문서의 위치를 기준으로 이미지 소스 파일의 위치를 인식하는 방식입니다. 상대경로를 지정하기 위해서는 다음의 기호들을 적절히 사용해주어야 합니다. 

 

/  : ~에 있는

.  : 이미지를 표시할 HTML 문서의 위치

.. : 상위 폴더

 

예를 들어봐야겠죠? 다음과 같은 구조를 지닌 폴더가 있다고 가정해보겠습니다.

 

HTML 문서가 있는 위치, code라는 폴더 안에는 images 라는 폴더가 함께 있습니다. 이런 경우 images를 code의 '하위 폴더'라고 표현하는데, 이 images 폴더 안에 이미지(study.png)가 들어 있습니다. 이때 src의 속성값 url은 다음과 같이 작성해줄 수 있습니다.  

<img src="images/study.png" />
또는
<img src="./images/study.png" />

 

./images : 이미지를 표시할 HTML 문서의 위치에 있는 images 폴더

/study.png : ~에 있는 study.png 

 

여기에서 이미지를 표시할 HTML 문서의 위치를 의미하는 ./ 기호는 생략 가능한 기호입니다. 따라서 위 코드에서 1번과 3번 라인 모두 같은 의미를 지닌 코드입니다. 

하나 더 예를 들어보겠습니다. 이번에는 상위 폴더에 이미지가 있는 경우입니다.

 

code 폴더는 index.html 이 위치한 폴더입니다. 그리고 그 옆에 이미지가 있습니다. code_study.png는 index.html 보다 상위 폴더에 위치한 상태인 것입니다. 이때는 코드를 다음과 같이 작성해줍니다. 

<img src="../code_study.png" />

상위 폴더(한칸 위 폴더)에 있는 code_study.png 를 src로 지정한 것입니다.

 

 

절대경로 

 

이번에는 절대경로입니다. 절대경로는 간단합니다. 표시하고 싶은 이미지의 위치 값을 그대로 가져오기만 하면 됩니다. 이미지가 저장되어 있는 폴더를 열고 '주소를 텍스트로 복사'하는 방법이 가장 간단한 방법입니다. 몇 가지 간단한 예만 소개하겠습니다. 

<!-- OS X에서 절대 경로 지정한 경우 -->
<img src="/Users/beansdrawer/code/images/study.png" />
 
<!-- 윈도우즈에서 절대 경로 지정한 경우 -->
<img src="C:home\images\study.png" />

 

 

웹서버 주소

 

웹서버 주소 지정은 이미지가 저장되어 있는 서버의 주소를 그대로 src에 입력하는 방식입니다. 인터넷을 구경하다가 내 HTML 문서에 표시하고 싶은 이미지를 발견한 상황을 가정해봅니다. 

 

발견한 이미지를 마우스 오른쪽 버튼으로 클릭하면, '이미지 주소 복사'라는 메뉴가 보입니다. 이를 클릭합니다. 

 

그리고 img 태그의 src 속성에 복사한 주소를 붙여넣기 합니다. 

<img src="https://image.beansdrawer.com/short-hair/mackerel/n00-08.jpg" />

그러면 내가 인터넷(웹서버)에서 보았던 이미지가 내 HTML 문서를 통해서도 표시가 됨을 확인하실 수 있습니다. 

단, 이때 주의하셔야 할 점이 있습니다. 이미지가 저작권 보호를 받는 이미지인지 꼭 확인하고 내가 사용해도 문제가 없는지를 모두 파악한 후에 웹서버 이미지를 사용하시기 바랍니다.