Resize Observer API를 사용하여 측정 도구 구축

웹 API - 매우 흥미롭지만 잘 탐구되지 않은 영역입니다. 하지만 프로젝트를 위한 도구를 만드는 데 도움이 되는 독특하고 매우 유용한 API가 많이 있습니다.

예를 들어, 크기 변화를 추적하는 것은 역동적이고 반응이 빠른 경험을 만드는 데 핵심입니다. Resize Observer API가 바로 여기에 있습니다.

이 글에서는 크기 조정 가능한 상자의 너비와 높이를 실시간으로 표시하는 측정 도구를 만들어 보겠습니다. 이는 Resize Observer API와 Browser API의 전반적인 성능을 실용적이고 대화형 방식으로 보여주는 프로젝트입니다.

크기 조정 관찰자 API란 무엇입니까?

Resize Observer API는 요소 크기의 변화를 감지할 수 있는 브라우저 기능입니다. 크기 조정 관찰자는 개별 요소에서 작동합니다. 기본적으로 작동하며 반응형 디자인과 동적 UI를 구축하기 위한 도구 세트에 훌륭한 추가 기능이 될 수 있습니다.

이 제품의 장점은 다음과 같습니다.

• 가벼워서 사용하기 쉽습니다
• 전체 뷰포트뿐만 아니라 특정 요소의 크기 변화를 추적할 수 있습니다
• 반응형 구성 요소나 크기 조정 가능한 위젯을 만드는 데 적합합니다

우리가 만들고 있는 것

내부에 크기가 표시된 크기 조정 가능한 상자를 만들어 보겠습니다. 사용자가 상자 크기를 조정하면 표시되는 크기가 실시간으로 업데이트됩니다.

1단계: 프로젝트 설정

먼저 프로젝트의 기본 구조를 설정해 보겠습니다.

resize-tool/
├── index.html
├── styles.css
├── script.js

2단계: 마크업

다음은 우리 앱의 간단한 레이아웃입니다. 크기 조정 가능한 상자에는 크기를 표시하는 텍스트 범위가 포함되어 있습니다.

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Measuring Tool with Resize Observer API</title>
  <link rel="stylesheet" href="styles.css">


  <div>



<h2>
  
  
  Step 3: Styling the App
</h2>

<p>We’ll add some styles to make the resizable box more visually appealing:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.container {
  position: relative;
  width: 80%;
  height: 80%;
}

.resizable {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 2px dashed #007bff;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

 .resizable span {
  background: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

4단계: 실시간 크기 조정 추적 추가

이제 Resize Observer API를 사용하여 프로젝트에 생기를 불어넣어 보겠습니다.

resize-tool/
├── index.html
├── styles.css
├── script.js

5단계: 도구 테스트

1. 브라우저에서 index.html 파일을 엽니다.
2. 상자 모서리를 드래그하여 크기를 조정하세요.
3. 치수가 즉시 업데이트되는 것을 지켜보세요!

작동 방식

1. Resize Observer API는 resizingBox 요소의 크기 변경을 모니터링하기 위해 초기화됩니다. 관찰된 요소의 크기가 변경될 때마다 콜백을 트리거합니다.
2. Resize Observer Entry는 borderBoxSize 속성을 통해 업데이트된 크기를 제공합니다.
3. 업데이트된 너비 및 높이 값은 크기 조정 가능한 상자 내부의 요소입니다.

결론

이 튜토리얼에서는 Resize Observer API를 사용하여 재미있고 대화형인 측정 도구를 만들었습니다. 이 프로젝트는 브라우저 API가 복잡한 작업을 어떻게 단순화할 수 있는지 보여줍니다.
이 기능을 시도하거나 더 확장하려면 댓글로 여러분의 창작물을 자유롭게 공유해 주세요!
또한 CKEditor 블로그에서 서식 있는 텍스트 편집기에 대한 기사를 확인하고 지금 무료 평가판에 등록하여 CKEditor 5를 사용해 보세요!