{"id":5782,"date":"2018-12-01T12:35:55","date_gmt":"2018-12-01T03:35:55","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5782"},"modified":"2020-05-28T13:10:39","modified_gmt":"2020-05-28T04:10:39","slug":"%ec%9b%b9%ec%97%90%ec%84%9c%ec%9d%98-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83%ec%9d%84-%ec%9c%84%ed%95%9c-%ea%b5%ac%ec%84%b8%ec%a3%bc-flex","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5782","title":{"rendered":"\uc6f9\uc5d0\uc11c\uc758 \ub808\uc774\uc544\uc6c3\uc744 \uc704\ud55c \uad6c\uc138\uc8fc, Flex"},"content":{"rendered":"<p>\uc6f9\uc758 CSS\ub97c \uc774\uc6a9\ud574 \uac00\ub85c\uc5d0 \ub300\ud55c \uac00\uc6b4\ub370 \uc815\ub82c\uc740 \uadf8\ub7ed\uc800\ub7ed \uc27d\uac8c \uc9c0\uc815\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc138\ub85c \uc815\ub82c\uc740 \uc660\uc9c0 \ud2b8\ub9ad\uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uc9c0\uc815\ud558\ub294 \ub290\ub08c\uc744 \ubc1b\ub294\ub2e4. \uadf8\ub807\ub2e4\ubcf4\ub2c8, \uc138\ub85c \uc815\ub82c\uc774 \ud544\uc694\ud55c \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud560\ub54c\ub9c8\ub2e4 \uace0\ucda9\uc774 \uc0dd\uae30\ub294\ub370.. \uc774\ub7f4\ub54c flex\ub77c\ub294 \ube44\uad50\uc801 \ucd5c\uc2e0\uc758 CSS \ubc29\uc2dd\uc744 \ud65c\uc6a9\ud574 \uc774\ub7ec\ud55c \uace0\ucda9\uc744 \uc81c\uac70\ud558\uace0\uc790 \uc774 \uae00\uc744 \uc815\ub9ac\ud55c\ub2e4. \uc0ac\uc2e4 flex \ubc29\uc2dd\uc740 \uadf8 \ub0b4\uc6a9\uc774 \uc81c\ubc95 \ubc29\ub300\ud558\ub2e4. \ud558\uc9c0\ub9cc \uccb4\uacc4\uc801\uc778\uc9c0\ub77c \uc5ec\ub7ec\ubc88 \uc0b4\ud3b4\ubcf4\uba74 \ucda9\ubd84\uc774 \uc774\ud574\ud558\uace0 \uc2e4\uc81c \uc5c5\ubb34\uc5d0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\r\n<p>\uc77c\ub2e8 \uc55e\uc11c \uc5b8\uae09\ud55c \uac00\ub85c\uc640 \uc138\ub85c\uc5d0 \ub300\ud55c \uac00\uc6b4\ub370 \uc815\ub82c\uc744 \uc704\ud55c flex \ubc29\uc2dd\uc744 \uc774 \uae00\uc744 \ud1b5\ud574 \uac04\ub2e8\uc774 \uc5b8\uae09\ud574 \ub454\ub2e4. \uac00\uc6b4\ub370 \uc815\ub82c\uc774 \ud544\uc694\ud560\ub54c\ub9c8\ub2e4 flex\ub97c \uc0ac\uc6a9\ud558\ub2e4\ubcf4\uba74.. flex\uc758 \uadf8\ubc16\uc758 \uc694\uc18c\ub4e4\uc774 \ud558\ub098\uc529 \uc811\uadfc\ud558\uac8c \ub420 \uac83\uc774\uae30 \ub54c\ubb38\uc774\ub2e4. \uae30\uc220\uc774\ub780 \uadf8 \ud544\uc694\uc5d0 \uc758\ud574 \uc0ac\uc6a9\ub418\uace0, \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc0ac\uc6a9\ub418\uc5b4\uc9c8\ub54c \uc0ac\uc6a9\uc790\uac00 \ubcf4\ub2e4 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\r\n\r\n<p>\uc544\ub798\uc758 dom \uad6c\uc131\uc5d0 \ub300\ud55c \ucf54\ub4dc\uac00 \uc788\ub2e4.<\/p>\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<div class=\"container\">\r\n    <div class=\"item\">DIP2K<\/div>\r\n    <div class=\"item\">\uae40\ud615\uc900<\/div>\r\n<\/div>\r\n<\/pre>\r\n\r\n<p>.container \uc548\uc5d0 .item \ud56d\ubaa9\uc744 \uac00\ub85c\uc640 \uc138\ub85c\ub85c \uac00\uc6b4\ub370 \uc815\ub82c\ud558\uace0\uc790 \ud55c\ub2e4\uba74 \uc544\ub798\uc640 \uac19\uc740 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uba74 \ub41c\ub2e4.<\/p>\r\n\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<style>\r\n    .container {\r\n        border: 1px dotted red;\r\n        width: 100%;\r\n        height: 500px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n\r\n    .item:first-child {\r\n        border: 1px dotted blue;\r\n    }\r\n\r\n    .item:last-child {\r\n        border: 1px dotted green;\r\n    }\r\n<\/style>\r\n<\/pre>\r\n\r\n<p>\uc2e4\uc81c \uacb0\uacfc\ub294 \uc544\ub798\uc640 \ud654\uba74\ucc98\ub7fc \uac00\ub85c\uc640 \uc138\ub85c\uc5d0 \ub300\ud574 \uac00\uc6b4\ub370\ub85c \uc815\ub82c\ub41c \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\r\n\r\n<p>[xyz-ihs snippet=&#8221;flex-layout-center-align&#8221;]<\/p>\r\n\r\n<p>DIV \uc694\uc18c\ub294 display\uac00 block\uc774\ub2e4. \uadf8\ub7ec\ub098 flex\uc758 \ub0b4\ubd80\uc758 \ud56d\ubaa9\uc73c\ub85c \ub4e4\uc5b4\uac00\uac8c \ub418\uba74 inline-block\uc73c\ub85c \ubcc0\uacbd\ub41c\ub2e4\ub294 \uc810\uc744 \uc54c \uc218 \uc788\ub2e4. \ub05d\uc73c\ub85c \uc774 \uae00\uc744 \uc791\uc131\ud558\uae30 \uc704\ud574 \uc77d\uc5c8\ub358 \ubb38\uc11c\ub294 <a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90\">&#8220;flexbox\uc758 \uae30\ubcf8 \uac1c\ub150&#8221;<\/a>\uc774\ub2e4.<\/p>\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9\uc758 CSS\ub97c \uc774\uc6a9\ud574 \uac00\ub85c\uc5d0 \ub300\ud55c \uac00\uc6b4\ub370 \uc815\ub82c\uc740 \uadf8\ub7ed\uc800\ub7ed \uc27d\uac8c \uc9c0\uc815\ud560 \uc218 \uc788\uc9c0\ub9cc, \uc138\ub85c \uc815\ub82c\uc740 \uc660\uc9c0 \ud2b8\ub9ad\uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uc9c0\uc815\ud558\ub294 \ub290\ub08c\uc744 \ubc1b\ub294\ub2e4. \uadf8\ub807\ub2e4\ubcf4\ub2c8, \uc138\ub85c \uc815\ub82c\uc774 \ud544\uc694\ud55c \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud560\ub54c\ub9c8\ub2e4 \uace0\ucda9\uc774 \uc0dd\uae30\ub294\ub370.. \uc774\ub7f4\ub54c flex\ub77c\ub294 \ube44\uad50\uc801 \ucd5c\uc2e0\uc758 CSS \ubc29\uc2dd\uc744 \ud65c\uc6a9\ud574 \uc774\ub7ec\ud55c \uace0\ucda9\uc744 \uc81c\uac70\ud558\uace0\uc790 \uc774 \uae00\uc744 \uc815\ub9ac\ud55c\ub2e4. \uc0ac\uc2e4 flex \ubc29\uc2dd\uc740 \uadf8 \ub0b4\uc6a9\uc774 \uc81c\ubc95 \ubc29\ub300\ud558\ub2e4. \ud558\uc9c0\ub9cc \uccb4\uacc4\uc801\uc778\uc9c0\ub77c \uc5ec\ub7ec\ubc88 \uc0b4\ud3b4\ubcf4\uba74 \ucda9\ubd84\uc774 \uc774\ud574\ud558\uace0 \uc2e4\uc81c &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5782\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;\uc6f9\uc5d0\uc11c\uc758 \ub808\uc774\uc544\uc6c3\uc744 \uc704\ud55c \uad6c\uc138\uc8fc, Flex&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-5782","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5782"}],"version-history":[{"count":17,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5782\/revisions"}],"predecessor-version":[{"id":9557,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5782\/revisions\/9557"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5782"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}