좌표계
픽셀의 위치를 그래픽 맥락에서 지정할 때(마치 대수학 에서 좌표계를 지정하는 것처럼), 그 위치는 맥락의 고정된 점을 기준으로 정의됩니다. 이 고정된 점을 원점 이라고 합니다. 위치는 맥락의 각 차원을 따라 원점에서 떨어진 픽셀 수로 지정됩니다.
이 안내서는 CSS 객체 모델에서 사용하는 표준 좌표계들을 설명합니다. 이러한 표준 좌표계는 일반적으로 원점이 위치하는 곳에서만 차이가 있습니다.
차원
웹 기술에서 사용하는 좌표계에서는 관례에 따라 수평 오프셋을 x-좌표라고 합니다. 여기서 음수 값은 원점의 왼쪽에 있는 위치를 나타내고 양수 값은 원점의 오른쪽에 있는 위치를 나타냅니다. y-좌표는 수직 오프셋을 지정하며, 음수 값은 원점의 위에 있는 위치를, 양수 값은 원점의 아래에 있는 위치를 나타냅니다.
웹에서 기본 원점은 주어진 컨텍스트의 왼쪽 상단 모서리에 위치하며(양의 y-좌표 값은 원점 아래에 위치), 이는 대부분의 수학적 모델과 달리 원점이 왼쪽 하단 모서리에 있고 양의 y-좌표 값이 원점 위에 있다는 점에 유의하세요.
3차원을 사용하여 객체를 앞에서 뒤로 배치할 때는 z축을 사용합니다. z축은 시청자로부터 화면의 표면까지 이어집니다. CSS z-index 속성은 이 축에서 배치된 요소의 위치에 영향을 미쳐 독자로부터 멀어지거나 가까워지는 효과를 제공합니다.
참고 :
실제로 CSS 속성인 transform
등을 사용하여 이러한 좌표계의 정의와 방향을 변경하는 것이 가능합니다. 그러나 지금은 표준 좌표계에 대해서만 이야기하겠습니다.
표준 CSSOM 좌표계
CSS 객체 모델에서 사용되는 네 가지 표준 좌표계가 있습니다. 주요 시스템을 시각화하는 데 도움이 되도록 다음 다이어그램에서는 뷰포트 밖으로 스크롤된 내용이 포함된 브라우저 창이 있는 모니터를 보여줍니다. 뷰포트 밖으로 스크롤된 페이지 콘텐츠는 "페이지" 좌표의 원점이 어디에 있는지를 나타내기 위해, 브라우저 창 위에 반투명하게 표시됩니다. "클라이언트", "페이지" 및 "뷰포트" 좌표계의 원점은 강조 표시됩니다.
오프셋
"오프셋" 모델을 사용하여 지정된 좌표는 검사 중인 요소 또는 이벤트가 발생한 요소의 왼쪽 상단 모서리를 사용합니다.
예를 들어, 마우스 이벤트가 발생하면 이벤트의 offsetX
와 offsetY
에 지정된 마우스 위치는 이벤트가 전달된 노드의 왼쪽 상단 모서리를 기준으로 상대적으로 주어집니다. 원점은 padding-left
및 padding-top
에 의해 지정된 거리만큼 안쪽으로 들어갑니다.
뷰포트
"뷰포트"(또는 "클라이언트") 좌표계는 이벤트가 발생한 뷰포트 또는 탐색 맥락의 왼쪽 상단을 원점으로 사용합니다. 이는 문서가 표시되는 전체 보기 영역입니다.
예를 들어 데스크톱 컴퓨터에서는 MouseEvent.clientX
및 MouseEvent.clientY
속성이 이벤트가 발생한 순간의 마우스 커서 위치를 창의 왼쪽 상단 모서리를 기준으로 나타냅니다.
스타일러스나 포인터를 사용할 때 터치 이벤트
에서의Touch.clientX
와 Touch.clientY
좌표는 동일한 원점을 기준으로 합니다.
창의 왼쪽 위 모서리는 문서의 내용이나 수행된 스크롤에 관계없이 항상 (0, 0)입니다. 즉, 문서를 스크롤하면 문서 내 특정 위치의 뷰포트 좌표가 변경됩니다.
페이지
"페이지" 좌표계는 렌더링된 전체 Document
의 왼쪽 상단 모서리를 기준으로 픽셀의 위치를 제공합니다. 즉, 문서 내의 요소 안에 있는 점은 레이아웃이 변경되어 요소가 이동하지 않는 한 사용자가 문서에서 수평 또는 수직으로 스크롤한 후에도 동일한 좌표를 가집니다.
마우스 이벤트의 pageX
및 pageY
속성은 이벤트가 생성된 시점에서 문서의 왼쪽 상단 모서리를 기준으로 마우스의 위치를 제공합니다. 터치 이벤트
의 Touch.pageX
및 Touch.pageY
좌표는 동일한 원점을 기준으로 합니다.
화면
마지막으로 "화면" 모델에서는 원점이 사용자의 화면 공간의 왼쪽 상단 모서리입니다. 이 좌표계에서 각 점은 하나의 논리적 픽셀을 나타내므로 각 축을 따라 값이 정수 단위로 증가하거나 감소합니다. 예를 들어, 포함된 창이 이동하거나 사용자의 화면 구성이 변경될 때 (디스플레이 해상도를 변경하거나 모니터를 추가하거나 제거할 때) 문서 내 주어진 점의 위치가 변경될 수 있습니다.
MouseEvent.screenX
및 MouseEvent.screenY
속성은 화면 원점을 기준으로 마우스 이벤트 위치의 좌표를 제공합니다. 터치 이벤트
의 Touch.screenX
및 Touch.screenY
좌표는 동일한 원점을 기준으로 합니다.
예시
요소에서 마우스 좌표를 기록하는 예를 살펴보겠습니다. 마우스가 안쪽 상자에 들어가거나, 내부를 돌아다니거나, 안쪽 상자에서 나갈 때마다 사용 가능한 네 가지 시스템 각각에서 현재 마우스 좌표를 기록하여 이벤트를 처리합니다.
JavaScript
JavaScript에서는 mouseenter
, mousemove
, mouseleave
각 이벤트 유형에 대해 addEventListener()
를 호출해 내부 상자에 이벤트 처리기를 설정합니다.
각 이벤트에 대해, 각 시스템의 좌표를 <p>
요소의 내부 텍스트로 설정하는 setCoords() 함수를 호출합니다.
const log = document.querySelector(".log");
const inner = document.querySelector(".inner");
function setCoords(e) {
log.innerText = `
Offset X/Y: ${e.offsetX}, ${e.offsetY}
Viewport X/Y: ${e.clientX}, ${e.clientY}
Page X/Y: ${e.pageX}, ${e.pageY}
Screen X/Y: ${e.screenX}, ${e.screenY}`;
}
inner.addEventListener("mousemove", setCoords);
inner.addEventListener("mouseenter", setCoords);
inner.addEventListener("mouseleave", setCoords);
HTML
HTML에는 마우스 이벤트의 데이터를 표시하는 "log"
클래스를 가진 <p>
가 포함되어 있으며, 이는 마우스 이벤트에서 데이터를 표시합니다.
<div class="outer">
<div class="inner">
<p class="log">이 섹션에 마우스를 올려 좌표를 확인하세요</p>
</div>
</div>
CSS
포함하는 상자에 대한 "outer"
클래스는 내용이 스크롤될 때 마우스 좌표의 효과를 볼 수 있도록 의도적으로 매우 넓습니다. "inner"
단락은 마우스 이벤트가 추적되고 기록되는 곳입니다.
.outer {
width: 1000px;
}
.inner {
font-family: monospace;
position: relative;
width: 500px;
height: 150px;
top: 25px;
left: 100px;
background-color: darkblue;
color: white;
cursor: crosshair;
user-select: none;
}
.log {
position: relative;
width: 100%;
text-align: center;
}
결과
여기서 실제 결과를 볼 수 있습니다. 파란색 상자 안팎으로 마우스를 이동하면서 다양한 좌표계에서 마우스의 X 및 Y 좌표 값이 변경되는 것을 확인하세요.