0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성

0016 이미지를 보여주는 <img /> 요소 01

1. <img /> 요소 사용법

    

HTML 페이지에 사진이나 그림 등의 이미지를 잘 사용하면 세련된 페이지를 만들 수 있다. 이런 경우 이미지를 집어넣기 위해서 사용하는 요소가 <img /> 요소다.

    

<img /> 요소는 이미지를 정의하는 빈요소로 보통 다음과 같은 형식으로 작성한다.

    

<img src="URL 또는 상대경로" width="픽셀수" height="픽셀수" alt="대체할 문구" />

<img /> 요소에서는 src, width, height, alt의 4가지 속성을 잘 알아두어야 한다. 

2. <img /> 요소의 src 속성

<img /> 요소는 내용(content)이 없이 이미지를 보여주는 것이므로 속성(attribute)을 이용하여 해당 이미지를 불러와야 한다. 이 때 필요한 것이 src 속성이다. 

    

src 속성은 이미지 파일의 위치를 명시한다. 파일의 위치는 상대적인 파일의 위치뿐만 아니라, URL을 넣을 수도 있다. 

    

사용하는 URL에 대해서는 0015 URL 간략하게 이해하고 연습하기 포스팅에서 간단하게 다루었으니 참조하기 바란다. 

    

아래는 src 속성에 속성값을 URL로 넣은 경우다.

    

<img src="http://www.ankilog.com/images/sun.jpg" />

여기서 주의할 점은 URL의 마지막은 파일명이 되고, 웹페이지의 디폴트 파일처럼 디폴트 이미지라는 것이 설정되지는 않기 때문에 파일명까지 정확하게 써야 한다는 점이다. 

    

웹에서 원하는 이미지를 보았을 때, 보통 아래와 같이 마우스 우클릭으로 이미지 주소 복사를 통해 해당 URL을 얻을 수 있다.

src의 속성값으로 URL말고 상대적인 파일 위치를 넣을 수 있다. 즉, 서버 내의 특정 디렉터리에 있는 파일을 불러오는 로컬 링크(link)의 경우 웹페이지 파일이 속한 디렉터리를 기준으로 원하는 이미지 파일의 위치에 도달하는 경로를 명시할 수 있는데 이를 상대경로(relative path)라고 말한다.

     

가령, 불러오고 싶은 sun.jpg 라는 이미지 파일이 웹 페이지 파일과 동일한 디렉터리에 있으면 아래와 같이 속성값에 파일의 이름을 그대로 기입하면 된다.

    

<img src="sun.jpg" />

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리의 하위 디렉터리(가령, images 디렉터리)에 있을 경우 해당 디렉터리의 이름 바로 뒤에 슬래쉬(/)를 붙여 이어서 경로를 작성한다. 이건 운영체제와 상관없이 슬래쉬(/)이다. 그리고 하위 디렉터리가 있는 만큼 얼마든지 슬래쉬로 이어서 하위로 내려갈 수 있다.

     

<img src="images/sun.jpg" />

<img src="images/category/sun.jpg" />

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리 보다 상위에 있다면 마침표 2개(..)로 나타내면 된다. 이는 최상위 디렉터리인 루트까지 이어질 수 있다.

     

<img src="../sun.jpg" />

<img src="../../../../sun.jpg" />

사례를 한 번 살펴보자. 다음은 서버에 있는 웹사이트 관련 파일들의 디렉터리 구조다. 

각각의 웹페이지 파일의 <img /> 요소에서 src 속성의 속성값으로 sun.jpg 파일에 도달하는 상대경로를 기입한 경우다.

   

main 디렉터리의 index.html

<img src="images/sun.jpg" />

웹페이지 파일이 있는 디렉터리의 하위에 있는 images 파일로 이동하여 sun.jpg 파일을 찾음

   

about 디렉터리의 map.html

<img src="../images/sun.jpg" />

웹페이지 파일이 있는 디렉터리에서 상위 디렉터리로 이동한 후 다시 그 상위 디렉터리의 하위에 있는 images 파일로 이동하여 sun.jpg 파일을 찾음

   

etc 디렉터리의 etc.html

<img src="../../images/sun.jpg" />

웹페이지 파일이 있는 디렉터리에서 상위 디렉터리로 두 번 이동한 후 그 마지막 상위 디렉터리의 하위에 있는 images 파일로 이동하여 sun.jpg 파일을 찾음

   

images 디렉터리의 picture.html

<img src="sun.jpg" />

웹페이지 파일과 sun.jpg 파일이 같은 디렉터리에 있으므로 바로 이름으로 기입

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0016 이미지를 보여주는 img 요소 01.apkg