예제 10-5. 윈도우의 위치와 크기 조절
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 20:42 |4. window 객체 활용
* 윈도우 위치 및 크기 조절
윈도우의 위치와 크기는 window의 프로퍼티로 조절할 수 없고, moveBy(), moveTo(), resizeBy(), resizeTo()를 사용해야 한다.
- 윈도우를 위로 5픽셀, 오른쪽으로 10픽셀 이동
window.moveBy(5,10);
- 윈도우를 스크린의 (25,10) 위치로 이동
window.moveTo(25,10);
self.moveTo(25,10);
- 윈도우 크기를 5픽셀 좁게, 10픽셀 길게 변경
window.resizeBy(-5,10);
window.resizeTo(self.outerWidth-5, self.outerHeight+10);
- 윈도우 크기를 200 X 300으로 변경
window.resizeTo(200,300);
예제 10-5. 윈도우의 위치와 크기 조절
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>윈도우의 위치와 크기 조절</title></head> <body> <h3>윈도우의 위치와 크기 조절</h3> <hr> <button onclick="window.moveBy(-10(왼), 0)">left</button> <button onclick="window.moveBy(10(오), 0)">right</button> <button onclick="self.moveBy(0, -10(위))">up</button> <button onclick="moveBy(0, 10(밑))">down</button> <button onclick="resizeBy(10(오), 10(밑))">+</button> <button onclick="resizeBy(-10(왼), -10(위))">-</button> // resize앞에 window는 생략이 가능하다 </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 10-9. location 객체로 웹 사이트 접속 (0) | 2017.11.02 |
|---|---|
| 예제 10-6. 1초마다 10픽셀씩 자동 스크롤. 예제 10-7. 웹 페이지 프린트. 예제 10-8. onbeforeprint와 onafterprint 이벤트 활용 (0) | 2017.11.02 |
| 예제 10-3. setTimeout()으로 웹 페이지 자동 연결. 예제 10-4. setInterval()로 텍스트 회전 (0) | 2017.11.02 |
| 예제 10-1. window.open()으로 윈도우 열기. 예제 10-2. 윈도우 닫기 // 수정해야딤 (0) | 2017.11.02 |
| window 객체, window 객체의 프로퍼티와 메소드 // 수정해야됨 p 438 (0) | 2017.11.02 |