{"id":1391,"date":"2013-11-22T16:05:06","date_gmt":"2013-11-22T16:05:06","guid":{"rendered":"http:\/\/brain.payzip.co.kr\/?p=1391"},"modified":"2013-11-22T16:05:06","modified_gmt":"2013-11-22T16:05:06","slug":"css-container-float-%eb%86%92%ec%9d%b4-%ec%b2%98%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=1391","title":{"rendered":"CSS container : Float \ub192\uc774 \ucc98\ub9ac"},"content":{"rendered":"

loat\uc5d0 \uc544\ubb34\ub7f0 \ub300\uc751\ub3c4 \ud558\uc9c0 \uc54a\uc740 \uc0c1\ud0dc<\/h3>\n

#container\ub294 \ubd80\ubaa8 \uc5d8\ub9ac\uba3c\ud2b8\uc774\uba70 #lnb\uc640 #content\ub294 \uc790\uc2dd \uc5d8\ub9ac\uba3c\ud2b8\ub85c\uc11c \ud604\uc7ac float\ub41c \uc0c1\ud0dc \uc785\ub2c8\ub2e4. \uc544\ub798 \uc608\uc81c\ub294 float\uc5d0 \uc544\ubb34\ub7f0 \ub300\uc751\uc744 \ud558\uc9c0 \uc54a\uc73c\uba74 \uc790\uc2dd \uc5d8\ub9ac\uba3c\ud2b8\uac00 \ubd80\ubaa8 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub192\uc774\uc5d0 \uc601\ud5a5\uc744 \uc8fc\uc9c0 \uc54a\ub294\ub2e4\ub294 \uc0ac\uc2e4\uc744 \ubcf4\uc5ec\uc8fc\uace0 \uc788\uc2b5\ub2c8\ub2e4. #container\uc758 \ub192\uc774\uac00 \uc790\uc2dd \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub192\uc774\ub97c \ubc18\uc601\ud558\uc9c0 \uc54a\uace0 \uc788\ub2e4\ub294 \uc0ac\uc2e4\uc5d0 \uc8fc\ubaa9\ud574 \uc8fc\uc138\uc694.\u00a0float\uc5d0 \uc544\ubb34\ub7f0 \ub300\uc751\ub3c4 \ud558\uc9c0 \uc54a\uc740 \uc0c1\ud0dc\uc758 \uc608\uc81c<\/a>\uac00 \uc900\ube44\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\"float\uc5d0<\/p>\n

#container:after {content:” “; display:block; clear:both;} \/* \ud45c\uc900\uacc4\uc5f4 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub300\uc751\ud558\ub294 float \ud574\uc81c\uc6a9 \uac00\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc0dd\uc131 *\/<\/p>\n

http:\/\/naradesign.net\/open_content\/reference\/float\/floatPseudoClear.html<\/a><\/p>\n

\"float\uc744<\/p>\n

float\uc744 display:inline-block \uc73c\ub85c clear \ud558\ub294 \ubc29\ubc95<\/p>\n

float\ub41c \uc790\uc2dd\uc694\uc18c\ub4e4\uc758 \ub192\uc774\ub97c \ubd80\ubaa8\uc5d0\uac8c \uc804\ub2ec\ud558\ub294 \ubc29\ubc95\uc73c\ub85c\uc368 \ubd80\ubaa8 \uc694\uc18c\uc5d0 display:inline-block \uc18d\uc131\uc744 \ubd80\uc5ec\ud558\ub294 \ubc29\ubc95\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. [\ucf54\uba58\ud2b8 \ud574\uc8fc\uc2e0 \uae40\uc601\ud658\ub2d8 \uac10\uc0ac\ud569\ub2c8\ub2e4] inline-block \uc18d\uc131\uc774 \ubd80\uc5ec\ub41c \uc694\uc18c\ub294 float\ub41c \uc790\uc2dd\uc758 \ub192\uc774\ub9cc\ud07c \ub298\uc5b4\ub0a9\ub2c8\ub2e4. [CSS 2.1 \uad00\ub828 \uc124\uba85 \ucf54\uba58\ud2b8 \ud574\uc8fc\uc2e0 \uc5f0\ud64d\uc11d\ub2d8 \uac10\uc0ac\ud569\ub2c8\ub2e4] \ubaa8\ub4e0 \ube0c\ub77c\uc6b0\uc800\uac00 \ub3d9\uc77c\ud558\uac8c float\uc744 \ud574\uc81c\ud558\ub294 \ubc29\ud5a5\uc73c\ub85c \uc791\uc6a9\ud569\ub2c8\ub2e4. \ub2e8, \ud45c\uc900\uacc4\uc5f4 \ube0c\ub77c\uc6b0\uc800\ub4e4\uc740 \ubd80\ubaa8 \uc694\uc18c\uc758 \ub108\ube44\uac00 \uc790\uc2dd\uc758 \ub108\ube44\ub9cc\ud07c \uc54c\ub9de\uac8c \uc904\uc5b4\ub4e4\uc9c0\ub9cc IE 6~7 \ube0c\ub77c\uc6b0\uc800\ub294 100%\uc758 \ub108\ube44\ub97c \uac16\uac8c \ub418\ub294 \ud2b9\uc9d5\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c inline-block \uc18d\uc131\uc744 \uac16\uac8c \ub41c \uc694\uc18c\ub294 \uc778\ub77c\uc778 \uc694\uc18c\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \ubc15\uc2a4\uac00 \ub05d\ub098\ub294 \uc9c0\uc810\uc5d0 \uc57d 4px \uc815\ub3c4\uc758 \uacf5\ubc31\uc744 \uac16\uac8c \ub418\ubbc0\ub85c \uc774\uc810 \uc720\ub150\ud558\uc2dc\ub294\uac8c \uc88b\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

\ucc38\uc870 :\u00a0http:\/\/naradesign.net\/wp\/2008\/05\/27\/144\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

loat\uc5d0 \uc544\ubb34\ub7f0 \ub300\uc751\ub3c4 \ud558\uc9c0 \uc54a\uc740 \uc0c1\ud0dc #container\ub294 \ubd80\ubaa8 \uc5d8\ub9ac\uba3c\ud2b8\uc774\uba70 #lnb\uc640 #content\ub294 \uc790\uc2dd \uc5d8\ub9ac\uba3c\ud2b8\ub85c\uc11c \ud604\uc7ac float\ub41c \uc0c1\ud0dc \uc785\ub2c8\ub2e4. \uc544\ub798 \uc608\uc81c\ub294 float\uc5d0 \uc544\ubb34\ub7f0 \ub300\uc751\uc744 \ud558\uc9c0 \uc54a\uc73c\uba74 \uc790\uc2dd \uc5d8\ub9ac\uba3c\ud2b8\uac00 \ubd80\ubaa8 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub192\uc774\uc5d0 \uc601\ud5a5\uc744… <\/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\/1391"}],"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=1391"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/1391\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}