{"id":1235,"date":"2025-03-07T18:30:00","date_gmt":"2025-03-07T09:30:00","guid":{"rendered":"https:\/\/seuheu.com\/?p=1235"},"modified":"2025-03-04T11:17:07","modified_gmt":"2025-03-04T02:17:07","slug":"html-css-css%ec%97%90%ec%84%9c-box-sizing-border-box%ec%9d%84-%ec%82%ac%ec%9a%a9%ed%95%b4%ec%95%bc-%ed%95%98%eb%8a%94-%ec%9d%b4%ec%9c%a0","status":"publish","type":"post","link":"https:\/\/seuheu.com\/?p=1235","title":{"rendered":"[HTML &amp; CSS] CSS\uc5d0\uc11c box-sizing: border-box;\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc774\uc720"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p><br><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\ubaa9\ucc28<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\ubaa9\ucc28 \ud1a0\uae00\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/seuheu.com\/?p=1235\/#box-sizing_border-box%EB%A1%9C_%ED%95%B4%EA%B2%B0\" >box-sizing: border-box;\ub85c \ud574\uacb0!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/seuheu.com\/?p=1235\/#%EB%AA%A8%EB%93%A0_%EC%9A%94%EC%86%8C%EC%97%90_border-box_%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0\" >\ubaa8\ub4e0 \uc694\uc18c\uc5d0 border-box \uc801\uc6a9\ud558\uae30<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/seuheu.com\/?p=1235\/#border-box%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4_%EC%A2%8B%EC%9D%80_%EC%A0%90\" >border-box\ub97c \uc0ac\uc6a9\ud558\uba74 \uc88b\uc740 \uc810<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/seuheu.com\/?p=1235\/#1_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9D%B4_%EC%98%88%EC%B8%A1_%EA%B0%80%EB%8A%A5\" >1. \ub808\uc774\uc544\uc6c3\uc774 \uc608\uce21 \uac00\ub2a5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/seuheu.com\/?p=1235\/#2_%EB%94%94%EC%9E%90%EC%9D%B8%ED%95%A0_%EB%95%8C_%ED%8E%B8%EB%A6%AC%ED%95%A8\" >2. \ub514\uc790\uc778\ud560 \ub54c \ud3b8\ub9ac\ud568<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/seuheu.com\/?p=1235\/#3_%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90_%EC%9C%A0%EB%A6%AC%ED%95%A8\" >3. \ubc18\uc751\ud615 \ub514\uc790\uc778\uc5d0 \uc720\ub9ac\ud568<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/seuheu.com\/?p=1235\/#%EC%A0%95%EB%A6%AC\" >\uc815\ub9ac<\/a><\/li><\/ul><\/nav><\/div>\n<br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>\uc6f9 \uac1c\ubc1c\ud560 \ub54c <code>width<\/code>\uc640 <code>padding<\/code>\uc744 \uc124\uc815\ud558\uba74 \uc608\uc0c1\uacfc \ub2e4\ub974\uac8c \ub808\uc774\uc544\uc6c3\uc774 \uae68\uc9c0\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<br>\uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc74c\uacfc \uac19\uc774 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud588\ub2e4\uace0 \uac00\uc815\ud574\ubcf4\uc790.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".box {\n  width: 200px;\n  padding: 50px;\n  border: 10px solid black;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.box<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">200px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">padding<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">border<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">10px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">solid<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">black<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc774 \uacbd\uc6b0 <code>.box<\/code>\uc758 <strong>\uc2e4\uc81c \ub108\ube44<\/strong>\ub294 \uc5bc\ub9c8\uc77c\uae4c?<br>\ubcf4\ud1b5 <code>200px - 50px(\uc88c) - 50px(\uc6b0) = 100px<\/code>\uc774 \ub420 \uac70\ub77c\uace0 \uc0dd\uac01\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc,<br>\uc2e4\uc81c\ub85c\ub294 <code>width<\/code>\uac00 <strong>\ucee8\ud150\uce20 \uc601\uc5ed(content box)\ub9cc\uc744 \uc758\ubbf8<\/strong>\ud558\uae30 \ub54c\ubb38\uc5d0 \uc544\ub798\ucc98\ub7fc \uacc4\uc0b0\ub41c\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"200px (content) + 50px (left padding) + 50px (right padding)\n+ 10px (left border) + 10px (right border)\n= 320px\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">200px (content) + 50px (left padding) + 50px (right padding)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">+ 10px (left border) + 10px (right border)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">= 320px<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc989, <code>padding<\/code>\uacfc <code>border<\/code>\uac00 <code>width<\/code>\uc5d0 \ud3ec\ud568\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 <strong>\uc6d0\ud558\ub294 \ud06c\uae30\ubcf4\ub2e4 \ucee4\uc9c0\ub294 \ubb38\uc81c\uac00 \ubc1c\uc0dd<\/strong>\ud55c\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"box-sizing_border-box%EB%A1%9C_%ED%95%B4%EA%B2%B0\"><\/span><code>box-sizing: border-box;<\/code>\ub85c \ud574\uacb0!<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>\uc774 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub824\uba74 <code>box-sizing: border-box;<\/code>\ub97c \uc801\uc6a9\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".box {\n  width: 200px;\n  padding: 50px;\n  border: 10px solid black;\n  box-sizing: border-box;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.box<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">200px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">padding<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">border<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">10px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">solid<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">black<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">box-sizing<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">border-box<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><br><\/p>\n\n\n\n<p>\uc774\ub807\uac8c \uc124\uc815\ud558\uba74 <code>width: 200px;<\/code>\uc774 <strong>padding\uacfc border\uae4c\uc9c0 \ud3ec\ud568\ud55c \ud06c\uae30<\/strong>\uac00 \ub41c\ub2e4.<br>\uc989, \uc804\uccb4 \ub108\ube44\uac00 200px\uc744 \uc720\uc9c0\ud558\uba74\uc11c \ub0b4\ubd80 <code>content<\/code> \ud06c\uae30\uac00 \uc790\ub3d9\uc73c\ub85c \uc870\uc808\ub41c\ub2e4.<br>\uacc4\uc0b0 \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"200px (\uc804\uccb4 \ubc15\uc2a4 \ud06c\uae30) - 10px (left border) - 10px (right border)\n- 50px (left padding) - 50px (right padding)\n= 80px (content \uc601\uc5ed \ud06c\uae30)\n\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">200px (\uc804\uccb4 \ubc15\uc2a4 \ud06c\uae30) - 10px (left border) - 10px (right border)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">- 50px (left padding) - 50px (right padding)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">= 80px (content \uc601\uc5ed \ud06c\uae30)<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc989, <code>box-sizing: border-box;<\/code>\ub97c \uc801\uc6a9\ud558\uba74 \uc694\uc18c\uc758 \ucd1d \ud06c\uae30\uac00 <strong>\uc608\uc0c1\ud55c \ub300\ub85c \uc815\ud655\ud558\uac8c \uc720\uc9c0<\/strong>\ub41c\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EB%AA%A8%EB%93%A0_%EC%9A%94%EC%86%8C%EC%97%90_border-box_%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0\"><\/span>\ubaa8\ub4e0 \uc694\uc18c\uc5d0 <code>border-box<\/code> \uc801\uc6a9\ud558\uae30<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>\uc6f9\uc0ac\uc774\ud2b8 \uc804\uccb4\uc5d0 <code>box-sizing: border-box;<\/code>\ub97c \uc801\uc6a9\ud558\uba74<br>\ub808\uc774\uc544\uc6c3\uc744 \ud6e8\uc52c \ub354 \uc27d\uac8c \ub2e4\ub8f0 \uc218 \uc788\ub2e4<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"* {\n  box-sizing: border-box;\n}\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #569CD6\">*<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">box-sizing<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">border-box<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc774\ub807\uac8c \ud558\uba74 <strong>\ubaa8\ub4e0 \uc694\uc18c\uc758 <code>width<\/code>\uac00 padding\uacfc border\ub97c \ud3ec\ud568\ud55c \ud06c\uae30<\/strong>\ub85c \uc124\uc815\ub41c\ub2e4.<br>\uc989, \uc694\uc18c \ud06c\uae30\ub97c \uacc4\uc0b0\ud560 \ub54c \ub354 \uc774\uc0c1 <code>padding<\/code>\uacfc <code>border<\/code>\ub97c \ub530\ub85c \uc2e0\uacbd \uc4f8 \ud544\uc694\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"border-box%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4_%EC%A2%8B%EC%9D%80_%EC%A0%90\"><\/span><code>border-box<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc88b\uc740 \uc810<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9D%B4_%EC%98%88%EC%B8%A1_%EA%B0%80%EB%8A%A5\"><\/span>1. <strong>\ub808\uc774\uc544\uc6c3\uc774 \uc608\uce21 \uac00\ub2a5<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>width<\/code>\ub97c \uc124\uc815\ud560 \ub54c padding\uacfc border\uae4c\uc9c0 \ud3ec\ud568\ud574\uc11c \ud06c\uae30\ub97c \uc870\uc808\ud560 \uc218 \uc788\uc74c.<\/li>\n\n\n\n<li>\uc694\uc18c\uac00 \uc6d0\ud558\uc9c0 \uc54a\uac8c \ucee4\uc9c0\ub294 \ubb38\uc81c\ub97c \ubc29\uc9c0\ud560 \uc218 \uc788\uc74c.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_%EB%94%94%EC%9E%90%EC%9D%B8%ED%95%A0_%EB%95%8C_%ED%8E%B8%EB%A6%AC%ED%95%A8\"><\/span>2. <strong>\ub514\uc790\uc778\ud560 \ub54c \ud3b8\ub9ac\ud568<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>padding<\/code>\uc744 \ubcc0\uacbd\ud574\ub3c4 \uc804\uccb4 \ud06c\uae30\uac00 \uc720\uc9c0\ub418\ubbc0\ub85c, UI\ub97c \uc815\ub9ac\ud558\uae30 \uc26c\uc6c0.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90_%EC%9C%A0%EB%A6%AC%ED%95%A8\"><\/span>3. <strong>\ubc18\uc751\ud615 \ub514\uc790\uc778\uc5d0 \uc720\ub9ac\ud568<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc694\uc18c\uc758 \ud06c\uae30\ub97c \uc77c\uc815\ud558\uac8c \uc720\uc9c0\ud558\uba74\uc11c padding\uc744 \uc870\uc815\ud560 \uc218 \uc788\uc74c.<\/li>\n\n\n\n<li>\ub2e4\uc591\ud55c \ud654\uba74 \ud06c\uae30\uc5d0\uc11c\ub3c4 \ub514\uc790\uc778\uc774 \uc27d\uac8c \uae68\uc9c0\uc9c0 \uc54a\uc74c.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EC%A0%95%EB%A6%AC\"><\/span>\uc815\ub9ac<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uc124\uc815\uac12<\/th><th><code>width<\/code>\uc758 \uc758\ubbf8<\/th><th>\uc2e4\uc81c \ud06c\uae30 \uacc4\uc0b0 \ubc29\uc2dd<\/th><\/tr><\/thead><tbody><tr><td><code>box-sizing: content-box;<\/code> (\uae30\ubcf8\uac12)<\/td><td>\ucee8\ud150\uce20 \uc601\uc5ed \ud06c\uae30\ub9cc \ud3ec\ud568<\/td><td><code>width + padding + border<\/code><\/td><\/tr><tr><td><code>box-sizing: border-box;<\/code><\/td><td>\ucee8\ud150\uce20 + padding + border \ud3ec\ud568<\/td><td><code>width<\/code> \uadf8\ub300\ub85c \uc720\uc9c0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\uacb0\ub860: <strong><code>box-sizing: border-box;<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc608\uc0c1\ud55c \ud06c\uae30\ub97c \uc720\uc9c0\ud560 \uc218 \uc788\ub2e4!<\/strong><br>\uc55e\uc73c\ub85c <code>box-sizing: border-box;<\/code>\ub97c \uc801\uc6a9\ud574\uc11c <strong>\ub354 \uc9c1\uad00\uc801\uc778 CSS \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc790!<\/strong> \ud83d\ude80<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9 \uac1c\ubc1c\ud560 \ub54c width\uc640 padding\uc744 \uc124\uc815\ud558\uba74 \uc608\uc0c1\uacfc \ub2e4\ub974\uac8c \ub808\uc774\uc544\uc6c3\uc774 \uae68\uc9c0\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.\uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc74c\uacfc \uac19\uc774 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud588\ub2e4\uace0 \uac00\uc815\ud574\ubcf4\uc790. \uc774 \uacbd\uc6b0 .box\uc758 \uc2e4\uc81c \ub108\ube44\ub294 \uc5bc\ub9c8\uc77c\uae4c?\ubcf4\ud1b5 200px &#8211; 50px(\uc88c) &#8211; 50px(\uc6b0) = 100px\uc774 \ub420 \uac70\ub77c\uace0 \uc0dd\uac01\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc,\uc2e4\uc81c\ub85c\ub294 width\uac00 \ucee8\ud150\uce20 \uc601\uc5ed(content box)\ub9cc\uc744 \uc758\ubbf8\ud558\uae30 \ub54c\ubb38\uc5d0 \uc544\ub798\ucc98\ub7fc \uacc4\uc0b0\ub41c\ub2e4. \uc989, padding\uacfc border\uac00 width\uc5d0 \ud3ec\ud568\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uc6d0\ud558\ub294 \ud06c\uae30\ubcf4\ub2e4 \ucee4\uc9c0\ub294 \ubb38\uc81c\uac00 &#8230; <a title=\"[HTML &amp; CSS] CSS\uc5d0\uc11c box-sizing: border-box;\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc774\uc720\" class=\"read-more\" href=\"https:\/\/seuheu.com\/?p=1235\" aria-label=\"[HTML &amp; CSS] CSS\uc5d0\uc11c box-sizing: border-box;\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc774\uc720\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25],"tags":[],"class_list":["post-1235","post","type-post","status-publish","format-standard","hentry","category-programming","category-html"],"_links":{"self":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1235"}],"version-history":[{"count":3,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1235\/revisions"}],"predecessor-version":[{"id":1238,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1235\/revisions\/1238"}],"wp:attachment":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}