오늘은 브라우저 페이지 이동으로 onload 진행과 화면 크기가 갑자기 변경 되었을 때 발생하는 이벤트를 알아보려고 합니다.
이걸 사용하는 이유는 반응형을 사용할 때
좋은 이벤트로 예를 들어 핸드폰 화면과 태블릿 화면 크기가 다르잖아여 이벤트 발생으로 인해 그 화면의 맞게 크기 조정을 해주는 겁니다.
제일 먼저 함수를 사용하려면 load 할때와 화면 크기가 변경 될 때 발생하는 이벤트를 1 순위로 작성해야겠죠??
<html>
<head>
</head>
<body>
<script>
// 새로고침 및 페이지 이동 시 이벤트 발생.
$(window).on('load',function(){
// 로드시 이 함수로 들어간다.
});
// 화면 크기가 변경 되면 밑에 이벤트 발생.
$(window).on('resize',function(){
// 기존 화면 크기가 변경이 될 경우 이 함수로 들어간다.
});
</script>
</body>
</html>
위에 코드를 보시면 로드시와 화면크기 변경 시 해당 이벤트가 발생해요. 그 안에 원하는 로직을 작성하면 되는데요.
console.log(); 찍어서 확인을 하시면, 새로고침과 페이지 이동시에는 load 이벤트가 발생하고, F12 눌러서 모바일 디바이스로 바꾼 후 모바일 버전을 변경하면 resize 이벤트가 발생합니다.
자! 그러면 이제 화면을 어떻게 바꿀까를 생각해봐야하는데요.
1. 같은 모바일에서 페이지 이동 시 같은 화면 크기로 고정하고 싶을 때!
load, resize 이벤트 둘다 걸어주고 그 안에 resize() 함수를 호출 하면 될 것 같네요.
[resize 함수]
function pageResize(){
// 높이 길이를 구합니다.
let heightInt = parseInt($(this).height());
// 너비 길이를 구합니다.
let widthInt = parseInt($(this).width());
// 화면 크기 비교
if(widthInt <= 768){
console.log("모바일 화면 입니다.");
}
else{
console.log("테블릿 화면입니다.");
}
}위에 같이 코드를 작성하면 함수를 호출 할 때 현재 화면의 크기를 불러와 비교를 하고 조건에 맞게 console.log()가 찍힐 겁니다.
768 보다 작으면 모바일이고, 크면 태블릿이라고 나오겠네요. ㅎㅎ
위에 테스트가 끝나면 좀 더 디테일한 부분을 작성해볼까 해요.
1. 높이 길이가 너비보다 작을 경우 현재 div로 조절한 css 화면 높이를 비교해서 설정.
function pageResize(){
// 높이 길이를 구합니다.
let heightInt = parseInt($(this).height());
// 너비 길이를 구합니다.
let widthInt = parseInt($(this).width());
// 화면 크기 비교
// 높이가 너비보다 작을 경우
if(heightInt < widthInt){
let mainHeight = heightInt - (현재 높이에서 뺄 길이)
if(mainHeight < (현재 페이지 높이 길이)){
// 현재 페이지 높이 수정.
}
}
else{ // 높이가 너비보다 높을 경우
let mainHeight = heightInt - (현재 높이에서 뺄 길이)
if(mainHeight < (현재 페이지 높이 길이)){
// 현재 페이지 높이 수정.
}
}
}
모바일이라 높이가 중요하니까 위같이 로직을 작성했습니다. 너비가 중요하면 너비 길이로 조건을 달면 되겠죠? ㅎㅎ
각 이벤트가 일어나면 해당 함수를 호출하면 반응형 화면 페이지를 기본적으로 만들 수 있을 것 같네요.
그 밖에 옵션들은 css로 추가 하면 될 것 같습니다.
'Programming_Language > JavaScript' 카테고리의 다른 글
| [JavaScript] DOMContentLoaded, onload 차이점. DOM(Document Object Model) 트리란? (2) | 2024.02.05 |
|---|---|
| [tag/CSS] Text 띄어쓰기 JSP에서 적용하기 위해서는 <pre> 사용 (0) | 2024.01.30 |
| [JavaScript] TextArea 작성 및 유효성(특수기호) 검사, 복사 붙이기 (0) | 2024.01.12 |
| [JavaScript] 뒤로가기 문제 해결은 이것! OnpageShow (0) | 2024.01.09 |
| [JQuery] 모달 팝업 동작 시 부모창 스크롤 동작 못하게 하기 (0) | 2024.01.09 |
