[attribute] HTML - height 속성 - 요소 높이 지정 (= height속성 = 하이트속성)

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

height 예제 - <canvas> 경우

 

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

댁 브라우저는 canvas 태그 지원 X

</canvas>

<script>

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

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

ctx.fillStyle = "tomato";

ctx.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 changeHeight() {

  c.height = 300;

}

</script>

<button onclick="changeHeight()">요소 높이 변경</button>

결과보기 

height 정의

 

요소 높이를 px 단위로 지정.

 

---

 

1. height 속성 사용 가능 태그 종류

<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

 

2.

• 요소 너비는 width 속성 사용.
• <canvas> 경우, width/height 속성값 변동 시 canvas 내용 사라짐.
• (<img>,<input type="image">,<video>) 경우, 원활한 페이지 렌더링 위해 width/height 속성 꼭 지정.
• 큰 이미지 크기 축소는 width/height 속성 대신 이미지 실제 크기 축소 권장.
• (<canvas>, <iframe>) 경우, 기본 높이: 150

 

3.

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

height 구문

 

• <canvas height="pixels">
• <embed height="pixels">
• <iframe height="pixels">
• <img height="pixels">
• <input height="pixels">
• <object height="pixels">
• <video height="pixels">

 

---

[속성값]

 

pixels

높이 나타내는 px 단위 숫자 (예: 100)

• <canvas>,<iframe> 경우, 기본값: 150

height 예제 - <embed> 경우

 

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

결과보기

height 예제 - <iframe> 경우

 

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

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

</iframe>

 

height 예제 - <img> 경우

 

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

 

결과보기

height 예제 - <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="확인" width="56" height="56">

</form>

 

PS.

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

height 예제 - <object> 경우

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

 

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

 

결과보기

height 예제 - <video> 경우

 

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

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

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

</video>

결과보기