window 크기를 동적으로 조절할 수 있는데 resizeTo()는 window의 크기를 절대값으로 지정하는 것이고
resizeBy()는 window 크기를 현재의 값에 의해 증/감하여 크기를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>resize window</p>
<button onclick="openWin()">Create</button>
<button onclick="resizeWinTo()">Resize to 800*600px</button>
<button onclick="resizeWinBy()">Resize smaller</button>
<button onclick="closeWin()">close</button>
<script>
let myWindow;
function openWin() {
myWindow = window.open("","","width=200px,height=300px");
}
function resizeWinTo() {
myWindow.resizeTo(800,600);
myWindow.focus();
}
function resizeWinBy() {
myWindow.resizeBy(-100,-50);
myWindow.focus();
}
function closeWin() {
myWindow.close();
}
</script>
</body>
</html>
* create 클릭하면 새창 열림
* Resize 클릭하면 해당 사이즈만큼 커짐
* Resize smaller 클릭하면 지정한 사이즈 만큼 줄어듬
*close 클릭하면 창 닫힘
'웹 프로그래밍 기초 > BOM 브라우저 객체' 카테고리의 다른 글
| location 객체 (0) | 2025.04.10 |
|---|---|
| screen 객체 (0) | 2025.04.10 |
| setTimeout(), setInterval() (0) | 2025.04.10 |
| moveTo(), moveBy() (0) | 2025.04.10 |
| Browser Object Model (1) | 2025.04.10 |