1. 윈도우 위치 및 크기 조절 : moveBy(), moveTo(), resizeBy(), resizeTo()
- moveBy() : 웹 페이지를 현재 크기에서 픽셀 만큼 이동
- moveTo() : 웹 페이지를 현재 크기에서 정해진 위치로 이동
- resizeBy() : 웹 페이지를 현재 크기에서 픽셀 만큼 변경
- resizeeTo() : 웹 페이지를 현재 크기에서 정해진 크기 만큼 변경
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</body>
</html>
2. 웹 페이지 스크롤 : scrollBy(), scrollTo()
- scrollBy() : 웹 페이지를 현재 위치에서 픽셀 크기 만큼 스크롤
- scrollTo() : 정해진 위치로 스크롤
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 페이지의 자동 스크롤</title>
<script>
function startScroll(interval) {
setInterval("autoScroll()", interval);
}
function autoScroll() {
window.scrollBy(0, 10); //스크롤은 아래로, 웹페이지는 위로 10픽셀 이동
}
</script>
</head>
<body onload="startScroll(1000)">
<h3>자동 스크롤 페이지</h3>
<hr>
<h3>꿈길(이동순)</h3>
꿈길에<br>
발자취가 있다면<br>
님의 집 창밖<br>
그 돌계단 길이 이미 오래 전에<br>
모래가 되고 말았을 거예요<br><br>
하지만<br>
그 꿈길에서 자취 없다 하니<br>
나는 그것이 정말 서러워요<br><br>
이 밤도<br>
나는 님의 집 창밖<br>
그 돌계단 위에 홀로 서서<br>
혹시라도 님의 목소리가 들려올까<br>
고개 숙이고 엿들어요<br>
</body>
</html>
3. 웹 페이지 프린트 : print()
- onbeforeprint : 프린트 전 호출
- onafterprint : 프린트 후 호출
<예시>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지 프린트</title></head>
<body>
<h3>웹 페이지 프린트</h3>
<hr>
<p>window 객체의 print() 메소드를 호출하면
window 객체에 담겨 있는 웹 페이지가 프린트 됩니다.
<p>
<a href="javascript:window.print()">이곳을 누르면 프린트 됩니다.</a><p>
<input type="button" value="프린트" onclick="window.print()">
</body>
</html>
'JavaScript > 5. 윈도우와 브라우저 관련 객체' 카테고리의 다른 글
| Day 49 : Exercise (0) | 2021.12.24 |
|---|---|
| Day 48 : location/navigator/screen/history 객체 (0) | 2021.12.23 |
| Day 48 : window의 타이머 활용 (0) | 2021.12.23 |
| Day 48 : window 객체 (0) | 2021.12.23 |
| Day 48 : 브라우저 관련 객체 개요 (0) | 2021.12.23 |