HTML의 window.screenLeft 속성은 현재 브라우저 창이 화면을 기준으로 수평 방향(왼쪽)으로 얼마나 떨어져 있는지를 나타내는 X 좌표를 픽셀 단위로 반환합니다. 이 속성은 읽기 전용이며, 팝업 창의 위치를 제어하거나 멀티 모니터 환경에서 창의 위치를 파악할 때 유용하게 활용할 수 있습니다.
단, 이 속성은 Firefox 브라우저에서는 지원되지 않습니다. 따라서 크로스 브라우저 호환성이 중요한 프로젝트라면 동일한 값을 반환하는 window.screenX 속성을 함께 사용하는 것이 좋습니다.
문법
사용 문법은 다음과 같습니다.
window.screenLeft
이제 HTML Window screenLeft 속성의 실제 사용 예제를 살펴보겠습니다.
예제
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window screenLeft 속성 데모</h1>
<button onclick="display()" class="btn">screenLeft 값 보기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = '화면을 기준으로 한 창의 수평 좌표는: ' + window.screenLeft + 'px';
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 그라디언트 배경 위에 버튼이 표시됩니다. 여기서 “screenLeft 값 보기” 버튼을 클릭하면 아래와 같이 현재 창의 화면 기준 수평 좌표(X 좌표)가 픽셀 값으로 출력됩니다.
창을 화면의 다른 위치로 이동한 후 다시 버튼을 클릭해 보면, 값이 실시간으로 달라지는 것을 확인할 수 있습니다. 이처럼 screenLeft 속성은 창의 현재 위치를 동적으로 파악하는 데 활용됩니다.