From 1af0e8cfb175cb41c530cc6cf58f032011661891 Mon Sep 17 00:00:00 2001 From: Dayeon Yoon Date: Sun, 5 Nov 2023 01:17:00 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A0=9C=EB=AA=A9=20=EB=B2=88=EC=97=AD=20?= =?UTF-8?q?=EB=B0=8F=20=EC=97=AD=EC=B9=98=20=EA=B0=92=EC=9D=84=20=EC=9E=84?= =?UTF-8?q?=EA=B3=84=EA=B0=92=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/intersection_observer_api/index.md | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/files/ko/web/api/intersection_observer_api/index.md b/files/ko/web/api/intersection_observer_api/index.md index f5344f5bb9fa18..4fc6c0a9736a3d 100644 --- a/files/ko/web/api/intersection_observer_api/index.md +++ b/files/ko/web/api/intersection_observer_api/index.md @@ -76,7 +76,7 @@ observer.observe(target); // 대상을 관찰자에 할당할 때까지 기다립니다. (타겟이 현재 보이지 않더라도) ``` -언제든지 타겟 요소가 `IntersectionObserver`에 지정된 역치 값을 만족시키면, 콜백은 호출됩니다. 콜백은 {{domxref("IntersectionObserverEntry")}} 객체와 관찰자 목록을 받습니다. +언제든지 타겟 요소가 `IntersectionObserver`에 지정된 임계값을 만족시키면, 콜백은 호출됩니다. 콜백은 {{domxref("IntersectionObserverEntry")}} 객체와 관찰자 목록을 받습니다. ```js let callback = (entries, observer) => { @@ -120,22 +120,22 @@ Intersection Observer API가 고려하는 모든 영역은 직사각형입니다 #### Thresholds -매번 대상 요소가 얼마나 보이는지의 극미한 변화마다 보고하는 것보다 Intersection Observer API는 **thresholds** 를 사용합니다. 관찰자를 생성할 때, 하나 또는 하나 이상의 보이는 대상 요소의 백분율을 나타내는 숫자 값을 제공할 수 있습니다. 그런 다음, API는 이러한 역치 값을 넘어가는 가시성 변경 사항만 보고합니다. +매번 대상 요소가 얼마나 보이는지의 극미한 변화마다 보고하는 것보다 Intersection Observer API는 **thresholds** 를 사용합니다. 관찰자를 생성할 때, 하나 또는 하나 이상의 보이는 대상 요소의 백분율을 나타내는 숫자 값을 제공할 수 있습니다. 그런 다음, API는 이러한 임계값을 넘어가는 가시성 변경 사항만 보고합니다. -예를 들어, 대상의 가시성이 각 25% 지점보다 크거나 작을 때마다 보고를 받고 싶다면, 관찰자를 생성할 때 \[0, 0.25, 0.5, 0.75, 1]로 이루어진 역치 값 목록을 지정해야 합니다. +예를 들어, 대상의 가시성이 각 25% 지점보다 크거나 작을 때마다 보고를 받고 싶다면, 관찰자를 생성할 때 \[0, 0.25, 0.5, 0.75, 1]로 이루어진 임계값 목록을 지정해야 합니다. -콜백이 호출될 때, 어느 방향에서든 노출된 양이 역치 값 중 하나를 초과하는 루트 변화를 교차하는 정도가 관찰된 각 대상에 대한 `IntersectionObserverEntry` 객체 목록을 받습니다. +콜백이 호출될 때, 어느 방향에서든 노출된 양이 임계값 중 하나를 초과하는 루트 변화를 교차하는 정도가 관찰된 각 대상에 대한 `IntersectionObserverEntry` 객체 목록을 받습니다. 엔트리의 {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} 속성을 관찰함으로써 대상이 현재 루트를 교차하는 것을 볼 수 있습니다. 만약 해당 값이 `true` 라면, 대상은 최소한 부분적으로 루트 요소나 문서와 교차하고 있습니다. 이를 통해 엔트리는 교차하는 요소에서 더 이상 교차하지 않는 요소로의 전환을 나타내거나 교차하지 않음에서 교차하는 전환으로 나타낼 수 있습니다. 교차가 정확이 두 개 사이의 경계 또는 {{domxref("IntersectionObserverEntry.boundingClientRect", "boundingClientRect")}}가 0인 영역을 따르는 경우에 발생하는 무조건 교차하는 직사각형이 존재할 수 있다는 것을 주목해야 합니다. 경계선을 공유하는 대상과 루트의 상태는 교차 상태로의 전환이 충분하지 않다고 여겨질 수 있습니다. -어떻게 역치 값이 동작하는 지를 느껴보기 위해서, 아래 상자를 스크롤 해봅시다. 그 안의 각 색칠된 상자는 네 모서리의 보이는 영역의 백분율을 보여주고, 따라서 컨테이너를 스크롤할 때 시간이 지남에 따라 이 비율이 변화하는 것을 볼 수 있습니다. 각 상자는 다른 역치 값을 가지고 있습니다. +어떻게 임계값이 동작하는 지를 느껴보기 위해서, 아래 상자를 스크롤 해봅시다. 그 안의 각 색칠된 상자는 네 모서리의 보이는 영역의 백분율을 보여주고, 따라서 컨테이너를 스크롤할 때 시간이 지남에 따라 이 비율이 변화하는 것을 볼 수 있습니다. 각 상자는 다른 임계값을 가지고 있습니다. -- 첫번째 상자는 각 가시성 백분율에 대한 역치 값을 가지고 있습니다. 즉, {{domxref("IntersectionObserver.thresholds")}} 목록은 `[0.00, 0.01, 0.02, /*…,*/ 0.99, 1.00]` 입니다. -- 두번째 상자는 50% 지점에 하나의 역치 값을 가지고 있습니다. -- 세번째 상자는 가시성의 10% 마다 역치 값을 가지고 있습니다. (0%, 10%, 20%, 등.). -- 마지막 상자는 각 25% 마다 역치 값을 가지고 있습니다. +- 첫번째 상자는 각 가시성 백분율에 대한 임계값을 가지고 있습니다. 즉, {{domxref("IntersectionObserver.thresholds")}} 목록은 `[0.00, 0.01, 0.02, /*…,*/ 0.99, 1.00]` 입니다. +- 두번째 상자는 50% 지점에 하나의 임계값을 가지고 있습니다. +- 세번째 상자는 가시성의 10% 마다 임계값을 가지고 있습니다. (0%, 10%, 20%, 등.). +- 마지막 상자는 각 25% 마다 임계값을 가지고 있습니다. ```html hidden