diff options
7 files changed, 313 insertions, 240 deletions
diff --git a/files/ko/web/api/intersectionobserver/disconnect/index.md b/files/ko/web/api/intersectionobserver/disconnect/index.md new file mode 100644 index 0000000000..692567c386 --- /dev/null +++ b/files/ko/web/api/intersectionobserver/disconnect/index.md @@ -0,0 +1,40 @@ +--- +title: IntersectionObserver.disconnect() +slug: Web/API/IntersectionObserver/disconnect +tags: + - API + - Disconnect + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - Reference +browser-compat: api.IntersectionObserver.disconnect +translation_of: Web/API/IntersectionObserver/disconnect +--- +{{APIRef("Intersection Observer API")}} + +{{domxref("IntersectionObserver")}}의 **`disconnect()`** 메서드는 감지기의 모든 가시성 변화 주시 대상을 해제합니다. + +## 구문 + +```js +intersectionObserver.disconnect(); +``` + +### 반환 값 + +`undefined`. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("IntersectionObserver.observe", "observe()")}} +- {{domxref("IntersectionObserver.unobserve", "unobserve()")}} diff --git a/files/ko/web/api/intersectionobserver/index.md b/files/ko/web/api/intersectionobserver/index.md index 047b13abdd..bcfe2e9a3c 100644 --- a/files/ko/web/api/intersectionobserver/index.md +++ b/files/ko/web/api/intersectionobserver/index.md @@ -3,93 +3,69 @@ title: IntersectionObserver slug: Web/API/IntersectionObserver tags: - API - - Experimental - Interface - Intersection Observer API - IntersectionObserver - - NeedsTranslation - Reference - - TopicStub - - observers +browser-compat: api.IntersectionObserver translation_of: Web/API/IntersectionObserver --- -<div>{{APIRef("Intersection Observer API")}}</div> +{{APIRef("Intersection Observer API")}} -<p><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> 의 <code><strong>IntersectionObserver</strong></code> 인터페이스는 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 <span class="seoSummary">{{Glossary('viewport')}}</span>와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있도록 도와줍니다.</p> +[Intersection Observer API](/ko/docs/Web/API/Intersection_Observer_API)의 **`IntersectionObserver`** 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 {{Glossary("viewport", "뷰포트")}}가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다. -<p> <code>IntersectionObserver</code> 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정됩니다. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있습니다. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있습니다.</p> +`IntersectionObserver`가 생성되면 루트 내에서 설정된 가시성 비율이 자신의 주시 대상 중에서 나타나는지 감지하기 시작합니다. 한 번 생성한 이후에는 설정을 변경할 수 없으므로, 이미 생성된 감지기 객체는 지정했던 가시성 비율의 감지에만 사용할 수 있습니다. 그래도 하나의 감지기가 다수의 대상을 한꺼번에 주시할 수 있습니다. -<h2 id="Constructor">Constructor</h2> +## 생성자 -<dl> - <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt> - <dd><code>IntersectionObserver</code> 객체를 생성합니다. 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수를 실행합니다.</dd> -</dl> +- {{domxref("IntersectionObserver.IntersectionObserver()")}} + - : `IntersectionObserver` 객체를 생성합니다. `IntersectionObserver` 객체는 대상 요소의 가시성 비율이 설정한 역치 값을 넘어가는 것을 감지하면 지정한 콜백을 호출합니다. -<h2 id="Properties">Properties</h2> +## 속성 -<dl> - <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt> - <dd>대상 요소 ({{domxref("element")}}) 를 감시할 상위 요소. 값을 넣지 않거나 <code>null</code> 일 경우, 최상위 문서의 뷰포트가 사용된다.</dd> - <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt> - <dd>교차 정도를 계산할 때 루트의 {{Glossary('bounding box')}} 에 적용되는 offset 사각형으로, 루트의 범위를 효과적으로 늘리거나 줄입니다. 이 특성이 반환한 값은, 생성자를 호출 할 때 내부 요구 사항에 맞게 변경 될 수 있으므로 지정된 값과 같지 않을 수 있습니다. 각 offset 은 픽셀(<code>px</code>) 혹은 퍼센트(<code>%</code>)로 표기될 수 있습니다. 기본 값은 "0px 0px 0px 0px" 입니다.</dd> - <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt> - <dd>임계값 목록. 숫자의 오름차순으로 정렬되며, 각 임계 값은 감시하는 대상의 경계 상자 영역과의 교차 비율입니다. 대상에 대한 알림은 해당 대상에 대한 임계 값이 초과 될 때 생성됩니다. 생성자에 값이 전달되지 않을 경우 0이 사용됩니다.</dd> -</dl> +- {{domxref("IntersectionObserver.root")}} {{readonlyinline}} + - : 교차 영역 계산에 사용하는 바운딩 박스의 기준이 되는 {{domxref("Element")}} 또는 {{domxref("Document")}}입니다. `root` 설정을 생성자에 제공하지 않았거나, `root`의 값이 `null`인 경우 최상위 문서의 뷰포트를 사용합니다. +- {{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}} + - : 교차 영역을 계산할 때 루트의 {{glossary("bounding box", "바운딩 박스")}}에 적용할 오프셋입니다. 즉, 필요에 따라 계산 용도로 루트 영역을 늘리거나 줄일 수 있습니다. 생성자 설정에 지정한 값은 생성자 내에서 내부 조건에 맞도록 조정 과정을 거치므로, 이 속성의 반환 값이 설정 값과 다를 수도 있습니다. 각각의 오프셋에는 픽셀(`px`)과 퍼센트(`%`)를 사용할 수 있으며, 기본 값은 `0px 0px 0px 0px`입니다. +- {{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}} + - : 오름차순으로 정렬된 역치 리스트입니다. 각각의 역치는 대상의 바운딩 박스 영역과 교차 영역 사이의 비율에 대한 역치입니다. 대상에 대한 교차 알림(콜백 호출)은 이 역치 값 중 하나라도 넘어갈 때 발생합니다. 아무 값도 생성자에 지정하지 않은 경우의 기본 값은 0입니다. -<h2 id="Methods">Methods</h2> +## 메서드 -<dl> - <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt> - <dd><code>IntersectionObserver</code> 가 어떤 대상이라도 감시하는 것을 중지합니다.</dd> - <dt>{{domxref("IntersectionObserver.observe()")}}</dt> - <dd>대상 요소에 대한 감시를 시작합니다.</dd> - <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt> - <dd>모든 감시되는 대상의 배열 ({{domxref("IntersectionObserverEntry")}}) 을 리턴합니다.</dd> - <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt> - <dd>특정 대상 요소를 감시하는 것을 중지합니다.</dd> -</dl> +- {{domxref("IntersectionObserver.disconnect()")}} + - : 모든 대상의 주시를 해제합니다. +- {{domxref("IntersectionObserver.observe()")}} + - : 주어진 대상 요소를 주시합니다. +- {{domxref("IntersectionObserver.takeRecords()")}} + - : 모든 주시 대상에 대한 {{domxref("IntersectionObserverEntry")}} 배열을 반환합니다. +- {{domxref("IntersectionObserver.unobserve()")}} + - : 특정 대상 요소에 대한 주시를 해제합니다. -<h2 id="Examples">Examples</h2> +## 예제 -<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) { - // If intersectionRatio is 0, the target is out of view - // and we do not need to do anything. - if (entries[0].intersectionRatio <= 0) return; +```js +var intersectionObserver = new IntersectionObserver(function(entries) { + // intersectionRatio가 0이라는 것은 대상을 볼 수 없다는 것이므로 + // 아무것도 하지 않음 + if (entries[0].intersectionRatio <= 0) return; loadItems(10); - console.log('Loaded new items'); + console.log('새 항목 불러옴'); }); -// start observing -intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.IntersectionObserver")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref('MutationObserver')}}</li> - <li>{{domxref('PerformanceObserver')}}</li> - <li>{{domxref('ResizeObserver')}}</li> -</ul> +// 주시 시작 +intersectionObserver.observe(document.querySelector('.scrollerFooter')); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref('MutationObserver')}} +- {{domxref('PerformanceObserver')}} +- {{domxref('ResizeObserver')}} diff --git a/files/ko/web/api/intersectionobserver/intersectionobserver/index.md b/files/ko/web/api/intersectionobserver/intersectionobserver/index.md index 6f89828d16..35382a6778 100644 --- a/files/ko/web/api/intersectionobserver/intersectionobserver/index.md +++ b/files/ko/web/api/intersectionobserver/intersectionobserver/index.md @@ -1,5 +1,5 @@ --- -title: IntersectionObserver.IntersectionObserver() +title: IntersectionObserver() slug: Web/API/IntersectionObserver/IntersectionObserver tags: - API @@ -7,81 +7,63 @@ tags: - Intersection Observer API - IntersectionObserver - Reference +browser-compat: api.IntersectionObserver.IntersectionObserver translation_of: Web/API/IntersectionObserver/IntersectionObserver --- -<div>{{APIRef("Intersection Observer API")}}</div> - -<p><span class="seoSummary"><strong><code>IntersectionObserver()</code></strong> 생성자는 새로운 {{domxref("IntersectionObserver")}} 객체를 생성하고 반환합니다.</span> <code>rootMargin</code> 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 <code>[0.0]</code>을 사용합니다.</p> - -<h2 id="구문">구문</h2> - -<pre class="syntaxbox">new IntersectionObserver(<em>callback</em>[, <em>options</em>]);</pre> - -<h3 id="매개변수">매개변수</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>대상 요소의 화면에 보이는 부분 백분율이 역치보다 클 때 호출할 함수입니다. 다음의 두 매개변수를 받습니다. - <dl> - <dt><code>entries</code></dt> - <dd>더 보이거나 덜 보이게 되면서 통과한 역치를 나타내는, {{domxref("IntersectionObserverEntry")}} 객체의 배열.</dd> - <dt><code>observer</code></dt> - <dd>자신을 호출한 {{domxref("IntersectionObserver")}}.</dd> - </dl> - </dd> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>옵저버를 조정할 수 있는 옵션 객체. 지정하지 않는다면 옵저버는 문서의 뷰포트를 루트로 사용하고, 여백은 없이, 역치는 0(1픽셀이라도 변하면 콜백을 호출)이 됩니다. 아래 옵션을 자유롭게 지정할 수 있습니다. - <dl> - <dt><code>root</code></dt> - <dd>대상 요소의 조상인 {{domxref ( "Element")}} 객체는 경계 사각형이 뷰포트로 간주됩니다. 루트의 가시 영역에 보이지 않는 대상의 어떤 부분도 가시적 인 것으로 간주되지 않습니다.</dd> - <dt><code>rootMargin</code></dt> - <dd>교차점을 계산할 때, 계산 목적으로 루트를 줄이거나 늘리는 경우, 루트의 {{Glossary ( 'bounding_box')}}에 추가 할 오프셋 세트를 지정하는 문자열입니다. 구문은 CSS {{cssxref ( "margin")}} 속성의 구문과 거의 동일합니다. 여백의 작동 방식 및 구문에 대한 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}을 참조하십시오. 기본 설정은 "0px 0px 0px 0px"입니다.</dd> - <dt></dt> - <dt><code>threshold</code></dt> - <dd>관측 대상에 대한 전체 상자 영역(루트)에 대한 교차 영역의 비율을 지정하며, 0.0과 1.0 사이의 숫자 하나 혹은 숫자 배열입니다. 0.0 값은 대상의 단일 픽셀이라도 보여지면, 대상이 보이는 것으로 계산되는 것을 의미합니다. 1.0은 전체 대상 요소가 표시됨을 의미합니다. 임계 값 사용 방법에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}}를 참조하십시오. 기본값은 0.0입니다.</dd> - </dl> - </dd> -</dl> - -<h3 id="반환_값">반환 값</h3> - -<p>지정된 가시성 <code>threshold</code> 를 통해 지정된 <code>root</code> 내에서 대상 요소의 가시성을 감시하는 데 사용할 수있는 {{domxref ( "IntersectionObserver")}} 인스턴스가 반환됩니다. {{domxref ( "IntersectionObserver.observe", "observe()")}} 메소드를 호출하여 지정된 대상의 가시성 변경을 관찰하십시오.</p> - -<h3 id="예외">예외</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>설정된 <code>rootMargin</code> 이 유효하지 않은 경우.</dd> - <dt><code>RangeError</code></dt> - <dd>하나 혹은 그 이상의 <code>threshold</code> 가 0.0 - 1.0 사이가 아닌 경우</dd> -</dl> - -<h2 id="예제">예제</h2> - -<p>아래는 요소의 보여지는 부분이 10% 가 넘거나 작아질 때 <code>myObserverCallback</code> 를 호출하는 새로운 intersection observer 를 생성하는 예제입니다.</p> - -<pre class="brush: js">let observer = new IntersectionObserver(myObserverCallback, - {"threshold": 0.1});</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p> +{{APIRef("Intersection Observer API")}} + +**`IntersectionObserver()`** 생성자는 새로운 {{domxref("IntersectionObserver")}} 객체를 생성하고 반환합니다. + +`rootMargin` 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 `[0.0]`을 사용합니다. + +## 구문 + +```js +new IntersectionObserver(callback[, options]); +``` + +### 매개변수 + +- `callback` + - : 대상 요소의 보이는 영역 비율이 역치를 위아래로 넘을 때 (더 커졌거나 작아졌을 때 모두) 호출할 함수입니다. 두 개의 매개변수를 받습니다. + - `entries` + - : 더 드러나거나 가려져서 지정한 역치를 넘어가게 된 요소를 나타내는 {{domxref("IntersectionObserverEntry")}} 객체의 배열. + - `observer` + - : 콜백을 호출한 {{domxref("IntersectionObserver")}}. + +- `options` {{optional_inline}} + - : 감지기를 조절할 수 있는 객체입니다. 지정하지 않으면 문서 뷰포트를 루트로, 여백 없이, 0% 역치(하나의 픽셀이라도 보이면 콜백 호출)로 설정합니다. + - `root` + - : 대상 요소의 조상 {{domxref("Element")}} 또는 {{domxref("Document")}}. 여기에 지정한 요소 또는 문서의 {{glossary("bounding box", "바운딩 박스")}}를 이 감지기의 뷰포트로 사용합니다. + - `rootMargin` + - : 교차 계산에 대해 루트의 바운딩 박스에 적용할 오프셋을 나타내는 문자열. 즉 교차 계산 시 루트 영역의 크기를 키우거나 줄이고자 할 때 사용합니다. CSS {{cssxref("margin")}} 속성과 유사한 값을 받을 수 있습니다. [Intersection Observer API](/ko/docs/Web/API/Intersection_Observer_API) 문서의 [교차 루트와 루트 여백](/ko/docs/Web/API/Intersection_Observer_API#교차_루트와_루트_여백)에서 여백의 동작 방식과 여백 구문에 대해 알아보세요. 기본 값은 `"0px 0px 0px 0px"`입니다. + - `threshold` + - : 0.0 이상, 1.0 이하의 숫자 단일 값 또는 숫자 배열. 대상의 보이는 영역과 전체 바운딩 박스의 비율에 대한 역치를 나타냅니다. `0.0`을 지정하면 대상의 픽셀 하나라도 보일 때 대상을 볼 수 있는 것으로 취급하고, `1.0`을 지정하면 대상을 온전히 볼 수 있어야 합니다. [Intersection Observer API](/ko/docs/Web/API/Intersection_Observer_API) 문서의 [역치](/ko/docs/Web/API/Intersection_Observer_API#역치)에서 자세한 동작 방식을 알아보세요. 기본 값은 `0.0`입니다. + +### 반환 값 + +지정한 `root` 내에서 주시 중인 요소의 가시성이 `threshold`를 위아래로 넘어가는 경우를 감지할 수 있는 새로운 {{domxref("IntersectionObserver")}}. {{domxref("IntersectionObserver.observe", "observe()")}} 메서드를 호출해서 새로운 요소를 주시하세요. + +### 예외 + +- `SyntaxError` + - : 지정한 `rootMargin`이 유효하지 않은 경우. +- `RangeError` + - : 한 개 이상의 `threshold` 값이 0.0 미만 또는 1.0을 초과할 경우. + +## 예제 + +요소의 볼 수 있는 영역 비율이 10% 위아래로 넘어갈 때 `myObserverCallback` 함수를 호출하는 새로운 교차 탐지기를 생성하는 예제입니다. + +```js +let observer = new IntersectionObserver(myObserverCallback, + {threshold: 0.1}); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/api/intersectionobserver/observe/index.md b/files/ko/web/api/intersectionobserver/observe/index.md index 5c10623363..942c42af61 100644 --- a/files/ko/web/api/intersectionobserver/observe/index.md +++ b/files/ko/web/api/intersectionobserver/observe/index.md @@ -1,85 +1,70 @@ --- title: IntersectionObserver.observe() slug: Web/API/IntersectionObserver/observe +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - Reference +browser-compat: api.IntersectionObserver.observe translation_of: Web/API/IntersectionObserver/observe --- -<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> +{{APIRef("Intersection Observer API")}} -<p><span class="seoSummary">The {{domxref("IntersectionObserver")}} <code><strong>observe()</strong></code> 메서드는 <code>IntersectionObserver</code> 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다.</span> 만일 엘리먼트 관찰을 중지하고 싶다면 {{domxref("IntersectionObserver.unobserve()")}} 메서드를 호출하세요.</p> +{{domxref("IntersectionObserver")}}의 **`observe()`** 메서드는 `IntersectionObserver`의 주시 대상 목록에 요소를 추가합니다. 하나의 감지기는 하나의 루트와 하나의 역치 목록만 가질 수 있지만, 동시에 여러 요소를 주시할 수 있습니다. -<p>특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때({{domxref("IntersectionObserver.thresholds")}} 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 {{domxref("IntersectionObserverEntry")}} 객체와 함께 실행됩니다.</p> +요소의 주시를 중단하려면 {{domxref("IntersectionObserver.unobserve()")}}를 호출하세요. -<p>노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.</p> +지정한 주시 대상 요소의 가시성 비율이 감지기의 역치({{domxref("IntersectionObserver.thresholds")}})를 통과하는 순간 감지기 콜백이 호출됩니다. 이때 역치를 통과한 요소를 나타내는 {{domxref("IntersectionObserverEntry")}}의 배열을 콜백 매개변수로 제공합니다. 이런 구조 덕분에 한 번의 콜백 호출만으로 많은 요소의 가시성 변화를 한 번에 처리할 수 있습니다. -<h2 id="문법">문법</h2> +## 구문 -<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre> +```js +IntersectionObserver.observe(targetElement); +``` +### 매개변수 -<h3 id="Parameters">Parameters</h3> +- `targetElement` + - : 루트 내에서의 가시성 변화를 감지할 {{domxref("element")}}입니다. 루트 요소의 자손이어야 합니다. 루트가 현재 문서의 뷰포트일 경우 이 요소도 문서 내에 위치해야 합니다. -<dl> - <dt><code>targetElement</code></dt> - <dd>가시성이 감시될 root 내부의 {{domxref("element")}}. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).</dd> -</dl> +### 반환 값 -<h3 id="Return_value">Return value</h3> +`undefined`. -<p><code>undefined</code>.</p> +## 예제 -<dl> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>IntersectionObserver 를 등록한다</p> - -<pre> -// IntersectionObserver 를 등록한다. +```js +// IntersectionObserver 등록 const io = new IntersectionObserver(entries => { entries.forEach(entry => { - // 관찰 대상이 viewport 안에 들어온 경우 'tada' 클래스를 추가 + // 주시 대상이 뷰포트 안으로 들어오면 active 클래스 추가 if (entry.intersectionRatio > 0) { - entry.target.classList.add('tada'); + entry.target.classList.add('active'); } - // 그 외의 경우 'tada' 클래스 제거 + // 아니면 active 클래스 제거 else { - entry.target.classList.remove('tada'); + entry.target.classList.remove('active'); } }) }) -// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다. +// 주시 대상 선언, 주시 시작 const boxElList = document.querySelectorAll('.box'); boxElList.forEach((el) => { io.observe(el); }) -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<div> -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.IntersectionObserver.observe")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("IntersectionObserver.unobserve()")}}</li> -</ul> +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("IntersectionObserver.unobserve()")}} diff --git a/files/ko/web/api/intersectionobserver/root/index.md b/files/ko/web/api/intersectionobserver/root/index.md index ad74686576..085515d574 100644 --- a/files/ko/web/api/intersectionobserver/root/index.md +++ b/files/ko/web/api/intersectionobserver/root/index.md @@ -1,55 +1,45 @@ --- title: IntersectionObserver.root slug: Web/API/IntersectionObserver/root +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Property + - Reference translation_of: Web/API/IntersectionObserver/root --- -<div>{{APIRef("Intersection Observer API")}}</div> +{{APIRef("Intersection Observer API")}} -<p><span class="seoSummary">{{domxref("IntersectionObserver")}} 인터페이스의 read-only 속성인 <strong><code>root</code></strong>는 옵저버의 타겟 엘리먼트가 속한 화면의 경계, 즉 {{Glossary("viewport")}}의 {{Glossary("bounding box")}} 처럼 취급되는 {{domxref("Element")}} 이나 {{domxref("Document")}} 를 식별합니다. </span>만일 <code>root</code>가 <code>null</code> 이라면 화면 경계는 실제 document viewport가 사용됩니다.</p> +{{domxref("IntersectionObserver")}} 인터페이스의 **`root`** 읽기 전용 속성은 {{glossary("bounding box", "바운딩 박스")}}를 주시 대상의 {{glossary("viewport", "뷰포트")}}로 취급하는 {{domxref("Element")}} 또는 {{domxref("Document")}}를 나타냅니다. -<h2 id="문법">문법</h2> +`root`가 `null`이면 문서의 실제 뷰포트 바운딩 박스를 사용합니다. -<pre class="syntaxbox"><var><code>var <em>root</em> = </code>intersectionObserver</var>.root; -</pre> +## 값 -<h3 id="Value">Value</h3> +대상 요소가 얼마나 보이는지 판별할 때, 그 뷰포트 경계로서 바운딩 박스를 가져오는 {{domxref("Element")}} 또는 {{domxref("Document")}} 객체입니다. -<p>{{domxref("Element")}} 이나 {{domxref("Document")}} 객체로, 해당 객체의 bounding box는 observer에 의해 관찰되는 대상 요소가 화면상에 얼마나 보여지는가를 가늠할 뷰포트의 경계로 사용됩니다.</p> +이 뷰포트 경계에 {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 생성자로 제공한 여백 설정을 적용한 직사각형 영역과, 대상 요소의 경계에서 그 위에 겹치는 다른 요소의 경계를 뺐을 때의 직사각형 영역을 대상 요소에서 볼 수 있는 영역으로 취급합니다. -<p>사각형 경계의 교차성, {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 객체 생성시에 설정된 임의의 margin에 의한 offset, 대상 요소의 경계에서 타겟 요소와 겹쳐진 모든 요소나 다른 객체의 경계를 제외한 것이 대상 요소의 가시성 계산에 고려됩니다.</p> +`root`가 `null`이면 현재 문서를 루트로, 그 뷰포트(문서에서 지금 보이는 영역)를 루트 경계로 사용합니다. -<p>만일 <code>root</code> 가 <code>null</code>이라면 현재 document가 root로 사용되며, 그것의 viewport의 경계(즉 document의 노출 영역)가 root 의 경계로 사용됩니다.</p> +## 예제 -<h2 id="사용예">사용예</h2> +CSS {{cssxref("border")}} 속성을 사용해서 교차 감지기의 루트 요소에 2픽셀 초록색 테두리를 추가하는 예제입니다. -<p>이 예제는 intersection observer의 root 요소의 {{cssxref("border")}}를 2픽셀 너비의 녹색 라인으로 설정합니다.</p> +```js +observer.root.style.border = "2px solid #44aa44"; +``` -<pre class="brush: js">observer.root.style.border = "2px solid #44aa44"; -</pre> +## 명세 -<h2 id="Specifications">Specifications</h2> +{{Specifications}} -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td> - <td>{{Spec2('IntersectionObserver')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +## 브라우저 호환성 -<h2 id="Browser_compatibility">Browser compatibility</h2> +{{Compat}} -<p>{{Compat("api.IntersectionObserver.root")}}</p> +## 같이 보기 -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li> -</ul> +- [Intersection Observer API로 요소가 보여진 시간 측정하기](/ko/docs/Web/API/Intersection_Observer_API/Timing_element_visibility) diff --git a/files/ko/web/api/intersectionobserver/takerecords/index.md b/files/ko/web/api/intersectionobserver/takerecords/index.md new file mode 100644 index 0000000000..68338cc046 --- /dev/null +++ b/files/ko/web/api/intersectionobserver/takerecords/index.md @@ -0,0 +1,42 @@ +--- +title: IntersectionObserver.takeRecords() +slug: Web/API/IntersectionObserver/takeRecords +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - NeedsExample + - Reference + - takeRecords +browser-compat: api.IntersectionObserver.takeRecords +translation_of: Web/API/IntersectionObserver/takeRecords +--- +{{APIRef("Intersection Observer API")}} + +{{domxref("IntersectionObserver")}}의 **`takeRecords()`** 메서드는 주시 대상 중에서 마지막 교차 변화 알림 이후, 즉 명시적인 `takeRecords()` 호출 또는 감지기의 콜백 자동 호출 이후 교차 영역에 변화가 생긴 요소를 나타내는 {{domxref("IntersectionObserverEntry")}} 객체의 배열을 반환합니다. + +> **참고:** 콜백으로 교차 영역의 변화를 관측하고 있으면 굳이 이 메서드를 호출하지 않아도 됩니다. `takeRecords()`를 호출하면 대기 중인 교차 변화 감지 목록을 초기화하므로 감지기가 콜백을 호출하지 않을 것입니다. + +## 구문 + +```js +intersectionObserverEntries = intersectionObserver.takeRecords(); +``` + +### 반환 값 + +마지막 교차 변화 알림 이후 교차 영역의 변화를 감지한 대상 요소를 나타내는 {{domxref("IntersectionObserverEntry")}}의 배열. + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Intersection Observer API](/ko/docs/Web/API/Intersection_Observer_API) diff --git a/files/ko/web/api/intersectionobserver/unobserve/index.md b/files/ko/web/api/intersectionobserver/unobserve/index.md new file mode 100644 index 0000000000..736c894543 --- /dev/null +++ b/files/ko/web/api/intersectionobserver/unobserve/index.md @@ -0,0 +1,58 @@ +--- +title: IntersectionObserver.unobserve() +slug: Web/API/IntersectionObserver/unobserve +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - Reference + - unobserve +browser-compat: api.IntersectionObserver.unobserve +translation_of: Web/API/IntersectionObserver/unobserve +--- +{{APIRef("Intersection Observer API")}} + +{{domxref("IntersectionObserver")}}의 **`unobserve()`** 메서드는 특정 요소에 대한 가시성 변화 주시를 중단합니다. + +## 구문 + +```js +IntersectionObserver.unobserve(target); +``` + +### 매개변수 + +- `target` + - : 주시를 중단할 {{domxref("Element")}}입니다. 지정한 요소를 이미 주시하고 있지 않을 때는 아무것도 수행하지 않으며 예외도 발생하지 않습니다. + +### 반환 값 + +`undefined`. + +## 예제 + +아래 코드는 감지기를 생성한 후 요소를 주시하고, 다시 주시를 해제하는 예제입니다. + +```js +var observer = new IntersectionObserver(callback); +observer.observe(document.getElementById("elementToObserve")); + +/* ... */ + +observer.unobserve(document.getElementById("elementToObserve")); +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Intersection Observer API](/ko/docs/Web/API/Intersection_Observer_API) +- {{domxref("IntersectionObserver.observe()")}} |