{"id":1392,"date":"2012-11-17T00:30:54","date_gmt":"2012-11-16T15:30:54","guid":{"rendered":"http:\/\/hangunsworld.com\/blog\/?p=1392"},"modified":"2012-11-19T21:10:55","modified_gmt":"2012-11-19T12:10:55","slug":"cssjavascript%eb%a1%9c-%eb%a7%8c%eb%93%a0-%ed%94%84%eb%a1%9c%ea%b7%b8%eb%9e%98%ec%8a%a4-%eb%b0%94","status":"publish","type":"post","link":"http:\/\/hangunsworld.com\/blog\/1392","title":{"rendered":"CSS\/JavaScript\ub85c \ub9cc\ub4e0 \ud504\ub85c\uadf8\ub798\uc2a4 \ubc14"},"content":{"rendered":"<style type=\"text\/css\">\n.progressbar{\n\tborder-radius:10px;\n\tposition:relative;\n\twidth:250px;\n\theight:20px;\nmargin-bottom:20px;\n\tbackground-color: #EFEFEF;\n\toverflow:hidden;\n    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);\n    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);\n    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);\n}\n.progress{\n\tborder-radius:10px;\n\tposition:absolute;\n\tleft:-250px;\n\twidth:250px;\n\theight:20px;\n\tbackground:url(\/blog\/wp-content\/uploads\/2012\/11\/test.gif) repeat-x 0px 0px;\n    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);\n    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);\n    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);\n}\n<\/style>\n<p><script type=\"text\/javascript\">\nvar p = 0;\nvar pct = 0;\nfunction loading(){\n\tvar prg = document.getElementById(\"progress\");\n\tif(prg){\n\t\tp++;\n\t\tif(p >= 20){p = 0;}\n\t\tprg.style.backgroundPosition = p + \"px 0px\";\n\t\tpct++;\n\t\tif(pct >= 0){pct = -250;}\n\t\tprg.style.left = pct + \"px\";\n\t}\n}\nsetInterval(loading, 50);\n<\/script><\/p>\n<div class=\"progressbar shadow\">\n<div class=\"progress embossed\" id=\"progress\"><\/div>\n<\/div>\n<p>\uc5bc\ub9c8\uc804<a href=\"http:\/\/hangunsworld.com\/blog\/1380\"> AS3\uc73c\ub85c \uc9e0 \ud504\ub85c\uadf8\ub798\uc2a4 \ubc14<\/a>\ub97c CSS\uc640 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud574\uc11c \ube44\uc2b7\ud55c \ubc29\ubc95\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\ub124\uc694. \ubb3c\ub860 \ube0c\ub77c\uc6b0\uc800\uc640 \ubc84\uc804\uc5d0 \ub530\ub77c\uc11c \ucc28\uc774\uac00 \ub098\uae34 \ud569\ub2c8\ub2e4. \uc77c\ub2e8 \ud30c\uc774\uc5b4\ud3ed\uc2a4\uc640 IE9, \ub9e5\uc6a9 \uc0ac\ud30c\ub9ac \uc5d0\uc120 \uc815\uc0c1\uc801\uc73c\ub85c \ubcf4\uc774\ub124\uc694.<br \/>\n\ud06c\ub86c\uc774\ub098 \uad6c\ubc84\uc804\uc758 IE \ub4f1\uc5d0\uc11c\ub294 <code>border-radius<\/code>\uc640 <code>overflow<\/code>\uac00 \ubb34\uc2dc\ub418\uac70\ub098 \ub2e4\ub974\uac8c \ubcf4\uc5ec\uc9c0\ub294 \uacbd\ud5a5\uc774 \uc788\uc73c\ubbc0\ub85c, \uc774\ub4e4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \uc9c1\uc0ac\uac01\ud615 \ud615\ud0dc\ub85c \ub9cc\ub4e4\uc5b4\uc57c \ud560\uac81\ub2c8\ub2e4.<\/p>\n<p>\uc6b0\uc120 \ud0dc\uadf8\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 2\uac1c\uc758 <code>DIV<\/code> \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud574\uc11c \uac04\ub2e8\ud569\ub2c8\ub2e4.<\/p>\n<pre lang=\"html5\"><div class=\"progressbar shadow\"><div class=\"progress embossed\" id=\"progress\"><\/div><\/div><\/pre>\n<p>CSS\ub85c \uac01\uac01\uc758 DIV\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc785\ud788\uace0,<\/p>\n<pre lang=\"css\" line=\"1\">.progressbar{\r\n\tborder-radius:10px;\r\n\tposition:relative;\r\n\twidth:250px;\r\n\theight:20px;\r\n\tbackground-color: #EFEFEF;\r\n\toverflow:hidden;\r\n    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);\r\n    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);\r\n    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);\r\n}\r\n.progress{\r\n\tborder-radius:10px;\r\n\tposition:absolute;\r\n\tleft:-250px;\r\n\twidth:250px;\r\n\theight:20px;\r\n\tbackground:url(\/blog\/wp-content\/uploads\/2012\/11\/test.gif) repeat-x 0px 0px;\r\n    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);\r\n    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);\r\n    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);\r\n}<\/pre>\n<p>\ub9c8\uc9c0\ub9c9\uc5d4 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud574\uc11c <code>backgroundPosiiton<\/code>\uc744 \uc81c\uc5b4\ud558\ub294 \uac83\uc73c\ub85c \ub9c8\ubb34\ub9ac.<\/p>\n<pre lang=\"javascript\" line=\"1\">var p = 0;\r\nvar pct = 0;\r\nfunction loading(){\r\n\tvar prg = document.getElementById(\"progress\");\r\n\tif(prg){\r\n\t\tp++;\r\n\t\tif(p >= 20){p = 0;}\r\n\t\tprg.style.backgroundPosition = p + \"px 0px\";\r\n\t\tpct++;\r\n\t\tif(pct >= 0){pct = -250;}\r\n\t\tprg.style.left = pct + \"px\";\r\n\t}\r\n}\r\nsetInterval(loading, 50);<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc5bc\ub9c8\uc804 AS3\uc73c\ub85c \uc9e0 \ud504\ub85c\uadf8\ub798\uc2a4 \ubc14\ub97c CSS\uc640 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud574\uc11c \ube44\uc2b7\ud55c \ubc29\ubc95\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\ub124\uc694. \ubb3c\ub860 \ube0c\ub77c\uc6b0\uc800\uc640 \ubc84\uc804\uc5d0 \ub530\ub77c\uc11c \ucc28\uc774\uac00 \ub098\uae34 \ud569\ub2c8\ub2e4. \uc77c\ub2e8 \ud30c\uc774\uc5b4\ud3ed\uc2a4\uc640 IE9, \ub9e5\uc6a9 \uc0ac\ud30c\ub9ac \uc5d0\uc120 \uc815\uc0c1\uc801\uc73c\ub85c \ubcf4\uc774\ub124\uc694. \ud06c\ub86c\uc774\ub098 \uad6c\ubc84\uc804\uc758 IE \ub4f1\uc5d0\uc11c\ub294 border-radius\uc640 overflow\uac00 \ubb34\uc2dc\ub418\uac70\ub098 \ub2e4\ub974\uac8c \ubcf4\uc5ec\uc9c0\ub294 \uacbd\ud5a5\uc774 \uc788\uc73c\ubbc0\ub85c, \uc774\ub4e4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \uc9c1\uc0ac\uac01\ud615 \ud615\ud0dc\ub85c \ub9cc\ub4e4\uc5b4\uc57c \ud560\uac81\ub2c8\ub2e4. \uc6b0\uc120 \ud0dc\uadf8\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 2\uac1c\uc758 DIV \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud574\uc11c \uac04\ub2e8\ud569\ub2c8\ub2e4. CSS\ub85c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[466,71,37,555,467],"class_list":["post-1392","post","type-post","status-publish","format-standard","hentry","category-htmlcss","tag-css","tag-firefox","tag-internet-explorer","tag-javascript","tag-progress-bar"],"_links":{"self":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/1392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/comments?post=1392"}],"version-history":[{"count":0,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/1392\/revisions"}],"wp:attachment":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/media?parent=1392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/categories?post=1392"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/tags?post=1392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}