From bd6329150011e7af74cbd5bf344d5e1a86935060 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Sun, 28 Nov 2021 20:24:10 +0900 Subject: Rename html to md --- files/ko/web/api/intersectionobserver/index.html | 95 ---------------------- files/ko/web/api/intersectionobserver/index.md | 95 ++++++++++++++++++++++ .../intersectionobserver/index.html | 87 -------------------- .../intersectionobserver/index.md | 87 ++++++++++++++++++++ .../api/intersectionobserver/observe/index.html | 85 ------------------- .../web/api/intersectionobserver/observe/index.md | 85 +++++++++++++++++++ .../web/api/intersectionobserver/root/index.html | 55 ------------- .../ko/web/api/intersectionobserver/root/index.md | 55 +++++++++++++ 8 files changed, 322 insertions(+), 322 deletions(-) delete mode 100644 files/ko/web/api/intersectionobserver/index.html create mode 100644 files/ko/web/api/intersectionobserver/index.md delete mode 100644 files/ko/web/api/intersectionobserver/intersectionobserver/index.html create mode 100644 files/ko/web/api/intersectionobserver/intersectionobserver/index.md delete mode 100644 files/ko/web/api/intersectionobserver/observe/index.html create mode 100644 files/ko/web/api/intersectionobserver/observe/index.md delete mode 100644 files/ko/web/api/intersectionobserver/root/index.html create mode 100644 files/ko/web/api/intersectionobserver/root/index.md diff --git a/files/ko/web/api/intersectionobserver/index.html b/files/ko/web/api/intersectionobserver/index.html deleted file mode 100644 index 047b13abdd..0000000000 --- a/files/ko/web/api/intersectionobserver/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: IntersectionObserver -slug: Web/API/IntersectionObserver -tags: - - API - - Experimental - - Interface - - Intersection Observer API - - IntersectionObserver - - NeedsTranslation - - Reference - - TopicStub - - observers -translation_of: Web/API/IntersectionObserver ---- -
{{APIRef("Intersection Observer API")}}
- -

Intersection Observer API 의 IntersectionObserver 인터페이스는 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 {{Glossary('viewport')}}와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있도록 도와줍니다.

- -

 IntersectionObserver 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정됩니다. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있습니다. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있습니다.

- -

Constructor

- -
-
{{domxref("IntersectionObserver.IntersectionObserver()")}}
-
IntersectionObserver 객체를 생성합니다. 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수를 실행합니다.
-
- -

Properties

- -
-
{{domxref("IntersectionObserver.root")}} {{readonlyinline}}
-
대상 요소 ({{domxref("element")}}) 를 감시할 상위 요소. 값을 넣지 않거나 null 일 경우, 최상위 문서의 뷰포트가 사용된다.
-
{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
-
교차 정도를 계산할 때 루트의 {{Glossary('bounding box')}} 에 적용되는 offset 사각형으로, 루트의 범위를 효과적으로 늘리거나 줄입니다. 이 특성이 반환한 값은, 생성자를 호출 할 때 내부 요구 사항에 맞게 변경 될 수 있으므로 지정된 값과 같지 않을 수 있습니다. 각 offset 은 픽셀(px) 혹은 퍼센트(%)로 표기될 수 있습니다. 기본 값은 "0px 0px 0px 0px" 입니다.
-
{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
-
임계값 목록. 숫자의 오름차순으로 정렬되며, 각 임계 값은 감시하는 대상의 경계 상자 영역과의 교차 비율입니다. 대상에 대한 알림은 해당 대상에 대한 임계 값이 초과 될 때 생성됩니다. 생성자에 값이 전달되지 않을 경우 0이 사용됩니다.
-
- -

Methods

- -
-
{{domxref("IntersectionObserver.disconnect()")}}
-
IntersectionObserver 가 어떤 대상이라도 감시하는 것을 중지합니다.
-
{{domxref("IntersectionObserver.observe()")}}
-
대상 요소에 대한 감시를 시작합니다.
-
{{domxref("IntersectionObserver.takeRecords()")}}
-
모든 감시되는 대상의 배열 ({{domxref("IntersectionObserverEntry")}}) 을 리턴합니다.
-
{{domxref("IntersectionObserver.unobserve()")}}
-
특정 대상 요소를 감시하는 것을 중지합니다.
-
- -

Examples

- -
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;
-
-  loadItems(10);
-  console.log('Loaded new items');
-});
-// start observing
-intersectionObserver.observe(document.querySelector('.scrollerFooter'));
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}{{Spec2('IntersectionObserver')}}
- -

Browser compatibility

- -

{{Compat("api.IntersectionObserver")}}

- -

See also

- - diff --git a/files/ko/web/api/intersectionobserver/index.md b/files/ko/web/api/intersectionobserver/index.md new file mode 100644 index 0000000000..047b13abdd --- /dev/null +++ b/files/ko/web/api/intersectionobserver/index.md @@ -0,0 +1,95 @@ +--- +title: IntersectionObserver +slug: Web/API/IntersectionObserver +tags: + - API + - Experimental + - Interface + - Intersection Observer API + - IntersectionObserver + - NeedsTranslation + - Reference + - TopicStub + - observers +translation_of: Web/API/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

Intersection Observer API 의 IntersectionObserver 인터페이스는 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 {{Glossary('viewport')}}와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있도록 도와줍니다.

+ +

 IntersectionObserver 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정됩니다. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있습니다. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있습니다.

+ +

Constructor

+ +
+
{{domxref("IntersectionObserver.IntersectionObserver()")}}
+
IntersectionObserver 객체를 생성합니다. 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수를 실행합니다.
+
+ +

Properties

+ +
+
{{domxref("IntersectionObserver.root")}} {{readonlyinline}}
+
대상 요소 ({{domxref("element")}}) 를 감시할 상위 요소. 값을 넣지 않거나 null 일 경우, 최상위 문서의 뷰포트가 사용된다.
+
{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
+
교차 정도를 계산할 때 루트의 {{Glossary('bounding box')}} 에 적용되는 offset 사각형으로, 루트의 범위를 효과적으로 늘리거나 줄입니다. 이 특성이 반환한 값은, 생성자를 호출 할 때 내부 요구 사항에 맞게 변경 될 수 있으므로 지정된 값과 같지 않을 수 있습니다. 각 offset 은 픽셀(px) 혹은 퍼센트(%)로 표기될 수 있습니다. 기본 값은 "0px 0px 0px 0px" 입니다.
+
{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
+
임계값 목록. 숫자의 오름차순으로 정렬되며, 각 임계 값은 감시하는 대상의 경계 상자 영역과의 교차 비율입니다. 대상에 대한 알림은 해당 대상에 대한 임계 값이 초과 될 때 생성됩니다. 생성자에 값이 전달되지 않을 경우 0이 사용됩니다.
+
+ +

Methods

+ +
+
{{domxref("IntersectionObserver.disconnect()")}}
+
IntersectionObserver 가 어떤 대상이라도 감시하는 것을 중지합니다.
+
{{domxref("IntersectionObserver.observe()")}}
+
대상 요소에 대한 감시를 시작합니다.
+
{{domxref("IntersectionObserver.takeRecords()")}}
+
모든 감시되는 대상의 배열 ({{domxref("IntersectionObserverEntry")}}) 을 리턴합니다.
+
{{domxref("IntersectionObserver.unobserve()")}}
+
특정 대상 요소를 감시하는 것을 중지합니다.
+
+ +

Examples

+ +
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;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// start observing
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}{{Spec2('IntersectionObserver')}}
+ +

Browser compatibility

+ +

{{Compat("api.IntersectionObserver")}}

+ +

See also

+ + diff --git a/files/ko/web/api/intersectionobserver/intersectionobserver/index.html b/files/ko/web/api/intersectionobserver/intersectionobserver/index.html deleted file mode 100644 index 6f89828d16..0000000000 --- a/files/ko/web/api/intersectionobserver/intersectionobserver/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: IntersectionObserver.IntersectionObserver() -slug: Web/API/IntersectionObserver/IntersectionObserver -tags: - - API - - Constructor - - Intersection Observer API - - IntersectionObserver - - Reference -translation_of: Web/API/IntersectionObserver/IntersectionObserver ---- -
{{APIRef("Intersection Observer API")}}
- -

IntersectionObserver() 생성자는 새로운 {{domxref("IntersectionObserver")}} 객체를 생성하고 반환합니다. rootMargin 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 [0.0]을 사용합니다.

- -

구문

- -
new IntersectionObserver(callback[, options]);
- -

매개변수

- -
-
callback
-
대상 요소의 화면에 보이는 부분 백분율이 역치보다 클 때 호출할 함수입니다. 다음의 두 매개변수를 받습니다. -
-
entries
-
더 보이거나 덜 보이게 되면서 통과한 역치를 나타내는, {{domxref("IntersectionObserverEntry")}} 객체의 배열.
-
observer
-
자신을 호출한 {{domxref("IntersectionObserver")}}.
-
-
-
options {{optional_inline}}
-
옵저버를 조정할 수 있는 옵션 객체. 지정하지 않는다면 옵저버는 문서의 뷰포트를 루트로 사용하고, 여백은 없이, 역치는 0(1픽셀이라도 변하면 콜백을 호출)이 됩니다. 아래 옵션을 자유롭게 지정할 수 있습니다. -
-
root
-
대상 요소의 조상인 {{domxref ( "Element")}} 객체는 경계 사각형이 뷰포트로 간주됩니다. 루트의 가시 영역에 보이지 않는 대상의 어떤 부분도 가시적 인 것으로 간주되지 않습니다.
-
rootMargin
-
교차점을 계산할 때, 계산 목적으로 루트를 줄이거나 늘리는 경우, 루트의 {{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"입니다.
-
-
threshold
-
관측 대상에 대한 전체 상자 영역(루트)에 대한 교차 영역의 비율을 지정하며, 0.0과 1.0 사이의 숫자 하나 혹은 숫자 배열입니다. 0.0 값은 대상의 단일 픽셀이라도 보여지면, 대상이 보이는 것으로 계산되는 것을 의미합니다. 1.0은 전체 대상 요소가 표시됨을 의미합니다. 임계 값 사용 방법에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}}를 참조하십시오. 기본값은 0.0입니다.
-
-
-
- -

반환 값

- -

지정된 가시성 threshold 를 통해 지정된 root 내에서 대상 요소의 가시성을 감시하는 데 사용할 수있는 {{domxref ( "IntersectionObserver")}} 인스턴스가 반환됩니다. {{domxref ( "IntersectionObserver.observe", "observe()")}} 메소드를 호출하여 지정된 대상의 가시성 변경을 관찰하십시오.

- -

예외

- -
-
SyntaxError
-
설정된 rootMargin 이 유효하지 않은 경우.
-
RangeError
-
하나 혹은 그 이상의 threshold 가 0.0 - 1.0 사이가 아닌 경우
-
- -

예제

- -

아래는 요소의 보여지는 부분이 10% 가 넘거나 작아질 때  myObserverCallback 를 호출하는 새로운 intersection observer 를 생성하는 예제입니다.

- -
let observer = new IntersectionObserver(myObserverCallback,
-                   {"threshold": 0.1});
- -

명세

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}{{Spec2('IntersectionObserver')}}Initial definition.
- -

브라우저 호환성

- - - -

{{Compat("api.IntersectionObserver.IntersectionObserver")}}

diff --git a/files/ko/web/api/intersectionobserver/intersectionobserver/index.md b/files/ko/web/api/intersectionobserver/intersectionobserver/index.md new file mode 100644 index 0000000000..6f89828d16 --- /dev/null +++ b/files/ko/web/api/intersectionobserver/intersectionobserver/index.md @@ -0,0 +1,87 @@ +--- +title: IntersectionObserver.IntersectionObserver() +slug: Web/API/IntersectionObserver/IntersectionObserver +tags: + - API + - Constructor + - Intersection Observer API + - IntersectionObserver + - Reference +translation_of: Web/API/IntersectionObserver/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

IntersectionObserver() 생성자는 새로운 {{domxref("IntersectionObserver")}} 객체를 생성하고 반환합니다. rootMargin 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 [0.0]을 사용합니다.

+ +

구문

+ +
new IntersectionObserver(callback[, options]);
+ +

매개변수

+ +
+
callback
+
대상 요소의 화면에 보이는 부분 백분율이 역치보다 클 때 호출할 함수입니다. 다음의 두 매개변수를 받습니다. +
+
entries
+
더 보이거나 덜 보이게 되면서 통과한 역치를 나타내는, {{domxref("IntersectionObserverEntry")}} 객체의 배열.
+
observer
+
자신을 호출한 {{domxref("IntersectionObserver")}}.
+
+
+
options {{optional_inline}}
+
옵저버를 조정할 수 있는 옵션 객체. 지정하지 않는다면 옵저버는 문서의 뷰포트를 루트로 사용하고, 여백은 없이, 역치는 0(1픽셀이라도 변하면 콜백을 호출)이 됩니다. 아래 옵션을 자유롭게 지정할 수 있습니다. +
+
root
+
대상 요소의 조상인 {{domxref ( "Element")}} 객체는 경계 사각형이 뷰포트로 간주됩니다. 루트의 가시 영역에 보이지 않는 대상의 어떤 부분도 가시적 인 것으로 간주되지 않습니다.
+
rootMargin
+
교차점을 계산할 때, 계산 목적으로 루트를 줄이거나 늘리는 경우, 루트의 {{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"입니다.
+
+
threshold
+
관측 대상에 대한 전체 상자 영역(루트)에 대한 교차 영역의 비율을 지정하며, 0.0과 1.0 사이의 숫자 하나 혹은 숫자 배열입니다. 0.0 값은 대상의 단일 픽셀이라도 보여지면, 대상이 보이는 것으로 계산되는 것을 의미합니다. 1.0은 전체 대상 요소가 표시됨을 의미합니다. 임계 값 사용 방법에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}}를 참조하십시오. 기본값은 0.0입니다.
+
+
+
+ +

반환 값

+ +

지정된 가시성 threshold 를 통해 지정된 root 내에서 대상 요소의 가시성을 감시하는 데 사용할 수있는 {{domxref ( "IntersectionObserver")}} 인스턴스가 반환됩니다. {{domxref ( "IntersectionObserver.observe", "observe()")}} 메소드를 호출하여 지정된 대상의 가시성 변경을 관찰하십시오.

+ +

예외

+ +
+
SyntaxError
+
설정된 rootMargin 이 유효하지 않은 경우.
+
RangeError
+
하나 혹은 그 이상의 threshold 가 0.0 - 1.0 사이가 아닌 경우
+
+ +

예제

+ +

아래는 요소의 보여지는 부분이 10% 가 넘거나 작아질 때  myObserverCallback 를 호출하는 새로운 intersection observer 를 생성하는 예제입니다.

+ +
let observer = new IntersectionObserver(myObserverCallback,
+                   {"threshold": 0.1});
+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}{{Spec2('IntersectionObserver')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.IntersectionObserver.IntersectionObserver")}}

diff --git a/files/ko/web/api/intersectionobserver/observe/index.html b/files/ko/web/api/intersectionobserver/observe/index.html deleted file mode 100644 index 5c10623363..0000000000 --- a/files/ko/web/api/intersectionobserver/observe/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: IntersectionObserver.observe() -slug: Web/API/IntersectionObserver/observe -translation_of: Web/API/IntersectionObserver/observe ---- -
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
- -

The {{domxref("IntersectionObserver")}} observe() 메서드는 IntersectionObserver 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다. 만일 엘리먼트 관찰을 중지하고 싶다면 {{domxref("IntersectionObserver.unobserve()")}} 메서드를 호출하세요.

- -

특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때({{domxref("IntersectionObserver.thresholds")}} 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 {{domxref("IntersectionObserverEntry")}} 객체와 함께 실행됩니다.

- -

노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.

- -

문법

- -
IntersectionObserver.observe(targetElement);
- -

Parameters

- -
-
targetElement
-
가시성이 감시될 root 내부의 {{domxref("element")}}. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).
-
- -

Return value

- -

undefined.

- -
-
- -

Examples

- -

IntersectionObserver 를 등록한다

- -
-// IntersectionObserver 를 등록한다.
-const io = new IntersectionObserver(entries => {
-  entries.forEach(entry => {
-    // 관찰 대상이 viewport 안에 들어온 경우 'tada' 클래스를 추가
-    if (entry.intersectionRatio > 0) {
-      entry.target.classList.add('tada');
-    }
-    // 그 외의 경우 'tada' 클래스 제거
-    else {
-      entry.target.classList.remove('tada');
-    }
-  })
-})
-
-// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
-const boxElList = document.querySelectorAll('.box');
-boxElList.forEach((el) => {
-  io.observe(el);
-})
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}{{Spec2('IntersectionObserver')}}Initial definition.
- -
-

Browser compatibility

- -

{{Compat("api.IntersectionObserver.observe")}}

-
- -

See also

- - diff --git a/files/ko/web/api/intersectionobserver/observe/index.md b/files/ko/web/api/intersectionobserver/observe/index.md new file mode 100644 index 0000000000..5c10623363 --- /dev/null +++ b/files/ko/web/api/intersectionobserver/observe/index.md @@ -0,0 +1,85 @@ +--- +title: IntersectionObserver.observe() +slug: Web/API/IntersectionObserver/observe +translation_of: Web/API/IntersectionObserver/observe +--- +
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+ +

The {{domxref("IntersectionObserver")}} observe() 메서드는 IntersectionObserver 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다. 만일 엘리먼트 관찰을 중지하고 싶다면 {{domxref("IntersectionObserver.unobserve()")}} 메서드를 호출하세요.

+ +

특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때({{domxref("IntersectionObserver.thresholds")}} 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 {{domxref("IntersectionObserverEntry")}} 객체와 함께 실행됩니다.

+ +

노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.

+ +

문법

+ +
IntersectionObserver.observe(targetElement);
+ +

Parameters

+ +
+
targetElement
+
가시성이 감시될 root 내부의 {{domxref("element")}}. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).
+
+ +

Return value

+ +

undefined.

+ +
+
+ +

Examples

+ +

IntersectionObserver 를 등록한다

+ +
+// IntersectionObserver 를 등록한다.
+const io = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    // 관찰 대상이 viewport 안에 들어온 경우 'tada' 클래스를 추가
+    if (entry.intersectionRatio > 0) {
+      entry.target.classList.add('tada');
+    }
+    // 그 외의 경우 'tada' 클래스 제거
+    else {
+      entry.target.classList.remove('tada');
+    }
+  })
+})
+
+// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
+const boxElList = document.querySelectorAll('.box');
+boxElList.forEach((el) => {
+  io.observe(el);
+})
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}{{Spec2('IntersectionObserver')}}Initial definition.
+ +
+

Browser compatibility

+ +

{{Compat("api.IntersectionObserver.observe")}}

+
+ +

See also

+ + diff --git a/files/ko/web/api/intersectionobserver/root/index.html b/files/ko/web/api/intersectionobserver/root/index.html deleted file mode 100644 index ad74686576..0000000000 --- a/files/ko/web/api/intersectionobserver/root/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: IntersectionObserver.root -slug: Web/API/IntersectionObserver/root -translation_of: Web/API/IntersectionObserver/root ---- -
{{APIRef("Intersection Observer API")}}
- -

{{domxref("IntersectionObserver")}} 인터페이스의 read-only 속성인 root는 옵저버의 타겟 엘리먼트가 속한 화면의 경계, 즉 {{Glossary("viewport")}}의 {{Glossary("bounding box")}} 처럼 취급되는 {{domxref("Element")}} 이나 {{domxref("Document")}} 를 식별합니다. 만일 root가 null 이라면 화면 경계는 실제 document viewport가 사용됩니다.

- -

문법

- -
var root = intersectionObserver.root;
-
- -

Value

- -

{{domxref("Element")}} 이나 {{domxref("Document")}} 객체로, 해당 객체의 bounding box는 observer에 의해 관찰되는 대상 요소가 화면상에 얼마나 보여지는가를 가늠할 뷰포트의 경계로 사용됩니다.

- -

사각형 경계의 교차성, {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 객체 생성시에 설정된 임의의 margin에 의한 offset, 대상 요소의 경계에서 타겟 요소와 겹쳐진 모든 요소나 다른 객체의 경계를 제외한 것이 대상 요소의 가시성 계산에 고려됩니다.

- -

만일 root 가 null이라면 현재 document가 root로 사용되며, 그것의 viewport의 경계(즉 document의 노출 영역)가 root 의 경계로 사용됩니다.

- -

사용예

- -

이 예제는 intersection observer의 root 요소의 {{cssxref("border")}}를 2픽셀 너비의 녹색 라인으로 설정합니다.

- -
observer.root.style.border = "2px solid #44aa44";
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Initial definition
- -

Browser compatibility

- -

{{Compat("api.IntersectionObserver.root")}}

- -

See also

- - diff --git a/files/ko/web/api/intersectionobserver/root/index.md b/files/ko/web/api/intersectionobserver/root/index.md new file mode 100644 index 0000000000..ad74686576 --- /dev/null +++ b/files/ko/web/api/intersectionobserver/root/index.md @@ -0,0 +1,55 @@ +--- +title: IntersectionObserver.root +slug: Web/API/IntersectionObserver/root +translation_of: Web/API/IntersectionObserver/root +--- +
{{APIRef("Intersection Observer API")}}
+ +

{{domxref("IntersectionObserver")}} 인터페이스의 read-only 속성인 root는 옵저버의 타겟 엘리먼트가 속한 화면의 경계, 즉 {{Glossary("viewport")}}의 {{Glossary("bounding box")}} 처럼 취급되는 {{domxref("Element")}} 이나 {{domxref("Document")}} 를 식별합니다. 만일 root가 null 이라면 화면 경계는 실제 document viewport가 사용됩니다.

+ +

문법

+ +
var root = intersectionObserver.root;
+
+ +

Value

+ +

{{domxref("Element")}} 이나 {{domxref("Document")}} 객체로, 해당 객체의 bounding box는 observer에 의해 관찰되는 대상 요소가 화면상에 얼마나 보여지는가를 가늠할 뷰포트의 경계로 사용됩니다.

+ +

사각형 경계의 교차성, {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 객체 생성시에 설정된 임의의 margin에 의한 offset, 대상 요소의 경계에서 타겟 요소와 겹쳐진 모든 요소나 다른 객체의 경계를 제외한 것이 대상 요소의 가시성 계산에 고려됩니다.

+ +

만일 root 가 null이라면 현재 document가 root로 사용되며, 그것의 viewport의 경계(즉 document의 노출 영역)가 root 의 경계로 사용됩니다.

+ +

사용예

+ +

이 예제는 intersection observer의 root 요소의 {{cssxref("border")}}를 2픽셀 너비의 녹색 라인으로 설정합니다.

+ +
observer.root.style.border = "2px solid #44aa44";
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.IntersectionObserver.root")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf