{"id":20061,"date":"2021-11-24T14:22:17","date_gmt":"2021-11-24T05:22:17","guid":{"rendered":"http:\/\/13.125.82.244\/?p=20061"},"modified":"2021-11-24T14:22:21","modified_gmt":"2021-11-24T05:22:21","slug":"tooltip7","status":"publish","type":"post","link":"https:\/\/icunow.co.kr\/tooltip7\/","title":{"rendered":"\uc6f9\uc0ac\uc774\ud2b8 \uad6c\ucd95 \uc2dc \uc0ac\uc6a9 \uac00\ub2a5\ud55c \ubb34\ub8cc \ud234\ud301 \ub77c\uc774\ube0c\ub7ec\ub9ac \ubaa8\uc74c!"},"content":{"rendered":"\n

–<\/p>\n\n\n\n

\ud234\ud301\uc740 \uc6f9 \ud658\uacbd\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc5d0\uac8c \ucd94\uac00 \uc815\ubcf4\ub97c \uc81c\uacf5\ud558\ub294\ub370 \uc8fc\ub85c \ud65c\uc6a9\ub429\ub2c8\ub2e4. \ubaa8\ub4e0 \uc815\ubcf4\ub97c \ud55c \ubc88\uc5d0 \ubcf4\uc5ec\uc904 \uc218 \uc5c6\ub294 \uc0c1\ud669\uc5d0\uc11c, \ud2b9\uc815 \uba54\ub274\ub098 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uace0\uc790 \ud560 \ub54c \ud65c\uc6a9\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790\ub294 \uae30\ub2a5 \uc0ac\uc6a9 \uc2dc\uc810\uc5d0 \ub9de\ucdb0 \uc790\uc138\ud55c \uc815\ubcf4\ub97c \ud655\uc778\ud558\uace0 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ub298\uc740 \ub2e4\uc591\ud55c \ud234\ud301\uc744 \ubb34\ub8cc\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uba87 \uac1c \uc18c\uac1c\ud558\uace0\uc790 \ud569\ub2c8\ub2e4. <\/strong><\/p>\n\n\n\n

–<\/p>\n\n\n\n

1.Tippy.js<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\uc704\uce58\ub294 \ubb3c\ub860, \ud14c\ub9c8(\uceec\ub7ec, \uc0ac\uc774\uc988 \ub4f1), \uc560\ub2c8\uba54\uc774\uc158\uae4c\uc9c0 \ub2e4\ucc44\ub85c\uc6b4 \ud234\ud301\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. HTML \ud398\uc774\uc9c0\uc5d0 \ubc14\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ucf54\ub4dc\ub97c \uc81c\uacf5\ud558\uba70, \ub9ac\uc561\ud2b8\ub97c \uc9c0\uc6d0\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ubcc4\ub3c4 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 HTML \uc694\uc18c \uc704\ub85c \ub9c8\uc6b0\uc2a4\ub97c \uac00\uc838\uac08 \ub54c AJAX\ub97c \ud1b5\ud574 \ucf58\ud150\uce20\ub97c \ub85c\ub4dc\ud560 \uc218 \uc788\ub294 \ub4f1 \ud65c\uc6a9\ub3c4\uac00 \ub192\uc740 \uac83\uc774 \uc7a5\uc810\uc785\ub2c8\ub2e4. (\ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc138\ud788 \ubcf4\uae30<\/a>)<\/p>\n\n\n\n

–<\/p>\n\n\n\n

2.Popper.js<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\ub77c\uc774\ube0c\ub7ec\ub9ac \uc0ac\uc6a9 \uc2dc, \uc6a9\ub7c9\uc774 \ud074 \uacbd\uc6b0 \uc6f9\uc0ac\uc774\ud2b8 \ucd5c\uc801\ud654\uc5d0 \ubc29\ud574\uac00 \ub420 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc6a9\ub7c9\uc740 \uc911\uc694\ud55c \uae30\uc900 \uc911 \ud558\ub098\uc778\ub370\uc694. Popper<\/strong>\uc758 \uac00\uc7a5 \ud070 \uc7a5\uc810\uc740 \uc6a9\ub7c9\uc774 \uc791\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4.(3kb) \uc81c\uacf5\ub418\ub294 \ud234\ud301\uc758 \uc885\ub958\ub294 \ub9ce\uc9c0 \uc54a\uc9c0\ub9cc, \uae30\ubcf8\uc801\uc778 \uc815\ubcf4 \uc804\ub2ec\uc758 \ubaa9\uc801\uc5d0 \uc788\uc5b4 \uc6a9\ub7c9\uc774 \uc791\ub2e4\ub294 \uc810\uacfc \ud568\uaed8 \uc0ac\uc6a9\ud558\uae30 \uc88b\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\ub77c\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. (\ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc138\ud788 \ubcf4\uae30<\/a>)<\/p>\n\n\n\n

–<\/p>\n\n\n\n

3.Hint<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

‘Hint’ \uc5ed\uc2dc \uc6a9\ub7c9\uc774 \uc791\uc740 \ud234\ud301 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. (1.5kb) \uac1c\uc778 \ud504\ub85c\uc81d\ud2b8\ub294 \ubb3c\ub860 \uc0c1\uc5c5\uc801 \uc11c\ube44\uc2a4\uc5d0 \uc0ac\uc6a9 \uac00\ub2a5\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uc704\uce58 \uc9c0\uc815, \uc0c1\ud669(\uc624\ub958 \ub4f1) \ubcc4 \uc548\ub0b4, \uc0ac\uc774\uc988 \ub4f1\uc5d0 \ub530\ub77c \ud234\ud301\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. CSS\ub85c \uad6c\ucd95\ub418\uc5b4 \uc788\uc5b4 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \uc6f9 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4\ub294 \uc7a5\uc810\uc774 \uc788\uc73c\uba70, \ucd5c\uc2e0 \ube0c\ub77c\uc6b0\uc800\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. (\ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc138\ud788 \ubcf4\uae30<\/a>) <\/p>\n\n\n\n

–<\/p>\n\n\n\n

4.Microtip<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\ub610 \ud558\ub098\uc758 CSS \uae30\ubc18 \ud234\ud301 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc6a9\ub7c9\uc740 1kb\uc5d0 \ubd88\uacfc\ud569\ub2c8\ub2e4. \ud234\ud301 \ud45c\uc2dc \uc704\uce58 \ub4f1\ub9cc \uc9c0\uc815\ud574 \ube60\ub974\uac8c \uc11c\ube44\uc2a4 \ub0b4 \uc801\uc6a9\ud558\uace0 \uc2f6\uc744 \ub54c \ud65c\uc6a9\ud558\uae30 \uc88b\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub77c\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. \uadf8\ub9cc\ud07c \uae30\ubcf8\uc5d0 \ucda9\uc2e4\ud558\uac8c \uad6c\uc131\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. (\ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc138\ud788 \ubcf4\uae30<\/a>)<\/p>\n\n\n\n

–<\/p>\n\n\n\n

5.Tootik<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\uc704\uce58, \ud0c0\uc785, \uae30\ub2a5(\uc77c\uc815\uc2dc\uac04 \ub4a4 \ud234\ud301 \ub178\ucd9c \ub4f1) \uc138 \uac00\uc9c0 \uc870\uac74\uc5d0 \ub530\ub77c \uc6d0\ud558\ub294 \ud234\ud301\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc120\ud0dd\ud55c \uc870\ud569\uc5d0 \ub530\ub978 \ud234\ud301\uc744 \uc624\ub978\ucabd \ub05d\uc5d0\uc11c \ubc14\ub85c \ud655\uc778\ud574\ubcfc \uc218 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 \uac00\uc7a5 \ucd5c\uc801\uc758 \ud234\ud301\uc744 \ucc3e\uc544\ubcfc \uc218 \uc788\uc5b4 \ub354\uc6b1 \ub9e4\ub825\uc801\uc778 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. (\ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc138\ud788 \ubcf4\uae30<\/a>)<\/p>\n\n\n\n

–<\/p>\n\n\n\n

6.Toolbar<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

‘Toolbar’<\/strong>\ub294 \ud234\ubc14\uc5d0 \ud574\ub2f9\ud558\ub294 \ud234\ud301\uc744 \uc27d\uac8c \uc0dd\uc131\ud560 \uc218 \uc788\uac8c \ub3c4\uc640\uc8fc\ub294\u00a0jquery \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ud55c \uac00\uc9c0 \uceec\ub7ec\uac00 \uc544\ub2c8\ub77c \uc5ec\ub7ec \uceec\ub7ec\ub97c \ud568\uaed8 \uc81c\uacf5\ud574\uc8fc\uae30\uc5d0 \uc6f9\uc0ac\uc774\ud2b8 \ub514\uc790\uc778\uc5d0 \ub9de\ub294 \uc0c9\uc0c1\uc744 \uc120\ud0dd\ud558\uac70\ub098, \uc704\uce58\ub97c \uc870\uc815\ud558\uac70\ub098, \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \ucd94\uac00\ud558\ub294 \ub4f1\uc758 \uc720\uc6a9\ud55c \uae30\ub2a5\uc774 \ub9ce\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. (\ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc138\ud788 \ubcf4\uae30<\/a>)<\/p>\n\n\n\n

–<\/p>\n\n\n\n

7.Introjs<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

‘Intro.js’<\/strong>\ub294 \uc0ac\uc6a9\uc790\uac00 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ucc98\uc74c \ubc29\ubb38\ud560 \ub54c \ud655\uc778\ud574\uc57c \ud560 \ub0b4\uc6a9\uc774\ub098 \uae30\ub2a5\uc5d0 \ub300\ud55c \uc548\ub0b4\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc624\ud508\uc18c\uc2a4\ub85c \uc81c\uacf5\ub418\uace0 \uc788\uc73c\uba70, \uc2e0\uaddc \uc0ac\uc6a9\uc790\ub098 \uae30\ub2a5 \uc5c5\ub370\uc774\ud2b8 \uc2dc \uc790\uc8fc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ud234\ud301\uc774\uae30\ub3c4 \ud569\ub2c8\ub2e4. (\ub77c\uc774\ube0c\ub7ec\ub9ac \uc790\uc138\ud788 \ubcf4\uae30<\/a>)<\/p>\n\n\n\n

–<\/p>\n\n\n\n

\ud568\uaed8 \ud65c\uc6a9\ud574\ubcf4\uc138\uc694!<\/strong><\/p>\n\n\n\n