{"id":367,"date":"2012-01-04T00:18:40","date_gmt":"2012-01-04T00:18:40","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=367"},"modified":"2012-01-04T00:18:40","modified_gmt":"2012-01-04T00:18:40","slug":"web-js%eb%a1%9c-%ed%95%98%eb%8a%94-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98%ea%b8%b0%eb%b2%95","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=367","title":{"rendered":"web : JS\ub85c \ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158\uae30\ubc95"},"content":{"rendered":"<p>\uc560\ud50c?\ud648\uc758?<a href=\"http:\/\/www.apple.com\/iphone\/\">\uc544\uc774\ud3f0 4S \uc81c\ud3fc \uc6f9\ud398\uc774\uc9c0<\/a>\uc5d0\uc11c \uba54\uc778 \ube44\uc8fc\uc5bc\ub97c \uc7a5\uc2dd\ud558\ub294 \uc2ac\ub77c\uc774\ub4dc\ub294 \ucd1d 6\uac1c\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\ud000\uc2a4\ub85c \uad6c\ubd84\ub41c \uc81c\ud488 \ud2b9\uc9d5\ub4e4\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc81c\ud488 \uc2ac\ub77c\uc774\ub4dc\ub97c \uad6c\ud604\ud558\ub294 CSS \uc560\ub2c8\uba54\uc774\uc158\uacfc?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8?\ucf54\ub4dc\ub97c \uc0ac\ub840\ub85c \ud6a8\uacfc\uc801\uc778 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud558\uc5ec \uacf5\ubd80\ud574 \ubd05\uc2dc\ub2e4.<\/p>\n<p>\uc544\ub798\uc758 \ub370\ubaa8\ub294 \uc791\ub3d9\uc6d0\ub9ac\ub97c \uc774\ud574\ud558\uae30 \uc704\ud574 \uc57d 20% \uc218\uc900\uc73c\ub85c \ucd95\uc18c\ud55c \uac83\uc774\uba70, \ube0c\ub77c\uc6b0\uc800\uc758 \ubdf0\ud3ec\ud2b8\ub97c \ud655\uc778\ud558\uae30 \uc704\ud55c \uac00\uc0c1 \uc694\uc18c(browser)\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc2ac\ub77c\uc774\ub4dc \uc694\uc18c\ub4e4\uc774 \ucee4\ub2e4\ub780 \ud558\ub098\uc758 \ub9f5(phone-stage)\uc73c\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uace0?\uc544\uc774\ud3f0?\uac80\uc815\uc0c9(bphone)\ub9cc \ubcc4\ub3c4\uc758 \ub808\uc774\uc5b4\ub85c \ucde8\uae09\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc2ac\ub77c\uc774\ub4dc 6\ubc88\uc740 1\ubc88 \uc2ac\ub77c\uc774\ub4dc\uc640 \uc808\ubb18\ud558\uac8c \uad50\ucc28\ud558\uba74\uc11c \ubc18\ubcf5\ub41c\ub2e4\ub294 \uc0ac\uc2e4\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc2e4\uc81c \ubc84\uc804\uc5d0\ub294 \uac01 \uc2ac\ub77c\uc774\ub4dc\uc5d0 \uc0ac\uc6a9\ub41c \uc774\ubbf8\uc9c0\uc640 \ud14d\uc2a4\ud2b8\uac00 \uac1c\ubcc4 \uc694\uc18c\ub4e4\ub85c \uad6c\ubd84\ub418\uc5b4 \ubcf4\ub2e4 \ub9ce\uc740 \uad6c\uc131 \uc694\uc18c\ub4e4\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc73c\uba70, \ub9c1\ud06c\uc640?\ud14d\uc2a4\ud2b8?\uc560\ub2c8\uba54\uc774\uc158 \uc815\ubcf4 \ub4f1\uc758 \ucc98\ub9ac\uae4c\uc9c0 \ud3ec\ud568\ud558\uace0 \uc788\uc9c0\ub9cc \uc774 \ub370\ubaa8\uc5d0\uc11c\ub294 \uadf8 \uac83\uc744 \ud1b5\ud569\ud558\uac70\ub098 \uc0dd\ub7b5\ud55c \uac83\uc785\ub2c8\ub2e4.<\/p>\n<div>\n<div><img src=\"http:\/\/firejune.com\/attach\/1030\/111030230609003946\/751648.jpg\" alt=\"\" \/><img src=\"http:\/\/firejune.com\/attach\/1030\/111030230609003946\/249589.jpg\" alt=\"\" \/><\/div>\n<p><img src=\"http:\/\/firejune.com\/attach\/1030\/111030230609003946\/280350.gif\" alt=\"\" \/><\/div>\n<p>\ub370\ubaa8 \ucd9c\ucc98:?<a href=\"http:\/\/johnbhall.com\/iphone-4s\/\">http:\/\/johnbhall.com\/iphone-4s\/<\/a>?via John B. Hall<\/p>\n<p>\uc2ac\ub77c\uc774\ub4dc \uae30\ub2a5\uc744 \ub9cc\ub4dc\ub294?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8?\ud575\uc2ec \ud568\uc218\ub294?<code>Slide<\/code>\uc640?<code>Sequencer<\/code>?\ud074\ub798\uc2a4\uc785\ub2c8\ub2e4.?<code>Sequencer<\/code>\ub294 \uc7ac\uc0dd\/\uc815\uc9c0 \uc0c1\ud0dc\ub97c \uad00\uc7a5\ud558\uace0 \uc815\ud574\uc9c4 \uc2dc\uac04\uc5d0 \ub2e4\uc74c \uc2dc\ud000\uc2a4\ub97c \uc7ac\uc0dd\ud569\ub2c8\ub2e4.?<code>Slide<\/code>\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ub300\uc0c1 \uc694\uc18c\uc640 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec, CSS?<code>transform<\/code>\uacfc?<code>transition<\/code>?\uc18d\uc131\uc5d0 \uc0ac\uc6a9\ub420?<code>translate<\/code>,?<code>rotate<\/code>?\ub4f1\uc758 \uac12\ub4e4\ub85c \uad6c\uc131\ub41c \uc778\uc2a4\ud134\uc2a4\ub97c \uc0dd\uc0b0\ud569\ub2c8\ub2e4. \ub300\uc0c1\uc774 \ub41c HTML \uc694\uc18c\uc5d0 \uc2a4\ud0c0\uc77c(style) \uc18d\uc131\uc774 \uc778\ub77c\uc778\uc73c\ub85c \uac31\uc2e0\ub418\uba74\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc1c\uc0dd\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ud30c\uc774\uc5b4\ubc84\uadf8?\ub610\ub294 \ub3d4\uc778\uc2a4\ud399\ud130(\uac1c\ubc1c\uc790 \ub3c4\uad6c)\ub97c \uc5f4\uace0 &#8220;phone-stage&#8221;\uc758 \uc2a4\ud0c0\uc77c \uc18d\uc131\uc744 \uac10\uc2dc\ud574 \ubcf4\uc138\uc694. \uc704 \ub300\ubaa8\uc5d0 \uc0ac\uc6a9\ub41c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>[[code]]czozMjQ6XCIgdmFyIHBob25lU3RhZ2UgPSAkKFxcXCJwaG9uZS1zdGFnZVxcXCIpLCBicGhvbmUgPSAkKFxcXCJicGhvbmVcXFwiKTsgdmFyIHEgPXtbJiomXX0gbmV3IFNsaWRlKFt7IGVsOiBwaG9uZVN0YWdlLCB4OiAtMzI1LCB5OiAtMjM0LCByOiAtMzAgfSwgeyBlbDogYnBob25lLCB4OiAwe1smKiZdfSwgeTogMCwgcjogLTMwIH1dKSwgdCA9IG5ldyBTbGlkZShbeyBlbDogcGhvbmVTdGFnZSwgeDogLTI2NCwgeTogLTMxNiwgcjogLTB7WyYqJl19IH0sIHsgZWw6IGJwaG9uZSwgeDogLTMwMCwgeTogLTMwMCwgcjogLTMwIH1dKSwgLi4uIGIgPSBuZXcgU2VxdWVuY2VyKFtxLCB0LHtbJiomXX0geiwgdSwgaiwgZiwgdl0pOyBiLnBsYXkoKTtcIjt7WyYqJl19[[\/code]]<\/pre>\n<p>\uc989, \uc774 \uc2ac\ub77c\uc774\ub4dc\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc740 \uc804\ubd80 CSS\ub85c \ucc98\ub9ac\ud558\uc9c0\ub9cc \uc774\uac83\uc744 \uc81c\uc5b4\ud558\ub294 \uac83\uc740?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc785\ub2c8\ub2e4.?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc2dc\ud000\uc2a4\ub97c \uad6c\uc131\ud558\ub294 transition\uacfc transform \uc18d\uc131\uc744 \ub9cc\ub4e4\uc5b4 \ud574\ub2f9 \uc694\uc18c\uc758 \uc778\ub77c\uc778 \uc2a4\ud0c0\uc77c \uc18d\uc131\uc5d0 \ub300\uc785\ud574 \uc8fc\ub294 \uac70\uc8e0. \uc774 \uac04\ub2e8\ud55c \uc6d0\ub9ac\ub85c \uc5bb\uc5b4\uc9c0\ub294 \uac00\uce58\ub294 \ubb34\uc5c7\uc77c\uae4c\uc694? \uc790, \uc6b0\ub9ac\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \ucc98\ub9ac\ud560 \ub54c jQuery\uc5d0\uc11c \uc81c\uacf5\ud558\ub294?<code>.animate<\/code>?\ub610\ub294 Prototype &amp;?Scriptaculous\uc758?<code>.morph<\/code>\uc640 \uac19\uc740?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8?\uae30\ubc18 \uc560\ub2c8\uba54\uc774\uc158 \ud568\uc218\ub97c \uc0ac\uc6a9\ud574 \uc654\uc2b5\ub2c8\ub2e4. \uc65c\ub0d0\ud558\uba74 \uc0ac\uc6a9\uc790\uc758 \ubbf8\uc138\ud55c \ud589\ub3d9\ub4e4 \uae4c\uc9c0\ub3c4 \uac10\uc9c0\ud558\uc5ec \ud654\uba74\uc5d0 \uc751\ub2f5\ud558\ub294 \uac83\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud588\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 \uc560\ub2c8\uba54\uc774\uc158 \ud568\uc218\ub4e4\uc740 Frame-by-Frame\uc73c\ub85c \uc5f0\uc0b0\ud558\uae30 \ub54c\ubb38\uc5d0 \uc0dd\uac01\ubcf4\ub2e4 \ub9ce\uc740 \ucc98\ub9ac \ube44\uc6a9\uc774 \ub4e0\ub2e4\ub294 \uc0ac\uc2e4\uc744 \uc5ec\ub7ec\ubd84\uc740 \uc798 \uc54c\uace0 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p>CSS\ub85c \ucc98\ub9ac\ub418\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uc81c\uc5b4\ud55c\ub2e4\ub294 \uac83\uc740 \uace7 \ud654\uba74\uc0c1\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \uc9c1\uc811 \uc81c\uc5b4\ud560 \uc218 \uc788\uac8c \ub418\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc774\uac83\uc740 \ub9e4\uc6b0 \ud765\ubbf8\ub86d\uc2b5\ub2c8\ub2e4.?<code>.animate<\/code>\ub098?<code>.morph<\/code>\ub97c \uc0ac\uc6a9\ud558\ub294 \ub300\uc2e0\uc5d0 CSS \uc18d\uc131\uc744 \ud65c\uc6a9\ud558\uc5ec \ube0c\ub77c\uc6b0\uc800\uc758 \uc790\uc6d0\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ubd84\uc0b0 \ucc98\ub9ac\ud558\ub294 \ud6a8\uacfc\uc801\uc778 \uc560\ub2c8\uba54\uc774\uc158 \uad6c\ud604 \uae30\ubc95\uc785\ub2c8\ub2e4. \uc774\ub807\uac8c \ud655\ubcf4\ub41c \uc790\uc6d0\uc73c\ub85c \ub354\uc6b1 \ubcf5\uc7a1\ud55c?\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\uc0c1\ud560 \uc218 \uc788\uace0, \uc544\ub984\ub2e4\uc6b4 \uadf8\ub798\ud53d \uc560\ub2c8\uba54\uc774\uc158\ub3c4 \uc9c0\uc6d0 \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 CSS transitions\ub294?\ud558\ub4dc\uc6e8\uc5b4?\uac00\uc18d\uc744 \uc9c0\uc6d0\ud558\uae30 \ub54c\ubb38\uc5d0?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8?\uc5f0\uc0b0\uc73c\ub85c\ub294 \ub3c4\uc800\ud788 \ub2f5\uc774 \uc548\ub098\uc624\ub294 \uc5ec\ub7ec\uac00\uc9c0 \uc0ac\uce58\uc131(\ud638\ud654\ub85c\uc6b4) \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub4e4\uc744 \uc81c\ud488\uc5d0 \uc801\uc6a9\uc5ec \ub124\uc774\ud2f0\ube0c?\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ud558\uc774\ud0a5\uc744 \ub0a0\ub9ac\ub294?<a href=\"http:\/\/ko.wikipedia.org\/wiki\/%EB%A0%88%EC%95%8C_(%EC%8B%A0%EC%A1%B0%EC%96%B4)\">\ub808\uc54c<\/a>?\uc6f9\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n<p>\ubd84\uc11d \ud83d\ude15<a href=\"http:\/\/johnbhall.com\/iphone-4s\/\">http:\/\/johnbhall.com\/iphone-4s\/<\/a><\/p>\n<p>\uc9c4\uc9dc:?<a href=\"http:\/\/www.apple.com\/iphone\/\">http:\/\/www.apple.com\/iphone\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\ucd9c\ucc98 \ud83d\ude15<a href=\"http:\/\/firejune.com\/1717\/%EC%95%84%EC%9D%B4%ED%8F%B0+4S%EC%9D%98+%EC%A0%9C%ED%92%88+%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%EB%A1%9C+%EB%B0%B0%EC%9A%B0%EB%8A%94+%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98+%EA%B8%B0%EB%B2%95?ct1=8&amp;ct2=42\">http:\/\/firejune.com\/1717\/%EC%95%84%EC%9D%B4%ED%8F%B0+4S%EC%9D%98+%EC%A0%9C%ED%92%88+%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%EB%A1%9C+%EB%B0%B0%EC%9A%B0%EB%8A%94+%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98+%EA%B8%B0%EB%B2%95?ct1=8&amp;ct2=42<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc560\ud50c?\ud648\uc758?\uc544\uc774\ud3f0 4S \uc81c\ud3fc \uc6f9\ud398\uc774\uc9c0\uc5d0\uc11c \uba54\uc778 \ube44\uc8fc\uc5bc\ub97c \uc7a5\uc2dd\ud558\ub294 \uc2ac\ub77c\uc774\ub4dc\ub294 \ucd1d 6\uac1c\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\ud000\uc2a4\ub85c \uad6c\ubd84\ub41c \uc81c\ud488 \ud2b9\uc9d5\ub4e4\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uc81c\ud488 \uc2ac\ub77c\uc774\ub4dc\ub97c \uad6c\ud604\ud558\ub294 CSS \uc560\ub2c8\uba54\uc774\uc158\uacfc?\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8?\ucf54\ub4dc\ub97c \uc0ac\ub840\ub85c \ud6a8\uacfc\uc801\uc778 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud558\uc5ec \uacf5\ubd80\ud574&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/367"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=367"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/367\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}