{"id":858,"date":"2026-06-26T13:39:03","date_gmt":"2026-06-26T13:39:03","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=858"},"modified":"2026-06-26T13:39:03","modified_gmt":"2026-06-26T13:39:03","slug":"skillbar","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=858","title":{"rendered":"\uc2a4\ud0ac\ubc14 UI"},"content":{"rendered":"

\uc2a4\ud0ac\ubc14 UI<\/h1>\n

\uc2a4\ud0ac\ubc14\ub294 \ud3ec\ud2b8\ud3f4\ub9ac\uc624 \uc0ac\uc774\ud2b8\uc5d0\uc11c \uae30\uc220 \uc219\ub828\ub3c4\ub97c \uc2dc\uac01\uc801\uc73c\ub85c \ubcf4\uc5ec\uc8fc\ub294 UI \uc694\uc18c\uc774\ub2e4. \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \ub9c9\ub300\ub098 \uc6d0\uc774 \ucc44\uc6cc\uc9c0\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud55c\ub2e4.<\/p>\n

\n

1. \ub9c9\ub300\ud615 \uc2a4\ud0ac\ubc14<\/h2>\n

\uc2a4\ud06c\ub864\uc774 \ud2b9\uc815 \uc704\uce58\uc5d0 \ub3c4\ub2ec\ud558\uba74 \ub9c9\ub300\uac00 \ub298\uc5b4\ub098\uba74\uc11c \ud37c\uc13c\ud2b8 \uc22b\uc790\uac00 \uc62c\ub77c\uac00\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774\ub2e4.<\/p>\n

\n

Note<\/strong>: jQuery 3 \uae30\ubc18\uc758 \ub9c9\ub300\ud615 \uc2a4\ud0ac\ubc14\ub97c \ub9cc\ub4e4\uc5b4\uc918. \uc870\uac74\uc740 \ub2e4\uc74c\uacfc \uac19\uc544. 1) \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 3\uac1c\ub97c \uc138\ub85c\ub85c \ubc30\uce58\ud558\uace0, \uac01\uac01 \ubaa9\ud45c \ud37c\uc13c\ud2b8\ub97c data-rate \uc18d\uc131\uc73c\ub85c \uc9c0\uc815\ud55c\ub2e4(30%, 90%, 60%). 2) \uc2a4\ud06c\ub864\uc774 \uc560\ub2c8\uba54\uc774\uc158 \uc601\uc5ed\uc5d0 \ub3c4\ub2ec\ud558\uba74 \ub9c9\ub300\uc758 width\uac00 0%\uc5d0\uc11c \ubaa9\ud45c \ud37c\uc13c\ud2b8\uae4c\uc9c0 2500ms \ub3d9\uc548 \ub298\uc5b4\ub09c\ub2e4. 3) \ub3d9\uc2dc\uc5d0 \ud37c\uc13c\ud2b8 \uc22b\uc790\uac00 0\ubd80\ud130 \ubaa9\ud45c\uac12\uae4c\uc9c0 \uce74\uc6b4\ud2b8\uc5c5\ub41c\ub2e4. 4) \uc560\ub2c8\uba54\uc774\uc158\uc740 1\ud68c\ub9cc \uc2e4\ud589\ub41c\ub2e4. 5) \uc774\ubca4\ud2b8 \ubc14\uc778\ub529\uc740 .on('scroll')\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<\/blockquote>\n

HTML<\/h4>\n
<div class="content">contents<\/div>\n<div class="animation">\n  <div class="progress-bar">\n    <div class="bar"><\/div>\n    <div class="rate" data-rate="30"><\/div>\n  <\/div>\n  <div class="progress-bar">\n    <div class="bar"><\/div>\n    <div class="rate" data-rate="90"><\/div>\n  <\/div>\n  <div class="progress-bar">\n    <div class="bar"><\/div>\n    <div class="rate" data-rate="60"><\/div>\n  <\/div>\n<\/div>\n<div class="content">contents<\/div>\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
\uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\n\uc2a4\ud06c\ub864 \ud655\uc778\uc6a9 \ucf58\ud150\uce20 \uc601\uc5ed\uc774\ub2e4<\/td>\n<\/tr>\n
2<\/td>\n\uc560\ub2c8\uba54\uc774\uc158 \uc601\uc5ed\uc758 \uc2dc\uc791\uc774\ub2e4. \uc774 \uc694\uc18c\uc758 \uc704\uce58\ub97c \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uac10\uc9c0\ud55c\ub2e4<\/td>\n<\/tr>\n
3<\/td>\n\ud558\ub098\uc758 \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 \ubb36\uc74c\uc774\ub2e4<\/td>\n<\/tr>\n
4<\/td>\n\uc2e4\uc81c\ub85c \ub298\uc5b4\ub098\ub294 \uc0c9\uc0c1 \ub9c9\ub300\uc774\ub2e4<\/td>\n<\/tr>\n
5<\/td>\n\ud37c\uc13c\ud2b8 \uc22b\uc790\ub97c \ud45c\uc2dc\ud558\ub294 \uc601\uc5ed\uc774\ub2e4. data-rate<\/code>\uc5d0 \ubaa9\ud45c \ud37c\uc13c\ud2b8 \uac12\uc744 \uc9c0\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
CSS<\/h4>\n
.progress-bar {\n  position: relative;\n  width: 960px;\n  height: 30px;\n  margin: 3em auto;\n  border: 1px solid green;\n}\n.progress-bar .bar {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  background: green;\n}\n.progress-bar .rate {\n  position: absolute;\n  top: 0;\n  right: 15px;\n  bottom: 0;\n  line-height: 30px;\n  font-size: 1.2em;\n  color: green;\n}\n.content {\n  height: 800px;\n  font-size: 3em;\n}\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
\uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
1~7<\/td>\n.progress-bar<\/code>\ub97c position: relative<\/code>\ub85c \uc124\uc815\ud558\uc5ec \ub0b4\ubd80 \uc694\uc18c\uc758 \uae30\uc900\uc810\uc73c\ub85c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
8~15<\/td>\n.bar<\/code>\ub294 position: absolute<\/code>\ub85c \uc67c\ucabd\uc5d0 \ubd99\uc774\uace0, width: 0<\/code>\uc73c\ub85c \uc2dc\uc791\ud55c\ub2e4. jQuery\uac00 \uc774 \uac12\uc744 \ub298\ub9b0\ub2e4<\/td>\n<\/tr>\n
16~24<\/td>\n.rate<\/code>\ub294 \uc624\ub978\ucabd\uc5d0 \ubc30\uce58\ud558\uc5ec \ud37c\uc13c\ud2b8 \ud14d\uc2a4\ud2b8\ub97c \ud45c\uc2dc\ud55c\ub2e4. line-height<\/code>\ub85c \uc218\uc9c1 \uc911\uc559 \uc815\ub82c\ud55c\ub2e4<\/td>\n<\/tr>\n
25~28<\/td>\n.content<\/code>\uc5d0 height: 800px<\/code>\uc744 \uc8fc\uc5b4 \uc2a4\ud06c\ub864 \uacf5\uac04\uc744 \ud655\ubcf4\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
JS<\/h4>\n
$(function () {\n  var wrap = $('.progress-bar');\n  var ost = $('.animation').offset().top - 600;\n  var isAni = false;\n\n  $(window).on('scroll', function () {\n    if ($(window).scrollTop() >= ost && !isAni) {\n      runAnimation();\n    }\n  });\n\n  function runAnimation() {\n    wrap.each(function () {\n      var $this = $(this);\n      var bar = $this.find('.bar');\n      var txt = $this.find('.rate');\n      var rate = txt.attr('data-rate');\n\n      bar.animate({ width: rate + '%' }, 2500);\n\n      $({ rate: 0 }).animate(\n        { rate: rate },\n        {\n          duration: 2000,\n          progress: function () {\n            var now = this.rate;\n            txt.text(Math.floor(now) + '%');\n          },\n          complete: function () {\n            isAni = true;\n          },\n        }\n      );\n    });\n  }\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\n$(function(){})<\/code> \u2014 \ubb38\uc11c\uac00 \uc900\ube44\ub418\uba74 \uc2e4\ud589\ud558\ub294 jQuery \ub2e8\ucd95 \ubb38\ubc95\uc774\ub2e4<\/td>\n<\/tr>\n
2<\/td>\n\ubaa8\ub4e0 .progress-bar<\/code> \uc694\uc18c\ub97c \uc120\ud0dd\ud558\uc5ec wrap<\/code>\uc5d0 \uc800\uc7a5\ud55c\ub2e4<\/td>\n<\/tr>\n
3<\/td>\n.animation<\/code> \uc601\uc5ed\uc758 \uc0c1\ub2e8 \uc704\uce58\uc5d0\uc11c 600px\uc744 \ube80 \uac12\uc744 \ud2b8\ub9ac\uac70 \uc9c0\uc810\uc73c\ub85c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
4<\/td>\nisAni<\/code> \u2014 \uc560\ub2c8\uba54\uc774\uc158 \uc2e4\ud589 \uc5ec\ubd80\ub97c \ucd94\uc801\ud558\ub294 \ud50c\ub798\uadf8 \ubcc0\uc218\uc774\ub2e4<\/td>\n<\/tr>\n
6~10<\/td>\n.on('scroll')<\/code> \u2014 \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8\ub97c \ub4f1\ub85d\ud55c\ub2e4. \ud604\uc7ac \uc704\uce58\uac00 \ud2b8\ub9ac\uac70 \uc9c0\uc810 \uc774\uc0c1\uc774\uace0 \uc544\uc9c1 \uc2e4\ud589 \uc804\uc774\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2dc\uc791\ud55c\ub2e4<\/td>\n<\/tr>\n
13<\/td>\n.each()<\/code> \u2014 \uac01 .progress-bar<\/code>\ub97c \uc21c\ud68c\ud558\uba70 \uac1c\ubcc4 \ucc98\ub9ac\ud55c\ub2e4<\/td>\n<\/tr>\n
17<\/td>\ndata-rate<\/code> \uc18d\uc131\uc5d0\uc11c \ubaa9\ud45c \ud37c\uc13c\ud2b8 \uac12\uc744 \uc77d\ub294\ub2e4<\/td>\n<\/tr>\n
19<\/td>\n.bar<\/code>\uc758 width<\/code>\ub97c \ubaa9\ud45c \ud37c\uc13c\ud2b8\uae4c\uc9c0 2500ms \ub3d9\uc548 \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4<\/td>\n<\/tr>\n
21~33<\/td>\n\uac00\uc0c1 \uac1d\uccb4 { rate: 0 }<\/code>\uc744 \ub9cc\ub4e4\uc5b4 \uc22b\uc790\ub97c 0\ubd80\ud130 \ubaa9\ud45c\uac12\uae4c\uc9c0 \uc99d\uac00\uc2dc\ud0a8\ub2e4<\/td>\n<\/tr>\n
25~27<\/td>\nprogress<\/code> \u2014 \ub9e4 \ud504\ub808\uc784\ub9c8\ub2e4 \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc774\ub2e4. \ud604\uc7ac \uac12\uc744 \ub0b4\ub9bc \ucc98\ub9ac\ud558\uc5ec \ud14d\uc2a4\ud2b8\ub85c \ud45c\uc2dc\ud55c\ub2e4<\/td>\n<\/tr>\n
29~31<\/td>\ncomplete<\/code> \u2014 \uc644\ub8cc \uc2dc isAni<\/code>\ub97c true<\/code>\ub85c \ubc14\uafd4 \uc7ac\uc2e4\ud589\uc744 \ubc29\uc9c0\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\n`.animate()`\ub294 CSS \uc18d\uc131 \uac12\uc744 \uc9c0\uc815\ud55c \uc2dc\uac04 \ub3d9\uc548 \uc11c\uc11c\ud788 \ubcc0\uacbd\ud558\ub294 jQuery \uba54\uc11c\ub4dc\uc774\ub2e4.<\/p>\n
$('\uc120\ud0dd\uc790').animate({ \uc18d\uc131: \uac12 }, \uc2dc\uac04);\n<\/code><\/pre>\n\n\n\n\n\n
\uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\n\uccab \ubc88\uc9f8 \uc778\uc790\ub294 \ubcc0\uacbd\ud560 CSS \uc18d\uc131\uacfc \ubaa9\ud45c \uac12\uc774\ub2e4. \ub450 \ubc88\uc9f8 \uc778\uc790\ub294 \ubc00\ub9ac\ucd08 \ub2e8\uc704\uc758 \uc18c\uc694 \uc2dc\uac04\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\uc22b\uc790 \uac12\uc744 \uac00\uc9c4 CSS \uc18d\uc131(width<\/code>, height<\/code>, opacity<\/code> \ub4f1)\ub9cc \uc560\ub2c8\uba54\uc774\uc158\ud560 \uc218 \uc788\ub2e4.
\n<\/Accordion><\/p>\n
\n
1.1. \uc6d0\ud615 \uc2a4\ud0ac\ubc14<\/h2>\n
SVG\uc758 circle<\/code> \uc694\uc18c\uc640 stroke-dashoffset<\/code> \uc18d\uc131\uc744 \ud65c\uc6a9\ud55c \uc6d0\ud615 \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14\uc774\ub2e4.<\/p>\n
\n
Note<\/strong>: jQuery 3 \uae30\ubc18\uc758 \uc6d0\ud615 \uc2a4\ud0ac\ubc14\ub97c \ub9cc\ub4e4\uc5b4\uc918. \uc870\uac74\uc740 \ub2e4\uc74c\uacfc \uac19\uc544. 1) SVG circle \uc694\uc18c(\ubc18\uc9c0\ub984 100, \ub458\ub808 628)\ub97c \uc0ac\uc6a9\ud55c \uc6d0\ud615 \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 4\uac1c\ub97c \uac00\ub85c\ub85c \ubc30\uce58\ud55c\ub2e4. 2) \uac01 \uc6d0\uc758 \uc911\uc559\uc5d0 \ud37c\uc13c\ud2b8 \uc22b\uc790\ub97c \ud45c\uc2dc\ud558\uace0, data-num \uc18d\uc131\uc73c\ub85c \ubaa9\ud45c\uac12\uc744 \uc9c0\uc815\ud55c\ub2e4(20, 60, 80, 50). 3) stroke-dasharray\uc640 stroke-dashoffset\uc744 628\ub85c \uc124\uc815\ud558\uace0, \uc2a4\ud06c\ub864 \uc2dc dashoffset\uc744 \uc904\uc5ec\uc11c \uc120\uc774 \uadf8\ub824\uc9c0\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud55c\ub2e4. 4) 12\uc2dc \ubc29\ud5a5\ubd80\ud130 \uc2dc\uc791\ud558\ub3c4\ub85d rotate(-90deg)\ub97c \uc801\uc6a9\ud55c\ub2e4. 5) \uac01 \uc6d0\ub9c8\ub2e4 \ub2e4\ub978 stroke \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud55c\ub2e4. 6) hasClass\ub85c \uc911\ubcf5 \uc2e4\ud589\uc744 \ubc29\uc9c0\ud55c\ub2e4. 7) \uc774\ubca4\ud2b8 \ubc14\uc778\ub529\uc740 .on('scroll')\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<\/blockquote>\n
HTML<\/h4>\n
<section>\n  <h2>content<\/h2>\n<\/section>\n<div class="charts">\n  <div class="chart">\n    <h2 data-num="20">0<\/h2>\n    <svg>\n      <circle cx="110" cy="110" r="100"><\/circle>\n    <\/svg>\n  <\/div>\n  <div class="chart">\n    <h2 data-num="60">0<\/h2>\n    <svg>\n      <circle cx="110" cy="110" r="100"><\/circle>\n    <\/svg>\n  <\/div>\n  <div class="chart">\n    <h2 data-num="80">0<\/h2>\n    <svg>\n      <circle cx="110" cy="110" r="100"><\/circle>\n    <\/svg>\n  <\/div>\n  <div class="chart">\n    <h2 data-num="50">0<\/h2>\n    <svg>\n      <circle cx="110" cy="110" r="100"><\/circle>\n    <\/svg>\n  <\/div>\n<\/div>\n<section>\n  <h2>content<\/h2>\n<\/section>\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
\uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
1~3<\/td>\n\uc2a4\ud06c\ub864 \uacf5\uac04 \ud655\ubcf4\uc6a9 \uc139\uc158\uc774\ub2e4<\/td>\n<\/tr>\n
4<\/td>\n.charts<\/code> \u2014 \uc6d0\ud615 \ucc28\ud2b8\ub4e4\uc744 \uac10\uc2f8\ub294 \ucee8\ud14c\uc774\ub108\uc774\ub2e4<\/td>\n<\/tr>\n
6<\/td>\ndata-num="20"<\/code> \u2014 \ubaa9\ud45c \ud37c\uc13c\ud2b8 \uac12\uc774\ub2e4. \ucd08\uae30 \ud14d\uc2a4\ud2b8\ub294 0<\/code>\uc774\ub2e4<\/td>\n<\/tr>\n
8<\/td>\ncircle<\/code> \u2014 SVG \uc6d0 \uc694\uc18c\uc774\ub2e4. cx<\/code>, cy<\/code>\ub294 \uc911\uc2ec \uc88c\ud45c, r<\/code>\uc740 \ubc18\uc9c0\ub984\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
CSS<\/h4>\n
.charts {\n  width: 80%;\n  margin: 3rem auto;\n  display: flex;\n  justify-content: center;\n}\n.charts .chart {\n  margin: 0 20px;\n  position: relative;\n}\n.charts .chart h2 {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n}\n.charts .chart svg {\n  width: 220px;\n  height: 220px;\n}\ncircle {\n  fill: #ffffff;\n  stroke-width: 20;\n  stroke-dasharray: 628;\n  stroke-dashoffset: 628;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  stroke-linecap: round;\n}\n.charts .chart:nth-child(1) circle { stroke: #ffc114; }\n.charts .chart:nth-child(2) circle { stroke: #ff5248; }\n.charts .chart:nth-child(3) circle { stroke: #19cdca; }\n.charts .chart:nth-child(4) circle { stroke: #4e88e1; }\nsection {\n  height: 100vh;\n}\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
\uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
1~6<\/td>\nflexbox\ub85c \uc6d0\ud615 \ucc28\ud2b8\ub4e4\uc744 \uac00\ub85c\ub85c \ub098\ub780\ud788 \ubc30\uce58\ud55c\ub2e4<\/td>\n<\/tr>\n
11~17<\/td>\nh2<\/code>\ub97c absolute<\/code> + translate<\/code>\ub85c \uc6d0\uc758 \uc815\uc911\uc559\uc5d0 \ubc30\uce58\ud55c\ub2e4<\/td>\n<\/tr>\n
22~30<\/td>\nstroke-dasharray: 628<\/code>\uc740 \uc6d0 \ub458\ub808(2\u03c0r = 2 \u00d7 3.14 \u00d7 100 \u2248 628)\uc640 \uac19\ub2e4. stroke-dashoffset: 628<\/code>\uc774\uba74 \uc120\uc774 \uc644\uc804\ud788 \uc228\uaca8\uc9c4 \uc0c1\ud0dc\uc774\ub2e4<\/td>\n<\/tr>\n
27<\/td>\nrotate(-90deg)<\/code> \u2014 12\uc2dc \ubc29\ud5a5\ubd80\ud130 \uc2dc\uc791\ud558\ub3c4\ub85d \ud68c\uc804\ud55c\ub2e4<\/td>\n<\/tr>\n
31~34<\/td>\n\uac01 \ucc28\ud2b8\ub9c8\ub2e4 \ub2e4\ub978 \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
JS<\/h4>\n
$(function () {\n  var charts = $('.charts');\n  var chart = $('.chart');\n  var ost = chart.offset().top - 700;\n\n  $(window).on('scroll', function () {\n    var sct = $(this).scrollTop();\n    if (sct >= ost) {\n      if (!charts.hasClass('active')) {\n        animateChart();\n        charts.addClass('active');\n      }\n    }\n  });\n\n  function animateChart() {\n    chart.each(function () {\n      var item = $(this);\n      var title = item.find('h2');\n      var num = title.attr('data-num');\n      var circle = item.find('circle');\n\n      $({ rate: 0 }).animate(\n        { rate: num },\n        {\n          duration: 1500,\n          progress: function () {\n            var now = this.rate;\n            var offset = 630 - (630 * now) \/ 100;\n            title.text(Math.floor(now));\n            circle.css({ strokeDashoffset: offset });\n          },\n        }\n      );\n    });\n  }\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n\n
\uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
4<\/td>\n.chart<\/code>\uc758 \uc0c1\ub2e8 \uc704\uce58\uc5d0\uc11c 700px\uc744 \ube80 \uac12\uc744 \ud2b8\ub9ac\uac70 \uc9c0\uc810\uc73c\ub85c \uc124\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n
9<\/td>\n.hasClass('active')<\/code> \u2014 active<\/code> \ud074\ub798\uc2a4 \uc720\ubb34\ub85c \uc911\ubcf5 \uc2e4\ud589\uc744 \ubc29\uc9c0\ud55c\ub2e4<\/td>\n<\/tr>\n
11<\/td>\n\uc560\ub2c8\uba54\uc774\uc158 \uc2e4\ud589 \ud6c4 active<\/code> \ud074\ub798\uc2a4\ub97c \ucd94\uac00\ud55c\ub2e4<\/td>\n<\/tr>\n
23~33<\/td>\n\uac00\uc0c1 \uac1d\uccb4\uc758 rate<\/code>\ub97c 0\ubd80\ud130 \ubaa9\ud45c\uac12\uae4c\uc9c0 1500ms \ub3d9\uc548 \ubcc0\ud654\uc2dc\ud0a8\ub2e4<\/td>\n<\/tr>\n
29<\/td>\nstroke-dashoffset<\/code> \uacc4\uc0b0\uc2dd: 630(\uc804\uccb4 \ub458\ub808)\uc5d0\uc11c \uc9c4\ud589\ub960\ub9cc\ud07c \ube80\ub2e4. \uac12\uc774 \uc904\uc5b4\ub4e4\uc218\ub85d \uc120\uc774 \ub4dc\ub7ec\ub09c\ub2e4<\/td>\n<\/tr>\n
30<\/td>\n\ud604\uc7ac \uc22b\uc790\ub97c \uc815\uc218\ub85c \ubcc0\ud658\ud558\uc5ec \uc911\uc559 \ud14d\uc2a4\ud2b8\ub97c \uac31\uc2e0\ud55c\ub2e4<\/td>\n<\/tr>\n
31<\/td>\n\uacc4\uc0b0\ub41c offset<\/code> \uac12\uc744 circle<\/code>\uc758 strokeDashoffset<\/code>\uc5d0 \ubc18\uc601\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\nSVG \uc120 \uc560\ub2c8\uba54\uc774\uc158\uc758 \ud575\uc2ec \uc18d\uc131 2\uac00\uc9c0\uc774\ub2e4.<\/p>\n
    \n
  • stroke-dasharray<\/code> \u2014 \uc810\uc120 \ud328\ud134\uc758 \uae38\uc774\ub97c \uc9c0\uc815\ud55c\ub2e4. \uc6d0 \ub458\ub808(628)\uc640 \uac19\uc740 \uac12\uc744 \uc8fc\uba74 \ud558\ub098\uc758 \uae34 \uc120\uc774 \ub41c\ub2e4<\/li>\n
  • stroke-dashoffset<\/code> \u2014 \uc810\uc120\uc758 \uc2dc\uc791 \uc704\uce58\ub97c \ubc00\uc5b4\ub0b8\ub2e4. 628\uc774\uba74 \uc120\uc774 \ubcf4\uc774\uc9c0 \uc54a\uace0, 0\uc774\uba74 \uc644\uc804\ud788 \ubcf4\uc778\ub2e4<\/li>\n<\/ul>\n
    \uc774 \ub450 \uc18d\uc131\uc758 \uc870\ud569\uc73c\ub85c "\uc120\uc774 \uadf8\ub824\uc9c0\ub294" \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud55c\ub2e4.
    \n<\/Accordion><\/p>\n
    \n
    1.2. SVG \ub77c\uc778\ud615 \uc2a4\ud0ac\ubc14<\/h2>\n
    circle<\/code> \ub300\uc2e0 line<\/code> \uc694\uc18c\ub97c \uc0ac\uc6a9\ud55c \uc9c1\uc120\ud615 \ubcc0\ud615\uc774\ub2e4.<\/p>\n
    \n
    Note<\/strong>: jQuery 3 \uae30\ubc18\uc758 SVG \ub77c\uc778\ud615 \uc2a4\ud0ac\ubc14\ub97c \ub9cc\ub4e4\uc5b4\uc918. \uc870\uac74\uc740 \ub2e4\uc74c\uacfc \uac19\uc544. 1) SVG line \uc694\uc18c(x1=0, y1=0, x2=500, y2=0)\ub97c \uc0ac\uc6a9\ud55c \uc9c1\uc120\ud615 \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 3\uac1c\ub97c \uac00\ub85c\ub85c \ubc30\uce58\ud55c\ub2e4. 2) stroke-dasharray\uc640 stroke-dashoffset\uc744 300\uc73c\ub85c \uc124\uc815\ud558\uace0, \uc2a4\ud06c\ub864 \uc2dc dashoffset\uc744 \uc904\uc5ec\uc11c \uc120\uc774 \uadf8\ub824\uc9c0\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud55c\ub2e4. 3) \uac01 \ub77c\uc778 \uc911\uc559\uc5d0 \ud37c\uc13c\ud2b8 \uc22b\uc790 \uce74\uc6b4\ud2b8\uc5c5\uc744 \ud45c\uc2dc\ud55c\ub2e4. 4) \uac01 \ub77c\uc778\ub9c8\ub2e4 \ub2e4\ub978 stroke \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud55c\ub2e4. 5) hasClass\ub85c \uc911\ubcf5 \uc2e4\ud589\uc744 \ubc29\uc9c0\ud55c\ub2e4. 6) $(function(){})\ub85c \uac10\uc2f8\uace0, \uc774\ubca4\ud2b8 \ubc14\uc778\ub529\uc740 .on('scroll')\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n<\/blockquote>\n
    HTML<\/h4>\n
    <section>\n  <h2>content<\/h2>\n<\/section>\n<div class="charts">\n  <div class="chart">\n    <h2 data-num="20">0<\/h2>\n    <svg>\n      <line x1="0" y1="0" x2="500" y2="0"><\/line>\n    <\/svg>\n  <\/div>\n  <div class="chart">\n    <h2 data-num="20">0<\/h2>\n    <svg>\n      <line x1="0" y1="0" x2="500" y2="0"><\/line>\n    <\/svg>\n  <\/div>\n  <div class="chart">\n    <h2 data-num="80">0<\/h2>\n    <svg>\n      <line x1="0" y1="0" x2="500" y2="0"><\/line>\n    <\/svg>\n  <\/div>\n<\/div>\n<section>\n  <h2>content<\/h2>\n<\/section>\n<\/code><\/pre>\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    8<\/td>\nline<\/code> \uc694\uc18c\ub294 \uc2dc\uc791\uc810(x1<\/code>, y1<\/code>)\uc5d0\uc11c \ub05d\uc810(x2<\/code>, y2<\/code>)\uae4c\uc9c0 \uc9c1\uc120\uc744 \uadf8\ub9b0\ub2e4<\/td>\n<\/tr>\n
    6<\/td>\ndata-num<\/code> \u2014 \ubaa9\ud45c \ud37c\uc13c\ud2b8 \uac12\uc774\ub2e4. circle<\/code> \uc608\uc81c\uc640 \ub3d9\uc77c\ud55c \ubc29\uc2dd\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    CSS<\/h4>\n
    .charts {\n  width: 80%;\n  margin: 3rem auto;\n  display: flex;\n  justify-content: center;\n}\n.charts .chart {\n  margin: 0 20px;\n  position: relative;\n}\n.charts .chart h2 {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  margin: 0;\n}\nline {\n  stroke-width: 20;\n  stroke-dasharray: 300;\n  stroke-dashoffset: 300;\n}\n.charts .chart:nth-child(1) line { stroke: #ffc114; }\n.charts .chart:nth-child(2) line { stroke: #ff5248; }\n.charts .chart:nth-child(3) line { stroke: #19cdca; }\nsection {\n  height: 100vh;\n}\n<\/code><\/pre>\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    18~22<\/td>\nstroke-dasharray<\/code>\uc640 stroke-dashoffset<\/code>\uc744 300<\/code>\uc73c\ub85c \uc124\uc815\ud55c\ub2e4. \uc6d0\ud615\uacfc \uac19\uc740 \uc6d0\ub9ac\uc774\uc9c0\ub9cc \uc9c1\uc120 \uae38\uc774\uc5d0 \ub9de\ucd98 \uac12\uc774\ub2e4<\/td>\n<\/tr>\n
    23~25<\/td>\n\uac01 \ub77c\uc778\ub9c8\ub2e4 \ub2e4\ub978 \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    JS<\/h4>\n
    $(function () {\n  var charts = $('.charts');\n  var chart = $('.chart');\n  var ost = chart.offset().top - 700;\n\n  $(window).on('scroll', function () {\n    var sct = $(this).scrollTop();\n    if (sct >= ost) {\n      if (!charts.hasClass('active')) {\n        animateChart();\n        charts.addClass('active');\n      }\n    }\n  });\n\n  function animateChart() {\n    chart.each(function () {\n      var item = $(this);\n      var title = item.find('h2');\n      var num = title.attr('data-num');\n      var el = item.find('line');\n\n      $({ rate: 0 }).animate(\n        { rate: num },\n        {\n          duration: 1500,\n          progress: function () {\n            var now = this.rate;\n            var offset = 300 - (300 * now) \/ 100;\n            title.text(Math.floor(now));\n            el.css({ strokeDashoffset: offset });\n          },\n        }\n      );\n    });\n  }\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n\uc6d0\ubcf8\uc5d0\ub294 $(function(){})<\/code>\uac00 \uc5c6\uc5c8\uc73c\ub098, DOM \uc548\uc804\uc744 \uc704\ud574 \uac10\uc2f8\ub294 \uac83\uc774 \uc62c\ubc14\ub974\ub2e4<\/td>\n<\/tr>\n
    21<\/td>\ncircle<\/code> \ub300\uc2e0 line<\/code> \uc694\uc18c\ub97c \ucc3e\ub294\ub2e4<\/td>\n<\/tr>\n
    29<\/td>\n\uacc4\uc0b0\uc2dd\uc758 \uae30\uc900\uac12\uc774 630<\/code>\uc774 \uc544\ub2cc 300<\/code>\uc774\ub2e4. stroke-dasharray<\/code> \uac12\uacfc \uc77c\uce58\uc2dc\ucf1c\uc57c \ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    Warning<\/strong>: \uc6d0\ubcf8 \ucf54\ub4dc\uc5d0\uc11c \ub77c\uc778\ud615(1.2)\uc758 JS\ub294 $(function(){})<\/code>\ub85c \uac10\uc2f8\uc838 \uc788\uc9c0 \uc54a\uc558\ub2e4. \ubb38\uc11c \ub85c\ub4dc \uc804\uc5d0 DOM \uc694\uc18c\ub97c \ucc3e\uc73c\uba74 undefined<\/code> \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c \ubc18\ub4dc\uc2dc \uac10\uc2f8\uc57c \ud55c\ub2e4.<\/p>\n<\/blockquote>\n
    \n
    2. GSAP\uc73c\ub85c \uc6d0\ud615 \uc2a4\ud0ac\ubc14 \ub9cc\ub4e4\uae30<\/h2>\n
    \n
    GSAP\uacfc ScrollTrigger\ub97c \uc0ac\uc6a9\ud558\uba74 jQuery \uc5c6\uc774\ub3c4 \uc2a4\ud0ac\ubc14 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n<\/blockquote>\n
    \n
    Note<\/strong>: GSAP\uacfc ScrollTrigger\ub85c \uc6d0\ud615 \uc2a4\ud0ac\ubc14\ub97c \ub9cc\ub4e4\uc5b4\uc918. \uc870\uac74\uc740 \ub2e4\uc74c\uacfc \uac19\uc544. 1) CSS conic-gradient\uc640 CSS \ubcc0\uc218 –p\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6d0\ud615 \uac8c\uc774\uc9c0\ub97c \uad6c\ud604\ud55c\ub2e4. 2) gsap.to\ub85c CSS \ubcc0\uc218 –p\ub97c 0\uc5d0\uc11c \ubaa9\ud45c \ud37c\uc13c\ud2b8\uae4c\uc9c0 4\ucd08 \ub3d9\uc548 \ubcc0\uacbd\ud558\uc5ec \uac8c\uc774\uc9c0\ub97c \ucc44\uc6b4\ub2e4. 3) ease\ub294 expo.out\uc744 \uc0ac\uc6a9\ud55c\ub2e4. 4) \uc6d0 \uc911\uc559\uc758 \uc22b\uc790\ub3c4 0\ubd80\ud130 \ubaa9\ud45c\uac12\uae4c\uc9c0 \uce74\uc6b4\ud2b8\uc5c5\ud558\ub418, modifiers \ud50c\ub7ec\uadf8\uc778\uc758 toFixed()\ub85c \uc18c\uc218\uc810\uc744 \uc81c\uac70\ud55c\ub2e4. 5) ScrollTrigger\uc758 toggleActions\ub97c play pause resume reset\uc73c\ub85c \uc124\uc815\ud558\uc5ec \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uc5b4\ud55c\ub2e4. 6) timeline\uc744 \uc0ac\uc6a9\ud558\uc5ec \uac8c\uc774\uc9c0 \ucc44\uc6b0\uae30\uc640 \uc22b\uc790 \uce74\uc6b4\ud2b8\ub97c \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ud55c\ub2e4.<\/p>\n<\/blockquote>\n
    2.1. CDN \ub85c\ub4dc<\/h3>\n
    <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js"><\/script>\n<script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js"><\/script>\n<\/code><\/pre>\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\nGSAP \ud575\uc2ec \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubd88\ub7ec\uc628\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\nScrollTrigger \ud50c\ub7ec\uadf8\uc778\uc744 \ubd88\ub7ec\uc628\ub2e4. \uc2a4\ud06c\ub864 \uc704\uce58 \uae30\ubc18 \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ud544\uc694\ud558\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    2.2. HTML \uad6c\uc870<\/h3>\n
    <div class="circular-pbar">\n  <span class="circular-pbar-counter">0<\/span>\n<\/div>\n<\/code><\/pre>\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n\uc6d0\ud615 \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14\uc758 \ucee8\ud14c\uc774\ub108\uc774\ub2e4. CSS\uc758 conic-gradient<\/code>\ub85c \uc6d0\ud615 \uac8c\uc774\uc9c0\ub97c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\n\uc911\uc559\uc5d0 \ud45c\uc2dc\ud560 \uc22b\uc790 \uc601\uc5ed\uc774\ub2e4. \ucd08\uae30\uac12\uc740 0<\/code>\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    2.3. \uae30\ubcf8 CSS<\/h3>\n
    .circular-pbar {\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background: conic-gradient(darkred 33%, 0, black);\n  position: relative;\n}\n.circular-pbar-counter {\n  position: absolute;\n  font-size: 3em;\n  color: white;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n<\/code><\/pre>\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    3<\/td>\nborder-radius: 50%<\/code>\ub85c \uc815\uc0ac\uac01\ud615\uc744 \uc6d0\uc73c\ub85c \ub9cc\ub4e0\ub2e4<\/td>\n<\/tr>\n
    5<\/td>\nconic-gradient<\/code> \u2014 \uc6d0\ubfd4\ud615 \uadf8\ub77c\ub514\uc5b8\ud2b8\uc774\ub2e4. darkred<\/code>\uac00 33% \uc9c0\uc810\uae4c\uc9c0 \ucc44\uc6cc\uc9c0\uace0 \ub098\uba38\uc9c0\ub294 black<\/code>\uc774\ub2e4<\/td>\n<\/tr>\n
    8~14<\/td>\n\uc22b\uc790\ub97c absolute<\/code> + translate<\/code>\ub85c \uc6d0\uc758 \uc815\uc911\uc559\uc5d0 \ubc30\uce58\ud55c\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    2.4. CSS \ubcc0\uc218\ub85c \uc560\ub2c8\uba54\uc774\uc158 \uc900\ube44<\/h3>\n
    \n
    Tip<\/strong>: .circular-pbar<\/code>\uc5d0 CSS \uc9c0\uc5ed\ubcc0\uc218 --p<\/code>\ub97c \uc120\uc5b8\ud558\uace0 0\uc744 \ud560\ub2f9\ud55c\ub2e4. \ubc30\uacbd\uc758 \uc0c9\uc0c1 \uc704\uce58\uc5d0 \uc774 \ubcc0\uc218\ub97c \ub123\uc73c\uba74 JS\uc5d0\uc11c \ubcc0\uc218 \uac12\ub9cc \ubc14\uafd4\ub3c4 \uac8c\uc774\uc9c0\uac00 \uc6c0\uc9c1\uc778\ub2e4.<\/p>\n<\/blockquote>\n
    .circular-pbar {\n  --p: 0;\n  background: conic-gradient(#df3030 var(--p, 0), 0, #cacaca);\n}\n<\/code><\/pre>\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    2<\/td>\n--p: 0<\/code> \u2014 CSS \uc0ac\uc6a9\uc790 \uc815\uc758 \uc18d\uc131\uc744 \uc120\uc5b8\ud558\uace0 \ucd08\uae30\uac12 0\uc744 \ub123\ub294\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\nvar(--p, 0)<\/code> \u2014 --p<\/code> \uac12\uc744 \uadf8\ub77c\ub514\uc5b8\ud2b8\uc758 \uc0c9\uc0c1 \uc704\uce58\ub85c \uc0ac\uc6a9\ud55c\ub2e4. GSAP\uc774 \uc774 \uac12\uc744 \ubcc0\uacbd\ud558\uba74 \uac8c\uc774\uc9c0\uac00 \ucc44\uc6cc\uc9c4\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    2.5. GSAP\uc73c\ub85c \uac8c\uc774\uc9c0 \uc560\ub2c8\uba54\uc774\uc158<\/h3>\n
    \n
    Note<\/strong>: gsap.to<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec CSS \ubcc0\uc218 --p<\/code>\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\uba74 \uc6d0\ud615 \uac8c\uc774\uc9c0\uac00 \ucc44\uc6cc\uc9c4\ub2e4.<\/p>\n<\/blockquote>\n
    gsap.to('.circular-pbar', {\n  '--p': '33%',\n  duration: 4,\n  ease: 'expo.out',\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\ngsap.to<\/code> \u2014 \ub300\uc0c1 \uc694\uc18c\ub97c \uc9c0\uc815\ud55c \uc18d\uc131 \uac12\uae4c\uc9c0 \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4<\/td>\n<\/tr>\n
    2<\/td>\n'--p': '33%'<\/code> \u2014 CSS \ubcc0\uc218 --p<\/code>\ub97c 0\uc5d0\uc11c 33%\uae4c\uc9c0 \ubcc0\uacbd\ud55c\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\nduration: 4<\/code> \u2014 4\ucd08 \ub3d9\uc548 \uc9c4\ud589\ud55c\ub2e4<\/td>\n<\/tr>\n
    4<\/td>\nease: 'expo.out'<\/code> \u2014 \ucc98\uc74c\uc5d0 \ube60\ub974\uace0 \ub05d\uc5d0\uc11c \ub290\ub824\uc9c0\ub294 \uac00\uc18d \uace1\uc120\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
    2.6. \uc22b\uc790 \uce74\uc6b4\ud2b8 + ScrollTrigger \uc801\uc6a9<\/h3>\n
    \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc22b\uc790\ub3c4 \ud568\uaed8 \uc62c\ub77c\uac00\ub3c4\ub85d \ud655\uc7a5\ud55c\ub2e4.<\/p>\n
    const circles = document.querySelectorAll('.circular-pbar');\n\ncircles.forEach((el) => {\n  const counter = el.querySelector('.circular-pbar-counter');\n  const tg = counter.textContent + '%';\n\n  const tm = gsap.timeline({\n    defaults: { duration: 4, ease: 'expo.out' },\n    scrollTrigger: {\n      trigger: el,\n      toggleActions: 'play pause resume reset',\n    },\n  });\n\n  tm.from(counter, {\n    textContent: 0,\n    modifiers: {\n      textContent: (textContent) => {\n        return textContent.toFixed();\n      },\n    },\n  });\n\n  tm.to(el, { '--p': tg }, 0);\n});\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n\n\n\n
    \uc904<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
    1<\/td>\n\ubaa8\ub4e0 .circular-pbar<\/code> \uc694\uc18c\ub97c \uc120\ud0dd\ud55c\ub2e4<\/td>\n<\/tr>\n
    3<\/td>\nforEach<\/code>\ub85c \uac01 \uc6d0\ud615 \ubc14\ub97c \uc21c\ud68c\ud55c\ub2e4<\/td>\n<\/tr>\n
    5<\/td>\ncounter \uc694\uc18c\uc758 \ud14d\uc2a4\ud2b8(\ubaa9\ud45c \ud37c\uc13c\ud2b8 \uac12)\ub97c \uc77d\uc5b4 '%'<\/code>\uc640 \uacb0\ud569\ud55c\ub2e4. \uc774 \uac12\uc740 CSS \ubcc0\uc218\ub85c \uc0ac\uc6a9\ub41c\ub2e4<\/td>\n<\/tr>\n
    7~8<\/td>\nGSAP timeline\uc744 \uc0dd\uc131\ud558\uace0 \uae30\ubcf8\uac12\uc73c\ub85c \uc9c0\uc18d \uc2dc\uac04 4\ucd08, \uac00\uc18d \uace1\uc120 expo.out<\/code>\uc744 \ud560\ub2f9\ud55c\ub2e4<\/td>\n<\/tr>\n
    9~12<\/td>\nScrollTrigger\ub97c \uc5f0\uacb0\ud55c\ub2e4. toggleActions<\/code>\ub294 \uc21c\uc11c\ub300\ub85c \uc9c4\uc785\/\uc774\ud0c8\/\uc7ac\uc9c4\uc785\/\uc7ac\uc774\ud0c8 \uc2dc \ub3d9\uc791\uc774\ub2e4<\/td>\n<\/tr>\n
    15~22<\/td>\ntm.from<\/code> \u2014 textContent<\/code>\ub97c 0\ubd80\ud130 \ubaa9\ud45c\uac12\uae4c\uc9c0 \uc560\ub2c8\uba54\uc774\uc158\ud55c\ub2e4<\/td>\n<\/tr>\n
    17~20<\/td>\nmodifiers<\/code> \u2014 \uc18d\uc131 \ubcc0\uacbd\uac12\uc744 \uc2e4\uc2dc\uac04\uc73c\ub85c \uac00\uacf5\ud558\ub294 GSAP \ub0b4\uc7a5 \ud50c\ub7ec\uadf8\uc778\uc774\ub2e4. .toFixed()<\/code>\ub85c \uc18c\uc218\uc810\uc744 \uc81c\uac70\ud55c\ub2e4<\/td>\n<\/tr>\n
    24<\/td>\ntm.to<\/code> \u2014 CSS \ubcc0\uc218 --p<\/code>\ub97c \ubaa9\ud45c\uac12\uae4c\uc9c0 \ubcc0\uacbd\ud55c\ub2e4. \uc138 \ubc88\uc9f8 \uc778\uc790 0<\/code>\uc740 timeline \uc2dc\uc791\uacfc \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ud55c\ub2e4\ub294 \uc758\ubbf8\uc774\ub2e4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \nmodifiers\ub294 GSAP\uc5d0 \uae30\ubcf8 \ub0b4\uc7a5\ub41c \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c, \uc560\ub2c8\uba54\uc774\uc158 \uc9c4\ud589 \uc911 \ud2b9\uc815 \uc18d\uc131\uc758 \uac12\uc744 \ub9e4 \ud504\ub808\uc784\ub9c8\ub2e4 \uac00\uacf5\ud560 \uc218 \uc788\ub2e4.<\/p>\n