{"id":332,"date":"2026-06-26T13:34:40","date_gmt":"2026-06-26T13:34:40","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=332"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"%ec%ba%98%eb%a6%b0%eb%8d%94-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/%ec%ba%98%eb%a6%b0%eb%8d%94-%eb%a7%8c%eb%93%a4%ea%b8%b0\/","title":{"rendered":"\uce98\ub9b0\ub354-\ub9cc\ub4e4\uae30"},"content":{"rendered":"<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/calender\/02\">\uc644\uc131\ud654\uba74<\/a><\/p>\n<h2>1. \ub2ec\ub825\ub9cc\ub4e4\uae30<\/h2>\n<blockquote>\n<p>\ub2f9\ud574 \ub144\ub3c4 \ub2ec\ub825\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc790.<\/p>\n<\/blockquote>\n<p>  \ub0a0\uc9dc \uc815\ubcf4\ub294 \ub124\ud2b8\uc6cc\ud06c \uc11c\ubc84\uc758 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ubc1b\uc544 \ud45c\uc2dc\ud55c\ub2e4.<\/p>\n<h3>1.1. \uad6c\uc870\uc791\uc131<\/h3>\n<h3>1.1.1. html<\/h3>\n<p>  fontawasome cdn<\/p>\n<pre><code class=\"language-html\">&lt;link rel=&#39;stylesheet&#39; href=&#39;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.6.0\/css\/all.min.css&#39;&gt;\n<\/code><\/pre>\n<pre><code class=\"language-html\">&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;calendar&quot;&gt;\n      &lt;div class=&quot;month&quot;&gt;\n        &lt;i class=&quot;fas fa-angle-left prev&quot;&gt;&lt;\/i&gt;\n        &lt;div class=&quot;date&quot;&gt;\n          &lt;h1&gt;&lt;\/h1&gt;\n          &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;i class=&quot;fas fa-angle-right next&quot;&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;weekdays&quot;&gt;\n        &lt;div&gt;\uc77c&lt;\/div&gt;\n        &lt;div&gt;\uc6d4&lt;\/div&gt;\n        &lt;div&gt;\ud654&lt;\/div&gt;\n        &lt;div&gt;\uc218&lt;\/div&gt;\n        &lt;div&gt;\ubaa9&lt;\/div&gt;\n        &lt;div&gt;\uae08&lt;\/div&gt;\n        &lt;div&gt;\ud1a0&lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;days&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n<\/code><\/pre>\n<h3>1.1.2. css<\/h3>\n<pre><code class=\"language-css\">* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: &quot;Quicksand&quot;, sans-serif;\n}\n\nhtml {\n  font-size: 62.5%;\n}\n\n.container {\n  width: 100%;\n  height: 100vh;\n  background-color: #12121f;\n  color: #eee;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.calendar {\n  width: 45rem;\n  height: 52rem;\n  background-color: #222227;\n  box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);\n}\n\n.month {\n  width: 100%;\n  height: 12rem;\n  background-color: #167e56;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  text-align: center;\n  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);\n}\n\n.month i {\n  font-size: 2.5rem;\n  cursor: pointer;\n}\n\n.month h1 {\n  font-size: 3rem;\n  font-weight: 400;\n  text-transform: uppercase;\n  letter-spacing: 0.2rem;\n  margin-bottom: 1rem;\n}\n\n.month p {\n  font-size: 1.6rem;\n}\n\n.weekdays {\n  width: 100%;\n  height: 5rem;\n  padding: 0 0.4rem;\n  display: flex;\n  align-items: center;\n}\n\n.weekdays div {\n  font-size: 1.5rem;\n  font-weight: 400;\n  letter-spacing: 0.1rem;\n  width: calc(44.2rem \/ 7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);\n}\n\n.days {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.2rem;\n}\n\n.days div {\n  font-size: 1.4rem;\n  margin: 0.3rem;\n  width: calc(40.2rem \/ 7);\n  height: 5rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);\n  transition: background-color 0.2s;\n}\n\n.days div:hover:not(.today) {\n  background-color: #262626;\n  border: 0.2rem solid #777;\n  cursor: pointer;\n}\n\n.prev-date,\n.next-date {\n  opacity: 0.5;\n}\n\n.today {\n  background-color: #167e56;\n}\n<\/code><\/pre>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/calender\/01\">\uc5ec\uae30\uae4c\uc9c0 \uc2e4\ud589\ud654\uba74<\/a><\/p>\n<hr>\n<h3>1.2. \uc2a4\ud06c\ub9bd\ud2b8 \uc791\uc131<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/01-20.png\" alt=\"\"><\/p>\n<ul>\n<li><strong><code>renderCalendar<\/code><\/strong><strong> \ud568\uc218 : <\/strong>\ub2ec\ub825\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \uc5ed\ud560\n<ul>\n<li><code>date.setDate(1)<\/code>\ub85c \ud604\uc7ac \uc6d4\uc758 \uccab\uc9f8 \ub0a0\ub85c \ub0a0\uc9dc\ub97c \uc124\uc815\ud558\uace0, <code>monthDays<\/code> \ubcc0\uc218\ub97c \ud1b5\ud574 \ud574\ub2f9 \uc6d4\uc758 \uc77c\uc790\ub97c \ucd9c\ub825\ud560 DOM \uc694\uc18c\ub97c \uac00\uc838\uc628\ub2e4.<\/li>\n<li><code>lastDay<\/code> \ubcc0\uc218\ub294 \ud604\uc7ac \uc6d4\uc758 \ub9c8\uc9c0\ub9c9 \ub0a0\uc9dc\ub97c \uad6c\ud558\uace0, <code>prevLastDay<\/code> \ubcc0\uc218\ub294 \uc9c0\ub09c \ub2ec\uc758 \ub9c8\uc9c0\ub9c9 \ub0a0\uc9dc\ub97c \uad6c\ud55c\ub2e4.\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\/getDay\"><strong><code>getDay()<\/code><\/strong><\/a><a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Date\/getDay\">\u00a0\uba54\uc11c\ub4dc\ub294 \uc8fc\uc5b4\uc9c4 \ub0a0\uc9dc\uc758 \ud604\uc9c0 \uc2dc\uac04 \uae30\uc900 \uc694\uc77c\uc744 \ubc18\ud658\ud55c\ub2e4. 0\uc740 \uc77c\uc694\uc77c<\/a><\/li>\n<\/ul>\n<\/li>\n<li><code>firstDayIndex<\/code>  \/  <code>lastDayIndex<\/code> \ubcc0\uc218\ub294 \ud604\uc7ac \uc6d4\uc758 \uccab\uc9f8\uc640 \ub9c8\uc9c0\ub9c9 \ub0a0\uc758 \uc778\ub371\uc2a4\ub97c \uad6c\ud55c\ub2e4.<\/li>\n<li><code>nextDays<\/code> \ubcc0\uc218\ub294 \ub2e4\uc74c \ub2ec\uc758 \uccab\uc9f8 \ub0a0\uae4c\uc9c0 \ub0a8\uc740 \uc77c\uc790\ub97c \uad6c\ud55c\ub2e4.<\/li>\n<li>\uc6d4 \uc774\ub984\uacfc \uc624\ub298 \ub0a0\uc9dc\ub97c \ucd9c\ub825\ud558\uae30 \uc704\ud574 DOM \uc694\uc18c\ub97c \uac00\uc838\uc628 \ud6c4, <code>innerHTML<\/code>\uc744 \ud1b5\ud574 \ucd9c\ub825\ud55c\ub2e4.<\/li>\n<li><code>for<\/code> \ub8e8\ud504\ub97c \uc774\uc6a9\ud574 \uc77c\uc790\ub97c \ucd9c\ub825\ud558\uba70, <code>prev-date<\/code>\ub294 \uc9c0\ub09c \ub2ec\uc758 \uc77c\uc790, <code>today<\/code>\ub294 \uc624\ub298 \ub0a0\uc9dc, <code>next-date<\/code>\ub294 \ub2e4\uc74c \ub2ec\uc758 \uc77c\uc790\ub97c \uc758\ubbf8\ud55c\ub2e4.<\/li>\n<li><code>monthDays<\/code> \ubcc0\uc218\uc5d0 \ucd9c\ub825\ud55c \uc77c\uc790\ub4e4\uc744 <code>innerHTML<\/code>\uc744 \ud1b5\ud574 \ud560\ub2f9\ud55c\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><code>.prev<\/code><strong> \ud074\ub9ad \uc774\ubca4\ud2b8<\/strong>\n<ul>\n<li><code>document.querySelector(&quot;.prev&quot;).addEventListener(&quot;click&quot;, () =&gt; {...})<\/code> \ud568\uc218\ub294 &quot;\uc774\uc804&quot; \ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc744 \ub54c \ud638\ucd9c\ub41c\ub2e4.<\/li>\n<li><code>date.setMonth(date.getMonth() - 1)<\/code>\ub85c \ud604\uc7ac \uc6d4\uc744 \uc774\uc804 \ub2ec\ub85c \ubcc0\uacbd\ud558\uace0, <code>renderCalendar()<\/code> \ud568\uc218\ub97c \ud638\ucd9c\ud55c\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><code>.next<\/code><strong> \ud074\ub9ad \uc774\ubca4\ud2b8<\/strong>\n<ul>\n<li><code>document.querySelector(&quot;.next&quot;).addEventListener(&quot;click&quot;, () =&gt; {...})<\/code> \ud568\uc218\ub294 &quot;\ub2e4\uc74c&quot; \ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc744 \ub54c \ud638\ucd9c\ub41c\ub2e4.<\/li>\n<li><code>date.setMonth(date.getMonth() + 1)<\/code>\ub85c \ud604\uc7ac \uc6d4\uc744 \ub2e4\uc74c \ub2ec\ub85c \ubcc0\uacbd\ud558\uace0, <code>renderCalendar()<\/code> \ud568\uc218\ub97c \ud638\ucd9c\ud55c\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><strong><code>renderCalendar<\/code><\/strong><strong> \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc2e4\ud589\uc2dc\ud0a8\ub2e4.<\/strong><\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/02-15.png\" alt=\"\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc644\uc131\ud654\uba74 1. \ub2ec\ub825\ub9cc\ub4e4\uae30 \ub2f9\ud574 \ub144\ub3c4 \ub2ec\ub825\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc790. \ub0a0\uc9dc \uc815\ubcf4\ub294 \ub124\ud2b8\uc6cc\ud06c \uc11c\ubc84\uc758 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ubc1b\uc544 \ud45c\uc2dc\ud55c\ub2e4. 1.1. \uad6c\uc870\uc791\uc131 1.1.1. html fontawasome cdn &lt;link rel=&#39;stylesheet&#39; href=&#39;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.6.0\/css\/all.min.css&#39;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;calendar&quot;&gt; &lt;div class=&quot;month&quot;&gt; &lt;i class=&quot;fas fa-angle-left prev&quot;&gt;&lt;\/i&gt; &lt;div class=&quot;date&quot;&gt; &lt;h1&gt;&lt;\/h1&gt; &lt;p&gt;&lt;\/p&gt; &lt;\/div&gt; &lt;i class=&quot;fas fa-angle-right next&quot;&gt;&lt;\/i&gt; &lt;\/div&gt; &lt;div class=&quot;weekdays&quot;&gt; &lt;div&gt;\uc77c&lt;\/div&gt; &lt;div&gt;\uc6d4&lt;\/div&gt; &lt;div&gt;\ud654&lt;\/div&gt; &lt;div&gt;\uc218&lt;\/div&gt; &lt;div&gt;\ubaa9&lt;\/div&gt; &lt;div&gt;\uae08&lt;\/div&gt; &lt;div&gt;\ud1a0&lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;days&quot;&gt;&lt;\/div&gt; &#8230; <a title=\"\uce98\ub9b0\ub354-\ub9cc\ub4e4\uae30\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/%ec%ba%98%eb%a6%b0%eb%8d%94-%eb%a7%8c%eb%93%a4%ea%b8%b0\/\" aria-label=\"\uce98\ub9b0\ub354-\ub9cc\ub4e4\uae30\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-332","post","type-post","status-publish","format-standard","hentry","category-javascript-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":2,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":2233,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/332\/revisions\/2233"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}