모두의매뉴얼

이것저것 블로그

[HTML] 웹페이지에 사진이나 그림을 넣어주는 img 태그 기본 사용방법 총정리





웹페이지를 만들면서 가장 많이 사용하는 태그 중 하나인 img 태그에 대해 알아봅시다.

img

img 태그가 하는 일은 웹페이지에 그림이나 사진을 넣어주는 것입니다. 태그 자체가 이미지를 만들어 표시하는게 아니라 jpg, png, gif 파일 등 이미지 파일을 웹페이지에 표시 해주는 것이 이 img 태그의 기능입니다.

img 태그 기본 사용법

img 태그의 기본적인 사용 방법은 아래와 같습니다.

<img src="(이미지 파일의 주소)">

웹페이지 상에서 이미지 파일을 보여주려면 해당 이미지 파일이 어딘가는 존재해야 할 것이고, 고유주소가 있을 것입니다. 그 주소를 가져와 img 태그의 src 속성에 넣어주는 것입니다. 가장 기본적인 사용법입니다.

표시된 이미지의 크기 조정

img 태그를 통해 표시된 이미지의 크기 조절 방법은 두가지가 있습니다. img 태그 자체의 widthheight 속성에 값을 넣어 주는 방법과, style 속성에서 CSS 를 통해 조정하는 방법입니다.

width 와 height 속성 사용하기

img 태그 자체의 widthheight 속성을 이용해 표시되는 이미지의 크기를 조정할 수 있습니다.

<img src="(이미지 파일의 주소)" width="128" height="128">

위와 같이 표시되는 이미지의 가로크기(width) 와 세로크기(height) 를 지정할 수 있습니다. 단위는 픽셀입니다.

이 방법은 간편하지만 한가지 문제가 있습니다. 바로 단위로 픽셀만 사용할 수 있으며, % 등의 단위는 사용할 수 없다는 것입니다.

그래서 보통은 아래의 CSS 를 활용해 크기를 조정하는 편을 더 선호 합니다.

style 속성에서 CSS 사용하기

<img src="(이미지 파일의 주소)" style="width: 100%; height: auto;">

style 속성을 이용한 크기 조정 방법입니다. 사용법은 비슷하죠?

style 속성에서 CSS 를 이용해 크기를 조정하면 픽셀이 아닌 다른 단위를 사용할 수 있어 더욱 활용도가 높습니다.

끝.

참고자료