[HTML] 웹페이지에 사진이나 그림을 넣어주는 img 태그 기본 사용방법 총정리
웹페이지를 만들면서 가장 많이 사용하는 태그 중 하나인 img 태그에 대해 알아봅시다.
img
img 태그가 하는 일은 웹페이지에 그림이나 사진을 넣어주는 것입니다. 태그 자체가 이미지를 만들어 표시하는게 아니라 jpg, png, gif 파일 등 이미지 파일을 웹페이지에 표시 해주는 것이 이 img 태그의 기능입니다.
img 태그 기본 사용법
img 태그의 기본적인 사용 방법은 아래와 같습니다.
<img src="(이미지 파일의 주소)">
웹페이지 상에서 이미지 파일을 보여주려면 해당 이미지 파일이 어딘가는 존재해야 할 것이고, 고유주소가 있을 것입니다. 그 주소를 가져와 img 태그의 src 속성에 넣어주는 것입니다. 가장 기본적인 사용법입니다.
표시된 이미지의 크기 조정
img 태그를 통해 표시된 이미지의 크기 조절 방법은 두가지가 있습니다. img 태그 자체의 width 와 height 속성에 값을 넣어 주는 방법과, style 속성에서 CSS 를 통해 조정하는 방법입니다.
width 와 height 속성 사용하기
img 태그 자체의 width 와 height 속성을 이용해 표시되는 이미지의 크기를 조정할 수 있습니다.
<img src="(이미지 파일의 주소)" width="128" height="128">
위와 같이 표시되는 이미지의 가로크기(width) 와 세로크기(height) 를 지정할 수 있습니다. 단위는 픽셀입니다.
이 방법은 간편하지만 한가지 문제가 있습니다. 바로 단위로 픽셀만 사용할 수 있으며, % 등의 단위는 사용할 수 없다는 것입니다.
그래서 보통은 아래의 CSS 를 활용해 크기를 조정하는 편을 더 선호 합니다.
style 속성에서 CSS 사용하기
<img src="(이미지 파일의 주소)" style="width: 100%; height: auto;">
style 속성을 이용한 크기 조정 방법입니다. 사용법은 비슷하죠?
style 속성에서 CSS 를 이용해 크기를 조정하면 픽셀이 아닌 다른 단위를 사용할 수 있어 더욱 활용도가 높습니다.
끝.
댓글 남기기