목차
height 예제 - <canvas> 경우 height 정의 height 구문 height 예제 - <embed> 경우 height 예제 - <iframe> 경우 height 예제 - <img> 경우 height 예제 - <input type="image"> 경우 height 예제 - <object> 경우 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>
결과보기
