JavaScript로 위치 지정 요소의 보이는 영역을 반환하는 방법

위치 지정(positioned)된 요소 중 화면에 실제로 보이는 부분을 확인하고 제어하려면, JavaScript에서 clip 속성을 사용하면 됩니다. 이 속성은 절대 위치(absolute position)로 배치된 이미지나 요소를 사각형 형태로 잘라내어 원하는 영역만 표시할 수 있게 해줍니다.

clip 속성의 기본 문법

clip 속성은 rect(상단 우측 하단 좌측) 형식으로 값을 지정합니다. 예를 들어 rect(10px 90px 90px 10px)처럼 작성하면 위쪽 10px, 오른쪽 90px, 아래쪽 90px, 왼쪽 10px 지점을 기준으로 요소가 잘려서 표시됩니다.

예제

아래 코드를 실행하면 버튼을 클릭했을 때 이미지가 잘리는(clipping) 과정을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            position: absolute;
            top: 100px;
         }
      </style>
   </head>
   <body>
      <button type="button" onclick="display()">Clip</button><br>
      <img id="newImg" src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" width="170" height="150">
      <script>
         function display() {
            document.getElementById("newImg").style.clip = "rect(10px 90px 90px 10px)";
         }
      </script>
   </body>
</html>

코드 설명

이미지는 position: absolute로 배치되어 있어야 clip 속성이 정상적으로 동작합니다.
버튼을 클릭하면 display() 함수가 호출되어 이미지의 style에 clip 값을 적용합니다.
결과적으로 원본 이미지에서 지정한 사각형 영역만 남고 나머지 부분은 화면에서 숨겨집니다.

참고로 최신 웹 개발에서는 clip 속성보다 호환성과 유연성이 뛰어난 clip-path 속성을 사용하는 것이 권장되지만, 기존 코드나 레거시 브라우저 환경에서는 여전히 clip 속성이 활용됩니다.