{"id":1197,"date":"2025-02-25T18:30:00","date_gmt":"2025-02-25T09:30:00","guid":{"rendered":"https:\/\/seuheu.com\/?p=1197"},"modified":"2025-02-22T17:24:34","modified_gmt":"2025-02-22T08:24:34","slug":"html-cssbemblock-element-modifier-css-%ed%81%b4%eb%9e%98%ec%8a%a4-%eb%84%a4%ec%9d%b4%eb%b0%8d-%eb%b0%a9%eb%b2%95%eb%a1%a0","status":"publish","type":"post","link":"https:\/\/seuheu.com\/?p=1197","title":{"rendered":"[HTML &amp; CSS]BEM(Block Element Modifier) &#8211; CSS \ud074\ub798\uc2a4 \ub124\uc774\ubc0d \ubc29\ubc95\ub860"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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=1197\/#%EA%B0%9C%EC%9A%94\" >\uac1c\uc694<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/seuheu.com\/?p=1197\/#%F0%9F%94%B9_BEM%EC%9D%B4%EB%9E%80\" >\ud83d\udd39 BEM\uc774\ub780?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/seuheu.com\/?p=1197\/#1%EF%B8%8F%E2%83%A3_Block_%EB%B8%94%EB%A1%9D\" >1\ufe0f\u20e3 Block (\ube14\ub85d)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/seuheu.com\/?p=1197\/#2%EF%B8%8F%E2%83%A3_Element_%EC%9A%94%EC%86%8C\" >2\ufe0f\u20e3 Element (\uc694\uc18c)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/seuheu.com\/?p=1197\/#3%EF%B8%8F%E2%83%A3_Modifier_%EC%88%98%EC%A0%95%EC%9E%90\" >3\ufe0f\u20e3 Modifier (\uc218\uc815\uc790)<\/a><\/li><\/ul><\/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=1197\/#%F0%9F%94%B9_BEM_%ED%81%B4%EB%9E%98%EC%8A%A4_%EB%84%A4%EC%9D%B4%EB%B0%8D_%EA%B7%9C%EC%B9%99\" >\ud83d\udd39 BEM \ud074\ub798\uc2a4 \ub124\uc774\ubc0d \uaddc\uce59<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/seuheu.com\/?p=1197\/#%F0%9F%93%8C_BEM_%EC%A0%81%EC%9A%A9_%EC%98%88%EC%A0%9C\" >\ud83d\udccc BEM \uc801\uc6a9 \uc608\uc81c<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/seuheu.com\/?p=1197\/#%E2%9C%85_HTML_%EC%BD%94%EB%93%9C\" >\u2705 HTML \ucf54\ub4dc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/seuheu.com\/?p=1197\/#%E2%9C%85_CSS_%EC%BD%94%EB%93%9C\" >\u2705 CSS \ucf54\ub4dc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/seuheu.com\/?p=1197\/#%F0%9F%8E%AF_BEM%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\" >\ud83c\udfaf BEM\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc774\uc720<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/seuheu.com\/?p=1197\/#%E2%9C%85_%ED%81%B4%EB%9E%98%EC%8A%A4_%EC%9D%B4%EB%A6%84_%EC%B6%A9%EB%8F%8C_%EB%B0%A9%EC%A7%80\" >\u2705 \ud074\ub798\uc2a4 \uc774\ub984 \ucda9\ub3cc \ubc29\uc9c0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/seuheu.com\/?p=1197\/#%E2%9C%85_%EC%9C%A0%EC%A7%80%EB%B3%B4%EC%88%98%EC%99%80_%ED%99%95%EC%9E%A5%EC%84%B1_%ED%96%A5%EC%83%81\" >\u2705 \uc720\uc9c0\ubcf4\uc218\uc640 \ud655\uc7a5\uc131 \ud5a5\uc0c1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/seuheu.com\/?p=1197\/#%E2%9C%85_%EC%9E%AC%EC%82%AC%EC%9A%A9%EC%84%B1_%EC%A6%9D%EA%B0%80\" >\u2705 \uc7ac\uc0ac\uc6a9\uc131 \uc99d\uac00<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/seuheu.com\/?p=1197\/#%F0%9F%9B%A0%EF%B8%8F_BEM%EC%9D%84_%EB%8D%94_%ED%9A%A8%EA%B3%BC%EC%A0%81%EC%9C%BC%EB%A1%9C_%ED%99%9C%EC%9A%A9%ED%95%98%EB%8A%94_%ED%8C%81\" >\ud83d\udee0\ufe0f BEM\uc744 \ub354 \ud6a8\uacfc\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\ub294 \ud301<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EA%B0%9C%EC%9A%94\"><\/span>\uac1c\uc694<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc6f9 \uac1c\ubc1c\uc744 \ud558\ub2e4 \ubcf4\uba74 CSS\uc758 \ud074\ub798\uc2a4 \ub124\uc774\ubc0d\uc774 \uc810\uc810 \ubcf5\uc7a1\ud574\uc9c0\uace0, \uc720\uc9c0\ubcf4\uc218\uac00 \uc5b4\ub824\uc6cc\uc9c0\ub294 \uacbd\uc6b0\uac00 \ub9ce\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 \ub4f1\uc7a5\ud55c \ubc29\ubc95\ub860\uc774 \ubc14\ub85c&nbsp;<strong>BEM(Block Element Modifier)<\/strong>&nbsp;\uc785\ub2c8\ub2e4.<\/li>\n\n\n\n<li>BEM\uc744 \ud65c\uc6a9\ud558\uba74 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uccb4\uacc4\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uace0, \uc2a4\ud0c0\uc77c \ucda9\ub3cc\uc744 \ubc29\uc9c0\ud558\uba70, \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 BEM\uc758 \uac1c\ub150\uacfc \uc0ac\uc6a9\ubc95\uc744 \uc27d\uac8c \uc124\uba85\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ud83d\ude80<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%94%B9_BEM%EC%9D%B4%EB%9E%80\"><\/span>\ud83d\udd39 BEM\uc774\ub780?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>BEM\uc740&nbsp;<strong>Block(\ube14\ub85d), Element(\uc694\uc18c), Modifier(\uc218\uc815\uc790)<\/strong>&nbsp;\uc758 \uc57d\uc790\ub85c, CSS \ud074\ub798\uc2a4 \ub124\uc774\ubc0d \uaddc\uce59\uc744 \uccb4\uacc4\uc801\uc73c\ub85c \uc815\uc758\ud558\ub294 \ubc29\ubc95\ub860\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1%EF%B8%8F%E2%83%A3_Block_%EB%B8%94%EB%A1%9D\"><\/span>1\ufe0f\u20e3 Block (\ube14\ub85d)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub3c5\ub9bd\uc801\uc73c\ub85c \uc874\uc7ac\ud560 \uc218 \uc788\ub294 UI \uc694\uc18c<\/li>\n\n\n\n<li>\uc608:&nbsp;<code>header<\/code>,&nbsp;<code>menu<\/code>,&nbsp;<code>button<\/code>,&nbsp;<code>card<\/code><\/li>\n\n\n\n<li><strong>\ud074\ub798\uc2a4\uba85 \uc608\uc2dc<\/strong>:&nbsp;<code>.menu<\/code>,&nbsp;<code>.button<\/code>,&nbsp;<code>.card<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2%EF%B8%8F%E2%83%A3_Element_%EC%9A%94%EC%86%8C\"><\/span>2\ufe0f\u20e3 Element (\uc694\uc18c)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ube14\ub85d \ub0b4\ubd80\uc5d0\uc11c\ub9cc \uc874\uc7ac\ud558\ub294 \uad6c\uc131 \uc694\uc18c<\/li>\n\n\n\n<li>\uc608:&nbsp;<code>menu<\/code>&nbsp;\ub0b4\ubd80\uc758&nbsp;<code>item<\/code>,&nbsp;<code>button<\/code>&nbsp;\ub0b4\ubd80\uc758&nbsp;<code>icon<\/code><\/li>\n\n\n\n<li><strong>\ud074\ub798\uc2a4\uba85 \uc608\uc2dc<\/strong>:&nbsp;<code>.menu__item<\/code>,&nbsp;<code>.button__icon<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3%EF%B8%8F%E2%83%A3_Modifier_%EC%88%98%EC%A0%95%EC%9E%90\"><\/span>3\ufe0f\u20e3 Modifier (\uc218\uc815\uc790)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ube14\ub85d\uc774\ub098 \uc694\uc18c\uc758 \uc0c1\ud0dc\ub098 \uc2a4\ud0c0\uc77c \ubcc0\ud654\ub97c \ub098\ud0c0\ub0c4<\/li>\n\n\n\n<li>\uc608: \ube44\ud65c\uc131\ud654\ub41c \ubc84\ud2bc, \uac15\uc870\ub41c \uba54\ub274 \ud56d\ubaa9<\/li>\n\n\n\n<li><strong>\ud074\ub798\uc2a4\uba85 \uc608\uc2dc<\/strong>:&nbsp;<code>.button--disabled<\/code>,&nbsp;<code>.menu__item--active<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%94%B9_BEM_%ED%81%B4%EB%9E%98%EC%8A%A4_%EB%84%A4%EC%9D%B4%EB%B0%8D_%EA%B7%9C%EC%B9%99\"><\/span>\ud83d\udd39 BEM \ud074\ub798\uc2a4 \ub124\uc774\ubc0d \uaddc\uce59<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>BEM\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ub124\uc774\ubc0d \ud328\ud134\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><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=\".block {}\n.block__element {}\n.block--modifier {}\" 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\">.block<\/span><span style=\"color: #D4D4D4\"> {}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.block__element<\/span><span style=\"color: #D4D4D4\"> {}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.block--modifier<\/span><span style=\"color: #D4D4D4\"> {}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>BEM\uc744 \uc801\uc6a9\ud558\uba74 CSS\uc758 \uac00\ub3c5\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uc131\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%8C_BEM_%EC%A0%81%EC%9A%A9_%EC%98%88%EC%A0%9C\"><\/span>\ud83d\udccc BEM \uc801\uc6a9 \uc608\uc81c<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>BEM \ub124\uc774\ubc0d \uaddc\uce59\uc744 \uc2e4\uc81c \ucf54\ub4dc\uc5d0\uc11c \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\ub294\uc9c0 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%9C%85_HTML_%EC%BD%94%EB%93%9C\"><\/span>\u2705 HTML \ucf54\ub4dc<span class=\"ez-toc-section-end\"><\/span><\/h3>\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=\"&lt;nav class=&quot;menu&quot;&gt;\n  &lt;ul class=&quot;menu__list&quot;&gt;\n    &lt;li class=&quot;menu__item menu__item--active&quot;&gt;Home&lt;\/li&gt;\n    &lt;li class=&quot;menu__item&quot;&gt;About&lt;\/li&gt;\n    &lt;li class=&quot;menu__item&quot;&gt;Contact&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\" 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: #808080\">&lt;<\/span><span style=\"color: #569CD6\">nav<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;menu&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">ul<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;menu__list&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">li<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;menu__item menu__item--active&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Home<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">li<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">li<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;menu__item&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">About<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">li<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">li<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;menu__item&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Contact<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">li<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">ul<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">nav<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%9C%85_CSS_%EC%BD%94%EB%93%9C\"><\/span>\u2705 CSS \ucf54\ub4dc<span class=\"ez-toc-section-end\"><\/span><\/h3>\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=\".menu {\n  background: #333;\n  padding: 10px;\n}\n\n.menu__list {\n  list-style: none;\n  display: flex;\n}\n\n.menu__item {\n  color: white;\n  padding: 10px;\n}\n\n.menu__item--active {\n  font-weight: bold;\n  text-decoration: underline;\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\">.menu<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">#333<\/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\">10px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.menu__list<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">list-style<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">none<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">display<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">flex<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.menu__item<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">white<\/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\">10px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.menu__item--active<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">font-weight<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">bold<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">text-decoration<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">underline<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc704\uc640 \uac19\uc774 BEM\uc744 \uc801\uc6a9\ud558\uba74&nbsp;<strong>\ud074\ub798\uc2a4 \uac04\uc758 \ucda9\ub3cc\uc744 \ubc29\uc9c0\ud558\uace0, \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%8E%AF_BEM%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\"><\/span>\ud83c\udfaf BEM\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc774\uc720<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%9C%85_%ED%81%B4%EB%9E%98%EC%8A%A4_%EC%9D%B4%EB%A6%84_%EC%B6%A9%EB%8F%8C_%EB%B0%A9%EC%A7%80\"><\/span>\u2705 \ud074\ub798\uc2a4 \uc774\ub984 \ucda9\ub3cc \ubc29\uc9c0<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uc5ed\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc2a4\ud0c0\uc77c \ud074\ub798\uc2a4\uc640 \ucda9\ub3cc\ud560 \uc704\ud5d8\uc774 \uc904\uc5b4\ub4ed\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%9C%85_%EC%9C%A0%EC%A7%80%EB%B3%B4%EC%88%98%EC%99%80_%ED%99%95%EC%9E%A5%EC%84%B1_%ED%96%A5%EC%83%81\"><\/span>\u2705 \uc720\uc9c0\ubcf4\uc218\uc640 \ud655\uc7a5\uc131 \ud5a5\uc0c1<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud074\ub798\uc2a4 \uad6c\uc870\uac00 \uba85\ud655\ud574\uc9c0\ubbc0\ub85c \uc2a4\ud0c0\uc77c \ubcc0\uacbd \ubc0f \ucd94\uac00\uac00 \uc26c\uc6cc\uc9d1\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%9C%85_%EC%9E%AC%EC%82%AC%EC%9A%A9%EC%84%B1_%EC%A6%9D%EA%B0%80\"><\/span>\u2705 \uc7ac\uc0ac\uc6a9\uc131 \uc99d\uac00<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ube14\ub85d, \uc694\uc18c, \uc218\uc815\uc790\ub97c \uc870\ud569\ud558\uc5ec \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\uc744 \uc190\uc27d\uac8c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%9B%A0%EF%B8%8F_BEM%EC%9D%84_%EB%8D%94_%ED%9A%A8%EA%B3%BC%EC%A0%81%EC%9C%BC%EB%A1%9C_%ED%99%9C%EC%9A%A9%ED%95%98%EB%8A%94_%ED%8C%81\"><\/span>\ud83d\udee0\ufe0f BEM\uc744 \ub354 \ud6a8\uacfc\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\ub294 \ud301<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\uc77c\uad00\ub41c \ub124\uc774\ubc0d \uaddc\uce59 \uc720\uc9c0<\/strong>\n<ul class=\"wp-block-list\">\n<li>\ud504\ub85c\uc81d\ud2b8 \ub0b4\uc5d0\uc11c \ub3d9\uc77c\ud55c BEM \ub124\uc774\ubc0d \uaddc\uce59\uc744 \uc0ac\uc6a9\ud558\uc138\uc694.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\ud544\uc694 \uc5c6\ub294 \uc694\uc18c\/\uc218\uc815\uc790 \uc0ac\uc6a9 \uc790\uc81c<\/strong>\n<ul class=\"wp-block-list\">\n<li>\ubd88\ud544\uc694\ud55c&nbsp;<code>__element<\/code>\ub098&nbsp;<code>-modifier<\/code>\ub97c \ub0a8\ubc1c\ud558\uc9c0 \ub9c8\uc138\uc694.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uac1c\ubc1c\uacfc \ud568\uaed8 \uc0ac\uc6a9<\/strong>\n<ul class=\"wp-block-list\">\n<li>React, Vue \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \ud504\ub808\uc784\uc6cc\ud06c\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uba74 \ub354\uc6b1 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n","protected":false},"excerpt":{"rendered":"<p>\uac1c\uc694 \ud83d\udd39 BEM\uc774\ub780? 1\ufe0f\u20e3 Block (\ube14\ub85d) 2\ufe0f\u20e3 Element (\uc694\uc18c) 3\ufe0f\u20e3 Modifier (\uc218\uc815\uc790) \ud83d\udd39 BEM \ud074\ub798\uc2a4 \ub124\uc774\ubc0d \uaddc\uce59 \ud83d\udccc BEM \uc801\uc6a9 \uc608\uc81c \u2705 HTML \ucf54\ub4dc \u2705 CSS \ucf54\ub4dc \ud83c\udfaf BEM\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc774\uc720 \u2705 \ud074\ub798\uc2a4 \uc774\ub984 \ucda9\ub3cc \ubc29\uc9c0 \uc804\uc5ed\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc2a4\ud0c0\uc77c \ud074\ub798\uc2a4\uc640 \ucda9\ub3cc\ud560 \uc704\ud5d8\uc774 \uc904\uc5b4\ub4ed\ub2c8\ub2e4. \u2705 \uc720\uc9c0\ubcf4\uc218\uc640 \ud655\uc7a5\uc131 \ud5a5\uc0c1 \ud074\ub798\uc2a4 \uad6c\uc870\uac00 \uba85\ud655\ud574\uc9c0\ubbc0\ub85c \uc2a4\ud0c0\uc77c \ubcc0\uacbd \ubc0f \ucd94\uac00\uac00 &#8230; <a title=\"[HTML &amp; CSS]BEM(Block Element Modifier) &#8211; CSS \ud074\ub798\uc2a4 \ub124\uc774\ubc0d \ubc29\ubc95\ub860\" class=\"read-more\" href=\"https:\/\/seuheu.com\/?p=1197\" aria-label=\"[HTML &amp; CSS]BEM(Block Element Modifier) &#8211; CSS \ud074\ub798\uc2a4 \ub124\uc774\ubc0d \ubc29\ubc95\ub860\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-1197","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\/1197","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=1197"}],"version-history":[{"count":2,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1197\/revisions"}],"predecessor-version":[{"id":1199,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1197\/revisions\/1199"}],"wp:attachment":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}