JS \ucf54\ub4dc\uc5d0\uc11c \uc5b4\ub5a4 \uac12\uc744 \uc815\ud574\uc11c CSS\uc5d0 \uc804\ub2ec\ud574\uc11c CSS\ub97c \ud1b5\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc815\uc758\ud560 \ub54c \uc804\ub2ec\ubc1b\uc740 \uac12\uc744 \uc0ac\uc6a9\ud558\ub294 \ub0b4\uc6a9\uc785\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800 JS\uc5d0\uc11c \uac12\uc744 \uc804\ub2ec\ud558\uae30 \uc704\ud574\uc11c\ub294 \ud2b9\uc815 DOM\uc5d0 \ub300\ud55c style\uc5d0 \uc18d\uc131(Property)\ub97c \uc124\uc815\ud574 \uc8fc\uba74 \ub418\ub294\ub370\uc694. \uc608\ub97c \ub4e4\uc5b4\uc11c –x\uc640 –y\ub77c\ub294 \uc18d\uc131\uc744 \uc124\uc815\ud574 \uc8fc\ub294 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nconst pos = document.documentElement\r\npos.addEventListener(\"mousemove\", e => {\r\n pos.style.setProperty(\"--x\", e.clientX + \"px\")\r\n pos.style.setProperty(\"--y\", e.clientY + \"px\")\r\n})\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub294 document\uc5d0 \ud574\ub2f9\ud558\ub294 DOM\uc758 \uc2a4\ud0c0\uc77c\uc5d0 \ub300\ud55c \uc18d\uc131(–x, –y)\ub97c \uc124\uc815\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc880\ub354 \uc790\uc138\ud788 \uc124\uba85\ub4dc\ub9ac\uba74 \ub9c8\uc6b0\uc2a4 \ucee4\uc11c\uc758 \uc704\uce58 \uac12\uc73c\ub85c \uc124\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ubc18\ub4dc\uc2dc document\uc758 \uc2a4\ud0c0\uc77c \uc18d\uc131\uc73c\ub85c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\uc774\ub807\uac8c JS\uc5d0\uc11c \uc124\uc815\ud55c \uac12\uc744 CSS\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n.banner {\r\n clip-path: circle(15vh at var(--x) var(--y));\r\n}\r\n<\/pre>\n\ud575\uc2ec\uc740 var\uc774\ub77c\ub294 \uba85\ub839\uc744 \ud1b5\ud574 JS\ub97c \ud1b5\ud574 \uc124\uc815\ud588\ub358 –x\uc640 –y\uc758 \uac12\uc744 \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
\uc704\uc758 \ucf54\ub4dc\ub97c \ud65c\uc6a9\ud55c \uc608\uc81c\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Document<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Gill Sans';\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n background: #111;\r\n user-select: none;\r\n }\r\n\r\n .banner {\r\n position: fixed;\r\n width: 100%;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: #fff;\r\n z-index: 1;\r\n \/* clip-path: circle(15vh at center center); *\/\r\n clip-path: circle(15vh at var(--x) var(--y));\r\n transition: all .1s linear;\r\n }\r\n\r\n .banner h2 {\r\n \/* position: relative; *\/\r\n color: transparent;\r\n -webkit-text-stroke: 4px #333;\r\n font-size: 25vh;\r\n pointer-events: none;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n }\r\n\r\n .content h2 {\r\n color: transparent;\r\n -webkit-text-stroke: 4px #333;\r\n font-size: 25vh;\r\n pointer-events: none;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"banner\">\r\n <h2>GIS DEVELOPER<\/h2>\r\n <\/section>\r\n <section class=\"content\">\r\n <h2>GIS DEVELOPER<\/h2>\r\n <\/section>\r\n\r\n <script>\r\n const pos = document.documentElement\r\n pos.addEventListener(\"mousemove\", e => {\r\n pos.style.setProperty(\"--x\", e.clientX + \"px\")\r\n pos.style.setProperty(\"--y\", e.clientY + \"px\")\r\n })\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n