{"id":14441,"date":"2024-01-19T11:50:21","date_gmt":"2024-01-19T02:50:21","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=14441"},"modified":"2024-01-19T11:54:16","modified_gmt":"2024-01-19T02:54:16","slug":"dom%ec%97%90-%eb%8c%80%ed%95%9c-%ed%91%9c%ec%8b%9c-%ec%97%ac%eb%b6%80-%ea%b0%90%ec%8b%9cintersectionobserver","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=14441","title":{"rendered":"DOM\uc5d0 \ub300\ud55c \ud45c\uc2dc \uc5ec\ubd80 \uac10\uc2dc(IntersectionObserver)"},"content":{"rendered":"<p>\uba3c\uc800 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"\btypescript\">\r\nimport '.\/style-intersectionObserver.css'\r\n\r\nconst divApp = document.querySelector(\"#app\")\r\n\r\nif(divApp) {\r\n  for(let i=0; i<20; i++) {\r\n    const div = document.createElement(\"div\")\r\n    div.innerHTML = (i+1).toString()\r\n    divApp.append(div)\r\n  }\r\n  \r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach((entry) => {\r\n      if(entry.isIntersecting) {\r\n        entry.target.classList.add(\"visible\")\r\n      } else {\r\n        entry.target.classList.remove(\"visible\")\r\n      }\r\n    })\r\n  }, {\r\n    threshold: 0\r\n  })\r\n\r\n  const divList = divApp.querySelectorAll(\"div\")\r\n  divList?.forEach((div) => observer.observe(div))\r\n}\r\n<\/pre>\n<p>\uc2a4\ud0c0\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"\b\bcss\">\r\nbody {\r\n  margin: 0;\r\n}\r\n\r\n#app {\r\n  overflow-y: auto;\r\n  position: fixed;\r\n  background-color: rgb(45, 46, 47);\r\n  background-image: \r\n    linear-gradient(to right, rgb(35, 36, 37) 1px, transparent 1px), \r\n    linear-gradient(to bottom, rgb(35, 36, 37) 1px, transparent 1px);\r\n  background-size: 32px 32px;\r\n\r\n  width: 100%;\r\n  height: 100vh;\r\n}\r\n\r\n#app div {\r\n  color: white;\r\n  font-size: 5rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 8px auto;\r\n  height: 160px;\r\n  width: 160px;\r\n  border-radius: 10%;\r\n  background-color: black;\r\n  border: 2.5px solid white;\r\n  transition: all 0.5s ease-in-out;\r\n  transform: rotate(-90deg) scale(0.1);\r\n  opacity: 0;\r\n}\r\n\r\n#app div.visible {\r\n  transform: rotate(0deg) scale(1);\r\n  opacity: 1;\r\n}\r\n<\/pre>\n<p>\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><center><video controls=\"controls\" width=\"800px\" ><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2024\/01\/intersectionObserver.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uba3c\uc800 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. import &#8216;.\/style-intersectionObserver.css&#8217; const divApp = document.querySelector(&#8220;#app&#8221;) if(divApp) { for(let i=0; i { entries.forEach((entry) => { if(entry.isIntersecting) { entry.target.classList.add(&#8220;visible&#8221;) } else { entry.target.classList.remove(&#8220;visible&#8221;) } }) }, { threshold: 0 }) const divList = divApp.querySelectorAll(&#8220;div&#8221;) divList?.forEach((div) => observer.observe(div)) } \uc2a4\ud0c0\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694. body { margin: 0; } #app { overflow-y: auto; position: fixed; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=14441\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;DOM\uc5d0 \ub300\ud55c \ud45c\uc2dc \uc5ec\ubd80 \uac10\uc2dc(IntersectionObserver)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,8],"tags":[],"class_list":["post-14441","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-programming"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14441"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14441\/revisions"}],"predecessor-version":[{"id":14449,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14441\/revisions\/14449"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14441"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}