{"id":1914,"date":"2014-10-02T22:43:55","date_gmt":"2014-10-02T13:43:55","guid":{"rendered":"http:\/\/hangunsworld.com\/blog\/?p=1914"},"modified":"2014-10-03T11:42:43","modified_gmt":"2014-10-03T02:42:43","slug":"flex%eb%a5%bc-%ec%82%ac%ec%9a%a9%ed%95%9c-%ed%83%ad-%eb%a7%8c%eb%93%a4%ea%b8%b0-2","status":"publish","type":"post","link":"http:\/\/hangunsworld.com\/blog\/1914","title":{"rendered":"flex\ub97c \uc0ac\uc6a9\ud55c \ud0ed \ub9cc\ub4e4\uae30 2"},"content":{"rendered":"<p><a href=\"http:\/\/hangunsworld.com\/blog\/1905\">flex\ub97c \uc0ac\uc6a9\ud55c \ud0ed \ub9cc\ub4e4\uae30<\/a>\uc5d0\uc11c \uac04\ub2e8\ud55c \ud0ed \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubd24\uc2b5\ub2c8\ub2e4. \uadf8\ub7f0\ub370 \uc2a4\ub9c8\ud2b8\ud3f0\uc5d0\uc11c \ubcfc\ub54c\ub294 \uc758\ub3c4\ud55c \ub370\ub85c \ud45c\uc2dc\ub418\uc9c0 \uc54a\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc778\uc2dd\ud558\ub294 \uc2a4\ud0c0\uc77c\uc774 \ub2e4\ub974\uae30 \ub54c\ubb38\uc73c\ub85c, \ub2e4\uc74c\uacfc \uac19\uc774 <code>-webkit-<\/code> \uc811\ub450\uc5b4\ub97c \ucd94\uac00\ud574 \uc8fc\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<pre lang=\"css3\" line=\"1\">.container{\r\n    display: -webkit-flex;\/* for mobile *\/\r\n    display: flex;\r\n}\r\n.container .child{\r\n    -webkit-flex:auto;\/* for mobile *\/\r\n    flex:auto;\r\n}<\/pre>\n<p>\uc774\uc81c \uc2a4\ub9c8\ud2b8\ud3f0\uc5d0\uc11c\ub3c4 \ub300\ubd80\ubd84\uc758 \uacbd\uc6b0\uc5d0\ub294 \uc6d0\ud558\ub294 \uacb0\uacfc\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc6b0\ub9ac\uc758 \uae30\ub300\ub97c \uc800\ubc84\ub9ac\uc9c0 \uc54a\ub294 <del datetime=\"2014-10-02T13:08:03+00:00\">\uac24\ub808\uae30<\/del> \uc77c\ubd80 \uac24\ub7ed\uc2dc \uc2dc\ub9ac\uc988\uc5d0\uc11c\ub294 \uc81c\ub300\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774\ub7f0 \uc77c\ubd80 \uc2a4\ub9c8\ud2b8\ud3f0\uc744 \uc704\ud574\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ub450 \uc904\uc758 \ucf54\ub4dc\ub97c \ub354 \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<pre lang=\"css3\" line=\"1\">.container{\r\n    display:-webkit-box;\/* for galaxy *\/\r\n    display: -webkit-flex;\/* for mobile *\/\r\n    display: flex;\r\n}\r\n.container .child{\r\n    -webkit-flex:auto;\/* for mobile *\/\r\n    flex:auto;\r\n    width:33.3%;\/* for galaxy *\/\r\n}<\/pre>\n<p>\uc5ec\uae30\uc11c \ubcd1\ub9db\uc778\uac74, <code>width<\/code>\uac12\uc740 \ud0ed\uc758 \uac2f\uc218\uc5d0 \ub530\ub77c\uc11c 1\/n \uac12\uc73c\ub85c \uc801\uc6a9\ud574\uc57c \ud55c\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 2\uac1c\uc774\uba74 50%, 4\uac1c\uc774\uba74 25% \ucc98\ub7fc \ub9d0\uc774\uc8e0.<\/p>\n<p>\uadf8\ub798\uc11c \ub300\uc548\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud574\uc11c \ub9ac\uc2a4\ud2b8\uc758 \uac2f\uc218\uc5d0 \ub530\ub77c\uc11c width \uac12\uc744 \uc785\ub825\ud574 \uc8fc\ub294 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre lang=\"javascript\" line=\"1\">$(function(){\r\n    var lis = $(\"ul.flex_container > li\");\r\n    lis.width((100 \/ lis.length) + \"%\");\r\n});<\/pre>\n<p>\uc774\uc81c \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub3c4 \uc6d0\ud558\ub294 \uacb0\uacfc\ub97c \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<style type=\"text\/css\">\nul.flex_container{display:-webkit-box;display:-webkit-flex;display:flex;list-style:none;border-bottom:1px solid #69f;height:30px;margin:0;}\nul.flex_container > li{-webkit-flex:auto;flex:auto;text-align:center;line-height:30px;width:33.3%;}\nul.flex_container > li span{display:block;height:29px;border:1px solid #fff;border-bottom:none;background-color:#fff;}\nul.flex_container > li.on span{border:1px solid #69f;border-bottom:none;background-color:#efefef;height:30px;}\n<\/style>\n<ul class=\"flex_container\">\n<li class=\"on\"><span>111<\/span><\/li>\n<li><span>222<\/span><\/li>\n<li><span>333<\/span><\/li>\n<\/ul>\n<p><script>$(function(){\n    $(\"ul.flex_container > li\").bind(\"click\", flexContainerClick);\n});\nfunction flexContainerClick(){\n    var me = $(this);\n    me.siblings().removeClass(\"on\");\n    me.addClass(\"on\");\n}<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>flex\ub97c \uc0ac\uc6a9\ud55c \ud0ed \ub9cc\ub4e4\uae30\uc5d0\uc11c \uac04\ub2e8\ud55c \ud0ed \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubd24\uc2b5\ub2c8\ub2e4. \uadf8\ub7f0\ub370 \uc2a4\ub9c8\ud2b8\ud3f0\uc5d0\uc11c \ubcfc\ub54c\ub294 \uc758\ub3c4\ud55c \ub370\ub85c \ud45c\uc2dc\ub418\uc9c0 \uc54a\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc778\uc2dd\ud558\ub294 \uc2a4\ud0c0\uc77c\uc774 \ub2e4\ub974\uae30 \ub54c\ubb38\uc73c\ub85c, \ub2e4\uc74c\uacfc \uac19\uc774 -webkit- \uc811\ub450\uc5b4\ub97c \ucd94\uac00\ud574 \uc8fc\uba74 \ub429\ub2c8\ub2e4. .container{ display: -webkit-flex;\/* for mobile *\/ display: flex; } .container .child{ -webkit-flex:auto;\/* for mobile *\/ flex:auto; } \uc774\uc81c \uc2a4\ub9c8\ud2b8\ud3f0\uc5d0\uc11c\ub3c4 \ub300\ubd80\ubd84\uc758 \uacbd\uc6b0\uc5d0\ub294 [&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,536,539,538,537],"class_list":["post-1914","post","type-post","status-publish","format-standard","hentry","category-htmlcss","tag-css","tag-flex-2","tag-flexbox","tag-galaxy","tag-tab-menu"],"_links":{"self":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/1914","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=1914"}],"version-history":[{"count":0,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/1914\/revisions"}],"wp:attachment":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/media?parent=1914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/categories?post=1914"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/tags?post=1914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}