HTML width 속성으로 요소의 너비 설정하기

HTML에서는 width 속성을 사용하여 요소의 너비를 지정할 수 있습니다. 이 속성은 픽셀(px) 단위의 값으로 설정하며, 다음과 같은 요소들에 적용할 수 있습니다.

<canvas>
<embed>
<img>
<input>
<video>

width 속성 사용 예제

아래 코드는 <video> 요소에 width 속성을 적용하여 동영상 플레이어의 너비와 높이를 지정한 예제입니다. 코드를 직접 실행해 보세요.

<!DOCTYPE HTML>
<html>
   <body>

      <video width="300" height="200" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         사용 중인 브라우저는 video 요소를 지원하지 않습니다.
      </video>

   </body>
</html>

실행 결과

위 코드를 실행하면 가로 300픽셀, 세로 200픽셀 크기로 조정된 동영상 플레이어가 화면에 표시됩니다.

HTML width 속성으로 요소의 너비 설정하기

참고 사항

HTML5에서는 이미지나 비디오 등 미디어 요소의 크기를 조절할 때 CSS의 width, height 스타일 속성을 함께 활용하는 것이 권장됩니다. 반응형 웹 디자인을 구현할 때는 백분율(%) 단위나 max-width 속성을 사용하면 다양한 화면 크기에 유연하게 대응할 수 있습니다.