• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 디바이스 사이즈 감지 미적용

우선 단순히 화면크기를 생각하지않고, 현재 스크롤 높이에 따라 플로팅 버튼의 위치를 조정하는 방법에 대해서 생각해 볼까요?

📝 실습 코드

🌿 디바이스 사이즈 감지 적용

디바이스 사이즈 계산하는 법

디바이스 사이즈를 감지하는 방법에는 여러가지가 있습니다.

window.innerWidth 를 사용하면 현재 창의 너비를 구할수 있고,

window.innerHeight를 사용하여 현재 창의 높이를 구할수 있죠!

window.outerHeight 를 사용하면 브라우저 창의 전체 크기를 알 수 있습니다.

여기에는 브라우저의 UI요소(메뉴, 주소 표시줄, 도구 모음 등)도 포함됩니다.

getBoundingClientRect() 메서드는 특정 요소의 크기와 위치를 반환합니다.

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();

// 해당 요소의 너비, 높이, 위치 등을 확인할 수 있답니다. 
// 너비와 높이는 뷰포트의 왼쪽 상단을 기준으로 합니다.
console.log(`Element Width: ${rect.width}, Element Height: ${rect.height}`);
console.log(`Element Position: (${rect.top}, ${rect.left})`);

화면 사이즈를 감지하는 방법은 여러가지가 있으며, 상황에 따라 적합한 방법을 선택해야 한답니다. 😎

📝 실습 코드