HTML에서 height와 width 속성을 사용하는 방법

HTML의 height와 width 속성은 요소의 높이와 너비를 지정하는 데 사용됩니다. 두 속성의 값은 모두 픽셀(px) 단위로 설정합니다.

height와 width 속성을 지원하는 HTML 요소

height와 width 속성은 다음과 같은 HTML 요소에서 사용할 수 있습니다.

번호	요소	height 속성	width 속성
1	<canvas> 요소	height	width
2	<embed> 요소	height	width
3	<iframe> 요소	height	width
4	<img> 요소	height	width
5	<input> 요소	height	width
6	<object> 요소	height	width
7	<video> 요소	height	width

<img> 태그에서 height와 width 속성 활용하기

HTML 페이지에 이미지를 추가하려면 <img> 태그를 사용합니다. 이때 height와 width 속성을 함께 사용하면 이미지의 높이와 너비를 픽셀 단위로 지정할 수 있습니다.

이미지 크기를 명시적으로 지정해 두면 페이지가 로딩되는 동안 레이아웃이 밀리는 현상(레이아웃 시프트)을 방지할 수 있어 웹 페이지의 안정성과 사용자 경험에도 도움이 됩니다.

예제

아래 코드를 실행하면 HTML에서 height와 width 속성을 사용하는 방법을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML height와 width 속성</title>
   </head>
   <body>
      <img src="https://www.tutorialspoint.com/green/images/logo.png" alt="Simply Easy Learning" width="200" height="70">
   </body>
</html>

위 예제에서는 <img> 태그에 width="200", height="70"을 지정하여 로고 이미지가 가로 200픽셀, 세로 70픽셀 크기로 표시되도록 했습니다. 같은 방식으로 <video>, <iframe>, <canvas> 등 다른 요소에도 동일하게 적용할 수 있습니다.