BOM(Browser Object Model) - window 객체
Screen 관련
1. 화면크기 구하기
[window.]screen.width/height : 화면의 너비/높이 디스플레이 해상도를 의미(픽셀)
window.screen.availWidth/avilHeight : 유효 화면 너비/높이(작업표시줄 제외)
window.innerWidth/Height : 창 내부 너비/ 높이
화면의 변경에 따라서 자바스크립트로 처리할 수도 있도록 생각해 보는 것도 필요!
대부분 'window.' 키워드는 생략한다.
+ 네비게이션
브라우저에 따라서 개발자 소스에 따라 앞부분에 처리할 수 있는 것들이 붙기도 한다.
페이지(문서)의 크기
페이지의 너비 : docment.body.clientWidth
페이지의 높이 : docment.body.clientHeight
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화면 크기</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body style="width: 500px; height: 600px;">
<p>화면의 크기 : <span id="scr"></span></p>
<p>유효 영역 : <span id="avl"></span></p>
<p>창 내부 크기 : <span id="bws"></span></p>
<p>페이지 크기 : <span id="pg"></span></p>
</body>
<script>
//span 연결 가져오기
const scr = document.getElementById("scr");
const avl = document.getElementById("avl");
const bws = document.getElementById("bws");
const pg = document.getElementById("pg");
//화면크기, 모니터의 해상도를 말함
let sw = screen.width; // 같음 [window.]screen.width;
let sh = screen.height;
scr.innerHTML = `${sw} X ${sh}`; // 화면의 크기 출력
//유효 화면 크기, 실적으로 쓰는 공간, 실무에서 사용
avl.innerHTML = `${screen.availWidth} X ${screen.availHeight}`; // 유효영역 바로 출력 출력, 작업표시줄 제외하고 출력
//창 내부 크기, 새로고침에 따라서 달라짐, 테두리 1px, 윗부분의 메뉴 부분 제외하고 출력
bws.innerHTML = `${innerWidth} X ${innerHeight}`;
//화면의 변경 크기 이벤트 처리, 창 크기에 따라서 숫자가 달라진다.
window.addEventListener("resize", () => {
let w = window.innerWidth; // window.는 생략 가능하나 헷갈리지 않기 위해서 써주기도 함
let h = window.innerHeight;
bws.innerHTML = `${w} X ${h}`;
});
//페이지 크기
//페이지의 높이 값은 내용에 따라서 결정된다.
//body에 가로 x 세로를 적용하면, 페이지 크기를 고정할 수 있고, 창 크기에 따라서 스크롤이 생긴다.
pg.innerHTML = `${document.body.clientWidth} X ${document.body.clientHeight}`;
</script>
</html>
+ scrollTo(xpos, ypos)
가로 스크롤은 xpos를 0으로, ypos 값을 변경
세로 스크롤은 ypos를 0으로, xpos 값을 변경
객체를 사용하여 스크롤을 제어하는 방법
scrollTo(객체)
작성 형식 scrollTo({top : x, left: y, behavior:"이동 시 효과"})
behavior : auto (기본값) / smooth(부드럽게 이동)
객체의 형식(문법) - JSON
{멤버1 : "값1", 멤버2 : "값2", ..... }
무한 스크롤(스크롤에 따른 요소 자동 생성 및 추가)
onscroll : 스크롤 이벤트 처리 속성
window.scrollX : 스크롤된 위치의 x 좌표값(픽셀단위)
window.scrollY : 스크롤된 위치의 y 좌표값(픽셀단위)
부드러운 화면 이동 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>무한 스크롤</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
text-align: center;
line-height: 70px;
background-color: cornsilk;
}
.section>.article {
height: 500px;
}
.section>.article>p {
padding: 80px 20px;
}
.section>.article:nth-child(odd) {
background-color: rgb(180, 243, 217);
color: rgb(40, 156, 209);
}
.section>.article:nth-child(even) {
background-color: rgb(184, 252, 170);
color: rgb(66, 18, 177);
}
</style>
</head>
<body>
<div class="header">
<h1>무한 스크롤</h1>
</div>
<div class="section">
<div class="article">
<p>1번 영역</p>
</div>
<div class="article">
<p>2번 영역</p>
</div>
</div>
</body>
<script>
let count = 2; //영역번호
const s_area = document.querySelector(".section");
//scroll 이벤트로 무한 스크롤 처리
window.onscroll = () => {
//적정 수치 이상의 새 요소를 만들지 말자
if (count >= 10) {
return;
}
let wih = window.innerHeight; //창의 높이값 저장
let wsy = window.scrollY; //세로로 스크롤된 수치
let bo = document.body.offsetHeight; // body 영역의 높이값 저장
console.log(wih, wsy, bo);
if ((wih + wsy) >= bo) { //화면 바닥으로 스크롤 됨
//새 요소 만들어서 추가
const addElem = document.createElement("div");
//스타일 시트 적용을 위한 클래스 추가
addElem.classList.add("article");
addElem.innerHTML = `<p>${++count}번째 영역</p>`;
s_area.appendChild(addElem);
}
}
</script>
</html>어떻게 만들어야하는지 항상 생각하고 만드는 습관 들이기,
다른 곳에도 적용할 수 있도록 연습하기
오타확인, 함수명확인, 선택자 기호 잘 썼는지 확인하기!
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 20일 (1) JavaScript - 예제, jQuery (0) | 2023.03.20 |
|---|---|
| 3월 17일 (2) JavaScript - locatoin, history (0) | 2023.03.17 |
| 3월 16일 (2) JavaScript - 브라우저 객체 모델 (0) | 2023.03.16 |
| 3월 16일 (1) JavaScript - node 활용 제어 (0) | 2023.03.16 |
| 3월 15일 JavaScript - 객체(Object) (0) | 2023.03.15 |
