[attribute] HTML - width 속성 - 너비 지정 (= width속성 = 위드스속성) ※ 가로길이 설정

1. width 예제 - <img> 경우
2. width 정의
3. width 구문
4. width 예제 - <canvas> 경우
5. width 예제 - <embed> 경우
6. width 예제 - <iframe> 경우
7. width 예제 - <input type="image"> 경우
8. width 예제 - <object> 경우
9. width 예제 - <video> 경우

width 예제 - <img> 경우

 

<img src="https://i.imgur.com/PQNhCln.gif" alt="양파맨 (협박)" height="56" width="56">

 

결과보기

width 정의

 

요소 너비를 픽셀(px) 단위로 지정.

 

---

 

1. width 속성 사용 가능한 태그

• <canvas>, <embed>, <iframe>, <img>, <input type="image">, <object>, <video>
• <canvas> 너버/높이 재설정될 때마다 캔버스 내용이 지워짐.
• <input> 요소 경우엔, <input type="image">만 사용 가능.
• HTML 코드 간결화 위해 되도록이면 CSS width 속성 이용.

 

2.

주요 최신 브라우저 모두 지원.

 

width 구문

 

• <canvas width="pixels">
• <embed width="pixels">
• <iframe width="pixels">
• <img width="pixels">
• <input type="image" width="pixels">
• <object width="pixels">
• <video width="pixels">

 

---

[속성값]

 

pixels

픽센 단위의 숫자 (예: width="100" 또는, width="100px")

• <canvas>, <iframe> 태그 경우 기본값: 300

 

width 예제 - <canvas> 경우

 

<canvas id="hz" width="200" height="200" style="border:1px solid">

당신 브라우저는 HTML5 canvas 태그 지원 X

</canvas>

<script>

var hz = document.getElementById("hz");

var hzct = hz.getContext("2d");

hzct.fillStyle = "red";

hzct.fillRect(50, 50, 100, 100);

</script>

결과보기

---

PS. canvas 요소 width/height 속성값 변경 시 캔버스 내용 사라짐.

 

<canvas id="hz" width="200" height="200" style="border:1px solid">

당신 브라우저는 canvas 태그 지원 X

</canvas>

<br>

<script>

var c = document.getElementById("hz");

var ctx = c.getContext("2d");

ctx.fillStyle = "tomato";

ctx.fillRect(50, 50, 100, 100);

function changeWidth() {

  c.with = 300;

}

</script>

<button onclick="changeWidth()">요소 너비 변경</button>

결과보기

 

width 예제 - <embed> 경우

 

<embed type="image/jpg" src="https://source.unsplash.com/random" width="200" height="200">

 

결과보기

width 예제 - <iframe> 경우

 

<iframe src="https://homzzang.com" width="200" height="200">

<p>당신 브라우저는 iframe 지원 X</p>

</iframe>

 

width 예제 - <input type="image"> 경우

 

<form action="/action_page.php">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br>

  <label for="nick">별명:</label>

  <input type="text" id="nick" name="nick"><br><br>

  <input type="image" src="https://i.imgur.com/PQNhCln.gif" alt="Submit" width="56" height="56">

</form>

 

PS.

<input type="image"> 경우, 이미지 버튼을 활성화시킨 클릭의 x,y 좌표를 전송함.

width 예제 - <object> 경우

※ data 사이즈가 지정 width/height보다 큰 경우, 스크롤바 생김.

 

<object data="https://source.unsplash.com/random" width="300" height="200"></object>

 

결과보기

width 예제 - <video> 경우

 

<video width="300" height="600" controls>

  <source src="https://thumbs.gfycat.com/FoolhardyMiserlyAsiantrumpetfish-mobile.mp4" type="video/mp4">

  당신 브라우저는 video 태그 지원 X

</video>

결과보기