{"id":116,"date":"2007-10-16T09:47:25","date_gmt":"2007-10-16T09:47:25","guid":{"rendered":"http:\/\/minicube.kr\/wp\/?p=116"},"modified":"2007-10-16T09:47:25","modified_gmt":"2007-10-16T09:47:25","slug":"css-box-model","status":"publish","type":"post","link":"https:\/\/blog.neue.nz\/?p=116","title":{"rendered":"CSS \ubc15\uc2a4 \ubaa8\ub378\uc5d0 \ub300\ud574"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>CSS \uc5d0\uc11c \uac00\uc7a5 \uc911\uc694\ud55c \uac1c\ub150<\/strong> \uc911 \ud558\ub098\uac00 <strong>\ubc15\uc2a4\ubaa8\ub378<\/strong>\uc785\ub2c8\ub2e4. \ubc15\uc2a4\ubaa8\ub378\uc758 \uac1c\ub150\uc744 \uc774\ud574\ud568\uc73c\ub85c\uc368 \uac01\uac01\uc758 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \ubb38\uc11c\uc5d0 \ubc30\uce58\ud558\ub294 \uc6d0\ub9ac\ub97c \uc54c \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774\ub97c \uc751\uc6a9\ud558\uc5ec \uc804\uccb4 \ub808\uc774\uc544\uc6c3\uc744 \uc815\uc758\ud560 \uc218\ub3c4 \uc788\uace0, \ucf58\ud150\uce20\ub97c \ub514\uc790\uc778\ud560 \uc218\ub3c4 \uc788\uae30 \ub54c\ubb38\uc5d0 CSS\ub97c \ud1b5\ud55c \ub514\uc790\uc778\uc744 \ud558\ub824\uba74 \ubc15\uc2a4\ubaa8\ub378\uc744 \uc774\ud574\ud558\ub294 \uac83\uc774 \ud544\uc218\ub77c\uace0 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6b0\uc120&#8230; \uccab\ubc88\uc9f8\ub85c \uc774\ud574\ud574\uc57c \ud560 \uba85\uc81c\ub294 <strong><span style=\"color:#0693e3\" class=\"tadv-color\">&#8220;\ubaa8\ub4e0 \uc5d8\ub9ac\uba3c\ud2b8, \ud0dc\uadf8\ub294 \ubc15\uc2a4 \ubaa8\ub378\uc774\ub2e4&#8221;<\/span><\/strong> \ub77c\ub294 \uac83\uc785\ub2c8\ub2e4. &lt;br>, &lt;b> \uac19\uc740 \ud45c\ud604\uc744 \uc704\ud55c \ud0dc\uadf8\ub97c \uc81c\uc678\ud558\uba74, \uc790\uc8fc \uc0ac\uc6a9\ud558\ub294 &lt;div>, &lt;span>, &lt;table>, &lt;p> \ub4f1\uc758 \ud0dc\uadf8\ub4e4\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uac01\ud615(\ubc15\uc2a4) \ud615\ud0dc\ub85c \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub450\ubc88\uc9f8\ub294 <strong><span style=\"color:#0693e3\" class=\"tadv-color\">&#8220;contents, padding, border, margin&#8221;<\/span><\/strong> \uc785\ub2c8\ub2e4. \ubaa8\ub4e0 \ubc15\uc2a4\ubaa8\ub378\uc740 \uc774\ub7ec\ud55c \uc18d\uc131\uc744 \uac00\uc9c0\uace0 \uc788\uace0 \uc774 \uc21c\uc11c\ub300\ub85c \ub458\ub7ec\uc2f8\uc5ec\uc788\ub2e4\uace0 \ubcf4\uc2dc\uba74 \ub418\uaca0\ub124\uc694. \ub610\ud55c padding, border, margin\uc774 \uac01\uac01 <strong>4\uac00\uc9c0 \uc18d\uc131<\/strong>\uc744 \uac00\uc9c0\uace0 \uc788\ub294\ub370, top, bottom, left, right \ub85c \ubd84\ub9ac\ud560 \uc218 \uc788\uc5b4\uc11c \uac01 \ubc29\ud5a5\uc758 \uc18d\uc131\uc744 \ub530\ub85c \uc9c0\uc815\ud574 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 <code>margin-right:2px; margin-left:2px;<\/code> \ub4f1\uc73c\ub85c \uc774\ub807\uac8c \ub530\ub85c \uc9c0\uc815\ud574 \uc904 \uc218 \uc788\uc73c\uba70, \uac01\uac01\uc758 \uc18d\uc131\uc740 \uc784\uc758\ub300\ub85c \uc870\ud569\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/box1_preserde.gif\" alt=\"\" class=\"wp-image-838\"\/><\/figure><\/div>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>contents<\/strong> : \uc21c\uc218\ud55c \ucf58\ud150\uce20<\/li><li><strong>padding<\/strong> : \ucf58\ud150\uce20\uc640 \uacbd\uacc4\uc120 \uc0ac\uc774\uc758 \uc5ec\ubc31<\/li><li><strong>border<\/strong> : \uacbd\uacc4\uc120. \uc774 \uc120 \uc790\uccb4\uc758 \ubaa8\uc591\uc774\ub098 \ub450\uaed8\ub3c4 \ubc14\uafc0 \uc218 \uc788\ub2e4.<\/li><li><strong>margin<\/strong> : \uacbd\uacc4\uc120 \ubc16\uc5d0\uc11c \ubc15\uc2a4\ubaa8\ub378\uc758 \ucd5c\uc885 \uacbd\uacc4\uc120\uae4c\uc9c0\uc758 \uc5ec\ubc31<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6d0\ub798 \uc774\ub860\uc0c1 \ubaa8\ub4e0 \ud0dc\uadf8\uc5d0\ub294 margin, padding, border\uc758 \ucd08\uae30\uac12\uc774 0\uc73c\ub85c \uc9c0\uc815\ub418\uc5b4\uc57c \ud558\ub294 \uac83\uc774 \ub9de\uc9c0\ub9cc <em>\uac01 \ube0c\ub77c\uc6b0\uc800\uc758 \uc124\uc815\uc5d0 \ub530\ub77c \uae30\ubcf8\uc801\uc73c\ub85c \uac00\uc9c0\uace0 \uc788\ub294 \uac04\uaca9\uc774 \uc874\uc7ac<\/em>\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uba74 \uc21c\uc11c \uc5c6\ub294 \ub9ac\uc2a4\ud2b8\ub97c \uc758\ubbf8\ud558\ub294 <code>&lt;UL><\/code> \ub0b4\uc758 \uc5d8\ub9ac\uba3c\ud2b8\uc778 <code>&lt;LI><\/code> \ud0dc\uadf8\uc758 \uacbd\uc6b0 \ubaa9\ub85d \ubaa8\uc591\uc744 \ub9cc\ub4e4\uc5b4\uc8fc\uae30 \uc704\ud574 \ubc84\ud2bc \ud615\ud0dc\uc640 \ud568\uaed8 \uae30\ubcf8\uc801 \ud328\ub529\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ubcf4\ud1b5 CSS\ub85c \ub514\uc790\uc778\ud558\uae30 \uc704\ud574\uc11c <code>&lt;LI><\/code> \uc18d\uc131\uc5d0 list-style:none, padding:0 \uc744 \uc801\uc6a9\ud574\uc8fc\ub294 \uac78 \ub9ce\uc774 \ubcf4\uc168\uc744 \uac70\uc5d0\uc694.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uac04\ub2e8\ud558\uac8c &lt;div>\ud0dc\uadf8\ub85c \ub9cc\ub4e0 \ubc15\uc2a4\uc5d0 \ud328\ub529\uc744 \uc801\uc6a9\ud55c \uc18c\uc2a4\ub97c \ud655\uc778\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \ud3b8\uc774 \ubc15\uc2a4\ubaa8\ub378\uc744 \uc774\ud574\ud558\ub294 \uac83\uc774 \ud6e8\uc52c \uc26c\uc6b8 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div style=\"width:400px;background:#f2cccc;\">\n&lt;div style=\"width:300px;background:#f4f4f4; padding:10px 20px; border:solid 2px red; margin-right:10px; margin-left:10px;\">\nTHIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. \n&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ubaa8\ub378\uc744 \ubd84\uc11d\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/box3_preserde.gif\" alt=\"\" class=\"wp-image-839\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\uccab\ubc88\uc9f8 div \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ubd89\uc740\uc0c9\uc758 \ubc30\uacbd\uc740 height\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uace0 width\ub9cc 400px\uc73c\ub85c \uc9c0\uc815\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc774 \uc5d8\ub9ac\uba3c\ud2b8\ub294 \uae30\ubcf8\uc801\uc73c\ub860 \uc544\ubb34 \uac83\ub3c4 \uc801\uc6a9\ud558\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc5d0 padding\uacfc margin\uc740 \ubaa8\ub450 0\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8 \uc548\uc758 \ub450\ubc88\uc9f8 div \uc5d8\ub9ac\uba3c\ud2b8\ub294 width\ub294 300px\ub85c \uc9c0\uc815\ud588\uc73c\uba70, padding\uc740 \uc0c1\ud558 10px, \uc88c\uc6b0 20px\uc774\uace0 border\ub294 \uc0c1\ud558\uc88c\uc6b0 \ubaa8\ub450 solid \ud615\ud0dc\uc758 2px, margin\uc740 \uc67c\ucabd\uacfc \uc624\ub978\ucabd\uc744 \uac01\uac01 10px\ub85c \uc815\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc989 \uc774 \ubc15\uc2a4\uc758 \uc804\uccb4 width\ub294 10(margin) + 2(border) + 20(padding) + 300(contents) + 20(padding) + 2(border) + 10(margin) = 364px \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc38\uace0\ub85c background-color \uc18d\uc131\ub3c4 \uc801\uc6a9\ub418\uc5b4\uc788\ub294\ub370 background \uc18d\uc131\uc740 contents + padding \uc601\uc5ed\uc5d0 \uc801\uc6a9\uc774 \ub429\ub2c8\ub2e4.<br>height\uc758 \uacbd\uc6b0 \ucf58\ud150\uce20\uc5d0 \ub530\ub77c \uc720\ub3d9\uc801\uc73c\ub85c \uacb0\uc815\ub418\ub3c4\ub85d \ub530\ub85c height \ub97c \uc8fc\uc9c0 \uc54a\uc544 \uc77c\uc815\ud55c \ub192\uc774\ub294 \uc5c6\uc9c0\ub9cc 2px \uc758 border\uac00 \uc0c1\ud558\uc5d0 \uc801\uc6a9\ub418\uc5b4 \uc788\uace0, padding\uc774 \uc0c1\ud558\uc5d0 10px \uc801\uc6a9\ub418\uc5b4 \uc788\ub294 \uac78 \ud655\uc778\ud560 \uc218 \uc788\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">margin\uacfc padding\uc5d0\uc11c \uc4f8 \ub2e8\uc704\ub294 px, em, % \ub4f1 \uc0c1\uad00\uc5c6\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>border\uc758 \uacbd\uc6b0 \uc57d\uac04 \ud2c0\ub9b0\ub370 \uacbd\uacc4\uc120\uc758 \ubaa8\uc591\uacfc \uc0c9\uc0c1\uc744 \ub530\ub85c \uc904 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \ucd94\uac00 \uc18d\uc131\uc774 \uc788\uc2b5\ub2c8\ub2e4. border-width \uc678\uc5d0 border-style, border-color \uc18d\uc131 \ub4f1\uc774 \uc788\uc2b5\ub2c8\ub2e4. border-style \uc18d\uc131\uc758 \uacbd\uc6b0 \uacbd\uacc4\uc120\uc758 \ubaa8\uc591\uc744 \uacb0\uc815\ud574\uc8fc\ub294\ub370, \uc0ac\uc6a9\ub418\ub294 \ubc0b\ubc0b\ud55c(?) \ud615\ud0dc\uc758 \uc2e4\uc120\uc778 &#8216;solid&#8217; \uac00 \uc790\uc8fc \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<br>border-color \uc18d\uc131\uc740 \ubcf4\uc2dc\ub2e4\uc2dc\ud53c \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud558\ub294\ub370 RGB\ucf54\ub4dc\ub098 \uc0c9\uc0c1\uba85\uc73c\ub85c \uc0ac\uc6a9\ud558\uad6c\uc694. \uc774 \uc138 \uc18d\uc131\uc744 \uc5f0\ub2ec\uc544 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5b4\uc11c border:solid 2px red; \ub4f1\uc73c\ub85c \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">1. margin \ubc0f padding \uc758 \uac04\ub7b5\ud55c \ud45c\uae30<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6d0\ub798 margin-top, margin-bottom \ub4f1\uc73c\ub85c \ub530\ub85c \ud45c\uae30\ud558\ub294 \uac83\uc774 \uc6d0\uce59\uc774\uc9c0\ub9cc \uc774\ub97c \uac04\ub2e8\ud558\uac8c margin \uc18d\uc131 \ud558\ub098\ub85c \uc81c\uc5b4\ud560 \uc218 \uc788\uc744 \ubfd0\ub9cc \uc544\ub2c8\ub77c \uc77c\ubd80\uc758 \uac12\uc774 \uac19\uc73c\uba74 \ub354 \ucd95\uc57d\ud558\uc5ec \uc4f8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc904\uc5ec \uc4f8 \ub54c\uc5d0\ub294 <code>margin:5px 10px 15px 20px;<\/code> \ub4f1\uc73c\ub85c \ub124\uac1c\uc758 \uac12\uc744 \uc5f0\ub2ec\uc544 \uc4f8 \uc218 \uc788\ub294\ub370 &#8216;\uc0c1\uc6b0\ud558\uc88c&#8217; \uc21c\uc11c\uc785\ub2c8\ub2e4. \uc774\ub294 \uc704\ucabd\ubd80\ud130 \uc2dc\uc791\ud574\uc11c \uc2dc\uacc4\ubc29\ud5a5\uc73c\ub85c \ub3cc\uc544\uac00\ub294 \uac83\uacfc \uac19\uc73c\ub2c8 \uc2dc\uacc4\ubc29\ud5a5\uc774\ub77c\ub294 \uac83\ub9cc \uae30\uc5b5\ud558\uc154\ub3c4 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>1\uac1c &#8211; <code>margin:5px;<\/code> \u2192 \uc0c1\ud558 \uc88c\uc6b0\uc5d0 \ubaa8\ub450 \ub611\uac19\uc774 5px \uc758 \ub9c8\uc9c4\uc774 \uc801\uc6a9\ub429\ub2c8\ub2e4.<\/li><li>2\uac1c &#8211; <code>margin:5px 10px;<\/code> \u2192 \uc0c1\ud558\uc5d0\ub294 5px, \uc88c\uc6b0\uc5d0\ub294 10px \uc758 \ub9c8\uc9c4\uc774 \uc801\uc6a9\ub429\ub2c8\ub2e4.<\/li><li>3\uac1c &#8211; <code>margin:5px 10px 15px;<\/code> \u2192 \uc0c1 5px \uc88c\uc6b0 10px, \ud558 15px \uc758 \ub9c8\uc9c4\uc774 \uc801\uc6a9\ub429\ub2c8\ub2e4.<\/li><li>4\uac1c &#8211; <code>margin:5px 10px 15px 20px;<\/code> \u2192 &#8216;\uc0c1\uc88c\ud558\uc6b0&#8217; \ubc29\ud5a5\uc5d0 \ubaa8\ub450 \ubcc4\ub3c4\uc758 \ub9c8\uc9c4\uc774 \uc801\uc6a9\ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub9cc \uc774\ub807\uac8c \uc904\uc5ec\uc11c \uc4f8 \uacbd\uc6b0\uc5d4 \ud55c\uac00\uc9c0 \uc18d\uc131\ub9cc \uc9c0\uc815\ud588\uc744 \ub54c\uc640 \ub2ec\ub9ac, <span style=\"color:#cf2e2e\" class=\"tadv-color\">\ub124\uac00\uc9c0 \uac12\uc744 \ud55c\uaebc\ubc88\uc5d0 \uc9c0\uc815\ud558\ub294 \ud6a8\uacfc<\/span>\uac00 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc8fc\uc758\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9cc\uc57d \ucd08\uae30 \ub9c8\uc9c4\uc774 \ubaa8\ub450 0\uc73c\ub85c \uc9c0\uc815\ub418\uc5b4 \uc788\ub294 \uc0c1\ud669\uc5d0\uc11c margin:9px 0 0 0; \uacfc margin-top:9px; \ub294 \ubcf4\uc774\ub294 \uac83\uc740 \uac19\uc9c0\ub9cc \uc758\ubbf8\uac00 \uac19\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4. \uc804\uc790\ub294 \uc774\uc804 \uc18d\uc131\uc5d0\uc11c \uc9c0\uc815\ub41c margin-left\ub098 margin-right \uac12\uc774 \ub2e4\uc2dc 0\uc73c\ub85c \uc124\uc815\ub418\uc9c0\ub9cc, \ud6c4\uc790\ub294 \ub530\ub85c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc5d0 \uc774\uc804 \uac12\uc5d0 \ubcc0\ud654\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. \uc5ec\ub7ec margin \uc0ac\uc774\uc758 \ucda9\ub3cc<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\ud654\uba74 \uc0c1\uc5d0\uc11c \uc138\ub85c\ubc29\ud5a5(\uc0c1\ud558)\uc5d0 \uc5f0\ub2ec\uc544 \uc788\ub294 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uacbd\uc6b0 margin \uc18d\uc131\uc774 \ub9de\ub2ff\uac8c \ub418\uba74 \uc791\uc740 \ucabd\uc774 \uc5c6\uc5b4\uc838 \ubcd1\ud569\ub418\ub294 \ud604\uc0c1\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uccab\ubc88\uc9f8 div \uc5d8\ub9ac\uba3c\ud2b8\uac00 margin:10px 0;\uc73c\ub85c \uc124\uc815\ub418\uc5b4 \uc788\uace0, \ub450\ubc88\uc9f8 div \uc5d8\ub9ac\uba3c\ud2b8\uac00 margin:20px 0 55px;\ub85c \uc124\uc815\ub418\uc5b4 \uc788\ub2e4\uba74 \uccab\ubc88\uc9f8\uc758 \uc544\ub798 \ub9c8\uc9c4 10px\uc640 \ub450\ubc88\uc9f8\uc758 \uc704 \ub9c8\uc9c4 20px\uac00 \ub354\ud574\uc838\uc11c \ucd1d 30px\uc758 \ub9c8\uc9c4\uc774 \ub4e4\uc5b4\uac00\uc57c \uc6d0\ub798 \uc758\ub3c4\uc5d0 \ub9de\uc2b5\ub2c8\ub2e4\ub9cc, \uc774\ub54c \ub9c8\uc9c4\uc774 \ubcd1\ud569\ub418\uc5b4 \uc791\uc740 \ub9c8\uc9c4\uc740 \uc0ac\ub77c\uc9c0\uace0 20px\uc758 \ub9c8\uc9c4\uc774 \uc801\uc6a9\ub418\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ub97c \ud53c\ud558\uae30 \uc704\ud574\uc11c\ub294 \uacbd\uacc4\uc120\uc774 \uc5c6\ub294 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uacbd\uc6b0 \ud55c\ucabd\uc5d0\ub294 \ub9c8\uc9c4 \ub300\uc2e0 \ud328\ub529\uc744 \uc801\uc6a9\ud574\uc8fc\uba74 \ub429\ub2c8\ub2e4. \uacbd\uacc4\uc120(border)\uc774 \uc788\ub294 \uacbd\uc6b0\ub294&#8230; \ucf54\ub529\uc744 \ubc14\uafd4\uc57c\uaca0\uc9c0\uc694. ^^<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc, \uc774\ub7ec\ud55c \ubcd1\ud569\uc740 \uac00\ub85c\ubc29\ud5a5(\uc67c\ucabd, \uc624\ub978\ucabd) \ub9c8\uc9c4\uacfc float\uac00 \uc801\uc6a9\ub41c \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub9c8\uc9c4\uc758 \uacbd\uc6b0\uc5d4 \uc801\uc6a9\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uc774\ub7f4 \ub54c\uc5d0\ub294 \uac71\uc815\ud558\uc9c0 \uc54a\uc73c\uc154\ub3c4 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. \uc74c\uc218\uac12\uc758 margin, padding \uc0ac\uc6a9 \uac00\ub2a5<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6d0\ub798 \ub9c8\uc9c4\uacfc \ud328\ub529 \uac12\uc740 <strong>\uc591\uc218 \uac12<\/strong>\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc6d0\uce59\uc774\uc9c0\ub9cc \uc74c\uc218\ub97c \uc0ac\uc6a9\ud574\uc11c \ud2b9\uc774\ud55c \ud6a8\uacfc\ub97c \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc8fc\ub85c \uacb9\uce58\ub294 \ud6a8\uacfc \ub4f1\uc744 \uc5f0\ucd9c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/box2_preserde.gif\" alt=\"\" class=\"wp-image-841\" width=\"154\" height=\"29\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ubb38\uad6c\ub294 \uc544\ub798 <span style=\"text-decoration: underline;\"><span style=\"text-decoration: underline\" class=\"underline\">special effect<\/span><\/span>\ub77c\ub294 \ubb38\uad6c\uac00 \uc788\ub294 div \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 margin-top:-10px; \ub97c \uc900 \uac83\uc785\ub2c8\ub2e4. \ub2e4\ub9cc \uc8fc\uc758\ud558\uc2e4 \uc810\uc740 \uc6d0\ub798 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ub9c1\ud06c\uac00 \uc788\uc744 \uacbd\uc6b0\uc5d0 \uc544\ub798 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub9c8\uc9c4\uc744 \uc870\uc815\ud558\uc5ec \uc6d0\ub798 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc601\uc5ed\ub97c \ub36e\uc744 \uacbd\uc6b0 \ub9c1\ud06c\uac00 \uc801\uc6a9\ub418\uc9c0 \uc54a\ub294 \ud604\uc0c1\uc774 \ubc1c\uc0dd\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><span style=\"color:#f78da7\" class=\"tadv-color\">Update. padding property\uc5d0\ub294 \uc74c\uc218\ub294 \uc801\uc6a9\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/span><\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">4. \uc778\ub77c\uc778 \ud0dc\uadf8\uc640 \ube14\ub85d \ud0dc\uadf8\uc758 margin, padding \uc801\uc6a9\uc758 \ucc28\uc774<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\ud45c\ud604\uc744 \uc704\ud55c \ud0dc\uadf8\ub97c \uc81c\uc678\ud55c \uc5d8\ub9ac\uba3c\ud2b8\ub4e4\uc740 \ubcf4\ud1b5 \ube14\ub85d \uc18d\uc131\uc744 \uac00\uc9c4 \ud0dc\uadf8\uc640 \uc778\ub77c\uc778 \uc18d\uc131\uc744 \uac00\uc9c4 \ud0dc\uadf8\uac00 \uc874\uc7ac\ud569\ub2c8\ub2e4. \ube14\ub85d \uc18d\uc131 \ud0dc\uadf8\ub294 <strong>&lt;div><\/strong>\ub85c \ub300\ud45c\ub418\uba70 \uc774\uc640 \ube44\uad50\ub418\ub294 \uc778\ub77c\uc778 \ud0dc\uadf8\uac00 <strong>&lt;span><\/strong>\ud0dc\uadf8\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ube14\ub85d \uc18d\uc131 \ud0dc\uadf8\ub294 \uc704 \uc544\ub798\ub85c \ubd84\ub9ac\ub41c \uc601\uc5ed\uc744 \uac00\uc9c0\uae30 \ub54c\ubb38\uc5d0 \uc606\uc73c\ub85c \ubcc4\ub3c4\uc758 \ucf58\ud150\uce20\ub97c \ubc30\uce58\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc778\ub77c\uc778 \uc18d\uc131 \ud0dc\uadf8\ub294 \ube14\ub85d\uc744 \uc0dd\uc131\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uc591 \uc606\uc73c\ub85c\ub3c4 \ucf58\ud150\uce20\ub97c \ubc30\uce58\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc778\ub77c\uc778 \ud0dc\uadf8\ub4e4\uc5d0 margin\uc774\ub098 padding \uc18d\uc131\uc744 \uc801\uc6a9\ud560 \ub54c\uc5d0\ub294 \uc88c\uc6b0 \ubc29\ud5a5\uc758 \uac12\uc740 \uc801\uc6a9\ub418\uc9c0\ub9cc, \uc0c1\ud558 \uac12\uc740 \uc801\uc6a9\ub418\uc9c0 \uc54a\ub294 \uac83\uc744 \uc720\uc758\ud558\uc154\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS \uc18d\uc131 \uc911 display \uc18d\uc131\uc744 \uc9c0\uc815\ud558\uc5ec \uc6d0\ub798\uc758 \uc778\ub77c\uc778 \ud0dc\uadf8\ub098 \ube14\ub85d \ud0dc\uadf8\ub4e4\ub3c4 \uc5ed\ud560\uc744 \uc11c\ub85c \ubc14\uafb8\ub294 \uac83\uc774 \uac00\ub2a5\ud558\uae34 \ud558\uc9c0\ub9cc display:inline; \ub4f1\uc73c\ub85c \uac15\uc81c\uc801\uc73c\ub85c \uc778\ub77c\uc778 \uc18d\uc131\uc73c\ub85c \ubcc0\uacbd\ud55c &lt;div>\uc5d8\ub9ac\uba3c\ud2b8\ub3c4 \uc5ed\uc2dc \uc0c1\ud558 \ubc29\ud5a5\uc758 \ub9c8\uc9c4\uacfc \ud328\ub529\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uc8fc\uc758\ud574\uc8fc\uc138\uc694~<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. \ud14c\ub450\ub9ac \ub123\uae30 (border\uc18d\uc131)<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uacbd\uacc4\uc120\uc740 \uc138\uac00\uc9c0 \uc18d\uc131\uc744 \ubcc4\ub3c4\ub85c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc5b4\ub5a4 \ubaa8\uc591\uc778\uc9c0 \ubcf4\uc5ec\uc904 style\uacfc \ub450\uaed8\ub97c \ub9d0\ud558\ub294 width, \uc0c9\uc0c1\uc744 \ub9d0\ud558\ub294 color \uc18d\uc131\uc785\ub2c8\ub2e4. \uc774 \uc18d\uc131\uc774 \uc0c1\ud558\uc88c\uc6b0\uc5d0 \uc801\uc6a9\ub418\uc5b4 border\uc5d0 \uad00\ub828\ub41c \uc18d\uc131\uc740 \ucd1d 12\uac1c\uc758 \uc870\ud569\uc774 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\ubb3c\ub860 \uc774\uc640 \ubcc4\ub3c4\ub85c \uad6c\ubd84\ub418\ub294 \uc18d\uc131\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. border-collapse \uac19\uc740&#8230;)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">style\uc758 \uacbd\uc6b0 border-top-style, border-bottom-style, &#8230; , border-style \uc18d\uc131\uc774 \uc788\uc744 \uc218 \uc788\ub294\ub370 \uacbd\uacc4\uc120\uc758 \ubaa8\uc591\uc744 \uacb0\uc815\ud569\ub2c8\ub2e4. \uac00\uc7a5 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \uc2e4\uc120\uc758 \uacbd\uc6b0 &#8216;solid&#8217;\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. solid, dashed, dotted, double, groove, inset, outset, ridge \ub4f1\uc758 \uc18d\uc131\uc774 \uc874\uc7ac\ud569\ub2c8\ub2e4\ub9cc \uac01\uac01\uc758 \ubaa8\uc591\uc740 \uc9c1\uc811 \ub9cc\ub4e4\uc5b4\ubcf4\uc138\uc694~ <s>(\uc6b0\ub9ac\ub098\ub77c \ud2b9\uc131\uc0c1 \ud654\ub824\ud55c \uadf8\ub798\ud53d\uc744 \uc790\ub791\ud558\ub294 \uad6d\ub0b4 \uc6f9\uc0ac\uc774\ud2b8 \ud2b9\uc131\uc0c1 \uc774 \uc18d\uc131\ub4e4\uc744 \ub2e4 \uc0ac\uc6a9\ud560 \uc77c\uc740 \uc5c6\uc744 \uac83 \uac19\uc2b5\ub2c8\ub2e4\ub9cc-_-)<\/s> width\ub294 \ub9d0 \uadf8\ub300\ub85c \ub450\uaed8\ub97c \ub9d0\ud558\uace0, color \uc5ed\uc2dc RGB\ucf54\ub4dc \ub610\ub294 \uc0c9\uc0c1\uba85\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">border-right:solid 2px red; \ub4f1\uc73c\ub85c \ud55c \ubc29\ud5a5\uc758 \uacbd\uacc4\uc120 \uc2a4\ud0c0\uc77c\uc744 \uac04\ub7b5\ud558\uac8c \uc9c0\uc815\ud560 \uc218\ub3c4 \uc788\uace0 \ub124 \ubc29\ud5a5\uc774 \ub2e4 \uac19\uc744 \uacbd\uc6b0 <strong>border:solid 2px red;<\/strong> \uac19\uc740 \uc2dd\uc73c\ub85c \ub354 \uac04\ub2e8\ud558\uac8c \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc18d\uc131\uc758 \uc21c\uc11c\ub294 \uc0c1\uad00\uc5c6\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\uba70 \uc0dd\ub7b5\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc, \uc0dd\ub7b5\ud560 \uacbd\uc6b0\uc5d0\ub294 \uae30\ubcf8\uac12\uc73c\ub85c \ucc98\ub9ac\ub418\uac8c \ub418\uc8e0.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">6. IE6 Quirks \ubaa8\ub4dc \uc774\ud558\uc5d0\uc11c\uc758 \uc801\uc6a9 \uc774\uc0c1<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uad6d\ub0b4\uc5d0\uc11c \uac00\uc7a5 \ub192\uc740 \uc810\uc720\uc728\uc744 \uc790\ub791\ud558\ub294 IE6\uc758 \uacbd\uc6b0, DTD\ub97c \ubcc4\ub3c4\ub85c \uc9c0\uc815\ud558\uc9c0 \uc54a\uace0 Quirks\ubaa8\ub4dc\ub85c \ub3cc\ub9b4 \uacbd\uc6b0\uc5d0\ub294 \ubc15\uc2a4 \ubaa8\ub378\uc758 \ud574\uc11d\uc774 \uc57d\uac04 \ud2c0\ub824\uc9d1\ub2c8\ub2e4. \ub610\ud55c 5.5 \uc774\ud558 \ubc84\uc804\uc5d0\uc11c\ub294 \uc0c1\uad00\uc5c6\uc774 \ubc1c\uc0dd\ud558\ub294 \ud604\uc0c1\uc778\ub370\uc694.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/box-model_preserde.gif\" alt=\"\" class=\"wp-image-843\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6d0\ub798 width \uc18d\uc131\uc73c\ub85c \uc9c0\uc815\ub41c \uae38\uc774\ub294 \ubc15\uc2a4\ubaa8\ub378 \ub0b4\uc5d0\uc11c\ub294 contents\uc5d0 \ub300\ud574 \uc801\uc6a9\ub418\uace0 margin, border, padding\uacfc \ubcc4\ub3c4\ub85c \uc801\uc6a9\ub418\ub294 \uac83\uc774 \ub9de\uc2b5\ub2c8\ub2e4\ub9cc, <strong>IE6\uc758 Quirks\ubaa8\ub4dc\uc640 IE5.5 \ubc84\uc804 \uc774\ud558\uc5d0\uc11c\ub294 contents\uc640 \ud568\uaed8 padding, border \ub97c \ud569\ud55c \uac83\uc73c\ub85c \uacc4\uc0b0\ud558\ub294 \ubc84\uadf8\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c\ub294 \ud45c\uc900 \ubaa8\ub4dc\ub85c \ub3d9\uc791\ud560 \uc218 \uc788\ub3c4\ub85d \uc815\ud655\ud55c DTD\ub97c \uc9c0\uc815\ud574\uc8fc\ub294 \ubc29\ubc95\uc774 1\ucc28\uc801\uc778 \ub300\ucc45\uc785\ub2c8\ub2e4\ub9cc IE5.5 \uc774\ud558 \ubc84\uc804\uc5d0\uc11c\ub294 \uc774\uac83\ub3c4 \uc801\uc6a9\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \ucee8\ub514\uc158 \ucf54\ub4dc \ub610\ub294 CSS \ud575\uc744 \uc0ac\uc6a9\ud574\uc8fc\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc989 IE\uad6c\ubc84\uc804\uc5d0\ub9cc \uc801\uc6a9\ub418\ub294 CSS\ud575\uc744 \uc0ac\uc6a9\ud558\uc154\uc11c \uc5ec\uae30\uc5d0\ub9cc \uc801\uc6a9\ub418\ub294 width\ub97c \uc9c1\uc811 \uacc4\uc0b0\ud558\uc154\uc11c \ub123\uc5b4\uc8fc\uc154\uc57c \ud558\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">References: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.456bereastreet.com\/archive\/200612\/internet_explorer_and_the_css_box_model\/\" target=\"_blank\">https:\/\/www.456bereastreet.com\/archive\/200612\/internet_explorer_and_the_css_box_model\/<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7. IE6 \uc5d0\uc11c float\uc18d\uc131 \uc801\uc6a9\ub41c div\uc758 \uc88c\uc6b0 \ub9c8\uc9c4 \ub450\ubc30 \ud604\uc0c1<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ud604\uc0c1\uc740 \ubc15\uc2a4 \ubaa8\ub378\uacfc\ub294 \ud06c\uac8c \uad00\ub828\uc740 \uc5c6\uc9c0\ub9cc, \ub808\uc774\uc544\uc6c3\/\ucf58\ud150\uce20 \uad6c\uc131 \uc2dc div \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub9c8\uc9c4\uc744 \uc870\uc815\ud558\uba74\uc11c \uc774\uc720\uc5c6\uc774 \uc77c\uc5b4\ub098\ub294 \ubc84\uadf8\uc774\uae30 \ub54c\ubb38\uc5d0 \ub2e4\ub8e8\uc5b4 \ubd05\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ube14\ub85d \uc18d\uc131\uc758 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 float \uc18d\uc131\uc744 \uc8fc\uba74 \ube14\ub85d \uc18d\uc131\uc744 \uc720\uc9c0\ud558\uba74\uc11c\ub3c4 \uac00\ub85c\ub85c \ubc30\uc5f4\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc774 \uacbd\uc6b0\uac00 \ub808\uc774\uc544\uc6c3\uc744 \uc7a1\uc744 \ub54c \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \ud615\ud0dc\uc785\ub2c8\ub2e4\ub9cc, IE6\uc758 \uacbd\uc6b0 float\ub41c \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uacbd\uc6b0 \uac00\ub85c \ubc29\ud5a5\uc758 \ub9c8\uc9c4\uc774 \uc801\uc6a9\ub418\ub294 \uacbd\uc6b0 \uc774 \ub9c8\uc9c4\uc774 \ub450\ubc30\uc529 \uc801\uc6a9\ub418\ub294 \ud604\uc0c1\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc774\uac83\uc740 \uc704\uc758 \uacbd\uc6b0\uc640\ub294 \ub2ec\ub9ac \uba85\ubc31\ud55c \ubc84\uadf8\ub77c\uace0 \ud560 \uc218 \uc788\uaca0\ub124\uc694.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \uac00\ub85c 500\ud53d\uc140\uc758 div \uc5d8\ub9ac\uba3c\ud2b8 \ub0b4\uc5d0 \ub450\uac1c\uc758 div\uc5d8\ub9ac\uba3c\ud2b8\ub97c float\uc18d\uc131\uc744 \uc8fc\uc5b4 \ubc30\uc5f4\ud558\ub294 \uacbd\uc6b0\ub97c \uc0dd\uac01\ud574\ubcf4\uc8e0. \uccab\ubc88\uc9f8 \uc5d8\ub9ac\uba3c\ud2b8\ub294 100\ud53d\uc140\uc758 \uac00\ub85c\uae38\uc774\ub97c \uac00\uc9c0\uace0 \ub450\ubc88\uc9f8 \uc5d8\ub9ac\uba3c\ud2b8\uac00 \uc67c\ucabd \ub9c8\uc9c4\uc744 50px\ub97c \uac00\uc9c0\uace0 350px\uc758 \uae38\uc774\ub97c \uac00\uc9c0\uac8c \ub418\uba74 <strong>100 + 50 + 350 = 500<\/strong> \uc758 \uc2dd\uc5d0 \uc758\ud574 \uc815\ud655\ud788 \ub9de\uc544 \ub5a8\uc5b4\uc9c0\uac8c \ub418\ub294 \uac83\uc774 \uc774\ub860\uc0c1 \ub9de\uc9c0\ub9cc..<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div style=\"width:500px;\">\n    &lt;div style=\"float:left;width:100px;\">\n    LAYER1\n    &lt;\/div>\n    &lt;div style=\"float:left;margin-left:50px;width:350px;\">\n    LAYER2\n    &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud0c0 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \uc758\ub3c4\ud55c \ub300\ub85c \uc815\ud655\ud788 \ubcf4\uc774\uc9c0\ub9cc, IE6\uc758 \uacbd\uc6b0 \ubc84\uadf8 \ub54c\ubb38\uc5d0 \ub9c8\uc9c4\uc774 \ub450\ubc30\uac00 \ub418\uc5b4 100px \uc758 \ub9c8\uc9c4\uc774 \uc801\uc6a9\ub418\uc8e0. \uc774\uac83\uc740 \uc804\uccb4 \uae38\uc774 500px \ub97c \ub118\uc5b4\uc11c\uac8c \ub418\uc5b4 \ub450\ubc88\uc9f8 \uc5d8\ub9ac\uba3c\ud2b8\ub294 \uccab\ubc88\uc9f8 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \ub2e4\uc74c \uc904\ub85c \ub118\uc5b4\uac00\uac8c \ub418\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ubc84\uadf8\ub97c \ud574\uacb0\ud558\ub824\uba74 <strong>float\ub41c \ub450\uac1c\uc758 div \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 display:inline; \uc18d\uc131\uc744 \uc8fc\uc5b4\uc11c<\/strong> \uad50\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4\ub9cc, \uc774 \uc18d\uc131\uc740 \uc778\ub77c\uc778\uc73c\ub85c \ubc14\ub00c\ub294 \uac83\uc774 \uc544\ub2c8\uace0 \ub2e8\uc21c\ud788 IE\uc758 \ubc84\uadf8\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c \uc874\uc7ac\ud569\ub2c8\ub2e4. \uc5ec\uc804\ud788 \uc774 div\uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc18d\uc131\uc740 \ube14\ub85d \uc18d\uc131\uc785\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS \uc5d0\uc11c \uac00\uc7a5 \uc911\uc694\ud55c \uac1c\ub150 \uc911 \ud558\ub098\uac00 \ubc15\uc2a4\ubaa8\ub378\uc785\ub2c8\ub2e4. \ubc15\uc2a4\ubaa8\ub378\uc758 \uac1c\ub150\uc744 \uc774\ud574\ud568\uc73c\ub85c\uc368 \uac01\uac01\uc758 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \ubb38\uc11c\uc5d0 \ubc30\uce58\ud558\ub294 \uc6d0\ub9ac\ub97c \uc54c \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774\ub97c \uc751\uc6a9\ud558\uc5ec \uc804\uccb4 \ub808\uc774\uc544\uc6c3\uc744 \uc815\uc758\ud560 \uc218\ub3c4 \uc788\uace0, \ucf58\ud150\uce20\ub97c \ub514\uc790\uc778\ud560 \uc218\ub3c4 \uc788\uae30 \ub54c\ubb38\uc5d0 CSS\ub97c \ud1b5\ud55c \ub514\uc790\uc778\uc744 \ud558\ub824\uba74 \ubc15\uc2a4\ubaa8\ub378\uc744 \uc774\ud574\ud558\ub294 \uac83\uc774 \ud544\uc218\ub77c\uace0 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6b0\uc120&#8230; \uccab\ubc88\uc9f8\ub85c \uc774\ud574\ud574\uc57c \ud560 \uba85\uc81c\ub294 &#8220;\ubaa8\ub4e0 \uc5d8\ub9ac\uba3c\ud2b8, \ud0dc\uadf8\ub294 \ubc15\uc2a4 \ubaa8\ub378\uc774\ub2e4&#8221; \ub77c\ub294 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":838,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[35,42,45],"class_list":["post-116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-box-model","tag-css","tag-css-"],"_links":{"self":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=116"}],"version-history":[{"count":0,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/116\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}