<![CDATA[
<div class="figure-video" data-ke-type="video" data-video-url="https://kakaotv.daum.net/embed/player/cliplink/rvowqi65re6sl34p88prxsd95@my?service=daum_cafe" data-video-host="kakaotv" data-video-play-service="daum_cafe" data-video-width="712" data-video-height="400" data-ke-style="alignCenter" data-video-thumbnail="https://thumb.kakaocdn.net/dna/kamp/source/rvowqi65re6sl34p88prxsd95/thumbs/2.jpg?credential=TuMuFGKUIcirOSjFzOpncbomGFEIdZWK&expires=33270801248&signature=1s64jeesBw81XVUeQkSw3PYXOB0%3D" data-ke-mobile-mobileStyle="widthFull" data-video-origin-width="712" data-video-origin-height="400"><iframe src="https://kakaotv.daum.net/embed/player/cliplink/rvowqi65re6sl34p88prxsd95@my?service=daum_cafe&ptoken=v2_d96efd29c13fda3236527f61c8d472d7842f8c3a4b0b7ee438f700523a6a865d043ed065faee3e71ea057b3998481dffad4e29158645e49302616586fb" width="712" height="400" frameborder="0" scrolling="no" allowfullscreen="" allow="encrypted-media"></iframe><div class="figcaption"></div></div><div class="figure-html" data-ke-type="html" data-source="<div class="colorscripter-code" style="color:#f0f0f0;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; position:relative !important;overflow:auto"><table class="colorscripter-code-table" style="margin:0;padding:0;border:none;background-color:#272727;border-radius:4px;" cellspacing="0" cellpadding="0"><tr><td style="padding:6px;border-right:2px solid #4f4f4f"><div style="margin:0;padding:0;word-break:normal;text-align:right;color:#aaa;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div><div style="line-height:130%">5</div><div style="line-height:130%">6</div><div style="line-height:130%">7</div><div style="line-height:130%">8</div><div style="line-height:130%">9</div><div style="line-height:130%">10</div><div style="line-height:130%">11</div><div style="line-height:130%">12</div><div style="line-height:130%">13</div><div style="line-height:130%">14</div><div style="line-height:130%">15</div><div style="line-height:130%">16</div><div style="line-height:130%">17</div><div style="line-height:130%">18</div><div style="line-height:130%">19</div><div style="line-height:130%">20</div><div style="line-height:130%">21</div><div style="line-height:130%">22</div><div style="line-height:130%">23</div><div style="line-height:130%">24</div><div style="line-height:130%">25</div><div style="line-height:130%">26</div><div style="line-height:130%">27</div><div style="line-height:130%">28</div><div style="line-height:130%">29</div><div style="line-height:130%">30</div><div style="line-height:130%">31</div><div style="line-height:130%">32</div><div style="line-height:130%">33</div><div style="line-height:130%">34</div><div style="line-height:130%">35</div><div style="line-height:130%">36</div><div style="line-height:130%">37</div><div style="line-height:130%">38</div><div style="line-height:130%">39</div><div style="line-height:130%">40</div><div style="line-height:130%">41</div><div style="line-height:130%">42</div><div style="line-height:130%">43</div><div style="line-height:130%">44</div><div style="line-height:130%">45</div><div style="line-height:130%">46</div><div style="line-height:130%">47</div><div style="line-height:130%">48</div><div style="line-height:130%">49</div><div style="line-height:130%">50</div><div style="line-height:130%">51</div><div style="line-height:130%">52</div><div style="line-height:130%">53</div><div style="line-height:130%">54</div><div style="line-height:130%">55</div><div style="line-height:130%">56</div><div style="line-height:130%">57</div><div style="line-height:130%">58</div><div style="line-height:130%">59</div><div style="line-height:130%">60</div><div style="line-height:130%">61</div><div style="line-height:130%">62</div><div style="line-height:130%">63</div><div style="line-height:130%">64</div><div style="line-height:130%">65</div><div style="line-height:130%">66</div><div style="line-height:130%">67</div><div style="line-height:130%">68</div><div style="line-height:130%">69</div><div style="line-height:130%">70</div><div style="line-height:130%">71</div><div style="line-height:130%">72</div><div style="line-height:130%">73</div><div style="line-height:130%">74</div><div style="line-height:130%">75</div><div style="line-height:130%">76</div><div style="line-height:130%">77</div><div style="line-height:130%">78</div><div style="line-height:130%">79</div><div style="line-height:130%">80</div><div style="line-height:130%">81</div><div style="line-height:130%">82</div><div style="line-height:130%">83</div><div style="line-height:130%">84</div><div style="line-height:130%">85</div><div style="line-height:130%">86</div><div style="line-height:130%">87</div><div style="line-height:130%">88</div><div style="line-height:130%">89</div><div style="line-height:130%">90</div><div style="line-height:130%">91</div><div style="line-height:130%">92</div><div style="line-height:130%">93</div><div style="line-height:130%">94</div><div style="line-height:130%">95</div><div style="line-height:130%">96</div><div style="line-height:130%">97</div><div style="line-height:130%">98</div><div style="line-height:130%">99</div><div style="line-height:130%">100</div><div style="line-height:130%">101</div><div style="line-height:130%">102</div><div style="line-height:130%">103</div><div style="line-height:130%">104</div><div style="line-height:130%">105</div><div style="line-height:130%">106</div><div style="line-height:130%">107</div><div style="line-height:130%">108</div><div style="line-height:130%">109</div><div style="line-height:130%">110</div><div style="line-height:130%">111</div><div style="line-height:130%">112</div><div style="line-height:130%">113</div><div style="line-height:130%">114</div><div style="line-height:130%">115</div><div style="line-height:130%">116</div><div style="line-height:130%">117</div><div style="line-height:130%">118</div><div style="line-height:130%">119</div><div style="line-height:130%">120</div><div style="line-height:130%">121</div><div style="line-height:130%">122</div><div style="line-height:130%">123</div><div style="line-height:130%">124</div><div style="line-height:130%">125</div><div style="line-height:130%">126</div><div style="line-height:130%">127</div><div style="line-height:130%">128</div><div style="line-height:130%">129</div><div style="line-height:130%">130</div><div style="line-height:130%">131</div><div style="line-height:130%">132</div><div style="line-height:130%">133</div><div style="line-height:130%">134</div><div style="line-height:130%">135</div><div style="line-height:130%">136</div><div style="line-height:130%">137</div><div style="line-height:130%">138</div><div style="line-height:130%">139</div><div style="line-height:130%">140</div><div style="line-height:130%">141</div><div style="line-height:130%">142</div><div style="line-height:130%">143</div><div style="line-height:130%">144</div><div style="line-height:130%">145</div><div style="line-height:130%">146</div><div style="line-height:130%">147</div><div style="line-height:130%">148</div><div style="line-height:130%">149</div><div style="line-height:130%">150</div><div style="line-height:130%">151</div><div style="line-height:130%">152</div><div style="line-height:130%">153</div><div style="line-height:130%">154</div><div style="line-height:130%">155</div><div style="line-height:130%">156</div><div style="line-height:130%">157</div><div style="line-height:130%">158</div><div style="line-height:130%">159</div><div style="line-height:130%">160</div><div style="line-height:130%">161</div><div style="line-height:130%">162</div><div style="line-height:130%">163</div><div style="line-height:130%">164</div><div style="line-height:130%">165</div><div style="line-height:130%">166</div><div style="line-height:130%">167</div><div style="line-height:130%">168</div><div style="line-height:130%">169</div><div style="line-height:130%">170</div><div style="line-height:130%">171</div><div style="line-height:130%">172</div><div style="line-height:130%">173</div><div style="line-height:130%">174</div><div style="line-height:130%">175</div><div style="line-height:130%">176</div><div style="line-height:130%">177</div><div style="line-height:130%">178</div><div style="line-height:130%">179</div><div style="line-height:130%">180</div><div style="line-height:130%">181</div><div style="line-height:130%">182</div><div style="line-height:130%">183</div><div style="line-height:130%">184</div><div style="line-height:130%">185</div><div style="line-height:130%">186</div><div style="line-height:130%">187</div><div style="line-height:130%">188</div><div style="line-height:130%">189</div></div></td><td style="padding:6px 0;text-align:left"><div style="margin:0;padding:0;color:#f0f0f0;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">!DOCTYPE</span>&nbsp;<span style="color:#a8ff58">html</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">html</span>&nbsp;<span style="color:#a8ff58">lang</span>=<span style="color:#ffd500">"en"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">head</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">meta</span>&nbsp;<span style="color:#a8ff58">charset</span>=<span style="color:#ffd500">"UTF-8"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">meta</span>&nbsp;<span style="color:#a8ff58">name</span>=<span style="color:#ffd500">"viewport"</span><span style="color:#a8ff58"></span>&nbsp;<span style="color:#a8ff58">content</span>=<span style="color:#ffd500">"width=device-width,&nbsp;initial-scale=1.0"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">title</span><span style="color:#f0f0f0">&gt;</span>t11_addClass.html(addClass/removeClass)<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">title</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">script</span>&nbsp;<span style="color:#a8ff58">src</span>=<span style="color:#ffd500">"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"</span><span style="color:#ff3399"></span><span style="color:#f0f0f0">&gt;</span><span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">link</span>&nbsp;<span style="color:#a8ff58">rel</span>=<span style="color:#ffd500">"stylesheet"</span><span style="color:#a8ff58"></span>&nbsp;<span style="color:#a8ff58">href</span>=<span style="color:#ffd500">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#999999">&lt;!--&nbsp;&lt;script&nbsp;src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"&gt;&lt;/script&gt;&nbsp;--&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">script</span>&nbsp;<span style="color:#a8ff58">src</span>=<span style="color:#ffd500">"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"</span><span style="color:#ff3399"></span><span style="color:#f0f0f0">&gt;</span><span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">script</span>&nbsp;<span style="color:#a8ff58">src</span>=<span style="color:#ffd500">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"</span><span style="color:#ff3399"></span><span style="color:#f0f0f0">&gt;</span><span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffd500">'use&nbsp;strict'</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;selectedNum&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;<span style="color:#c10aff">0</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;$(()&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span>&nbsp;{</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;자동으로&nbsp;날짜li생성</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;str&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;<span style="color:#ffd500">''</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;today&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;<span style="color:#ff3399">new</span>&nbsp;<span style="color:#4be6fa">Date</span>();</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;year&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;today.getFullYear();</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;month&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;today.getMonth();</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;let&nbsp;date&nbsp;=&nbsp;today.getDate();</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;day&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;<span style="color:#ff3399">new</span>&nbsp;<span style="color:#4be6fa">Date</span>(year,month,<span style="color:#c10aff">1</span>).getDay();</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'1일의&nbsp;요일:&nbsp;'</span>,day);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;lastDate&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;<span style="color:#ff3399">new</span>&nbsp;<span style="color:#4be6fa">Date</span>(year,month<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#c10aff">1</span>,<span style="color:#c10aff">0</span>).getDate();</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'마지막날:'</span>,lastDate);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">for</span>(<span style="color:#ff3399">let</span>&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#c10aff">0</span>;&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span>day&nbsp;;&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;`<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span><span style="color:#aaffaa"></span><span style="color:#ff3399">&amp;</span>nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span><span style="color:#aaffaa"></span><span style="color:#ff3399">/</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span>`;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">for</span>(<span style="color:#ff3399">let</span>&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#c10aff">0</span>;&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span>lastDate&nbsp;;&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;str&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;`<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span>${i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#c10aff">1</span>}<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span><span style="color:#aaffaa"></span><span style="color:#ff3399">/</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span>`;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#ffd500">'.days'</span>).append(str);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;달력상단&nbsp;현재날짜&nbsp;기준으로&nbsp;고치기</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#ffd500">'#todayMonth'</span>).text(`${month<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#c10aff">1</span>}월`)</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#ffd500">'#todayYear'</span>).text(`${year}년`)</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;기존&nbsp;클래스의&nbsp;존재유무?&nbsp;hasClass()</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#999999">//&nbsp;선택된&nbsp;셀의&nbsp;개수를&nbsp;demo에&nbsp;출력한다.</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;maxNum,minNum,thisNum;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">let</span>&nbsp;selectedArr&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;[];</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#ffd500">'.days&nbsp;li'</span>).on(<span style="color:#ffd500">'click'</span>,<span style="color:#ff3399">function</span>(){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'셀선택:&nbsp;'</span>,$(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">if</span>($(<span style="color:#4be6fa">this</span>).hasClass(<span style="color:#ffd500">'active'</span>)){<span style="color:#999999">//누른게&nbsp;선택된&nbsp;셀이면</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#4be6fa">this</span>).removeClass(<span style="color:#ffd500">'active'</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">-</span><span style="color:#aaffaa"></span><span style="color:#ff3399">-</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">else</span>{&nbsp;<span style="color:#999999">//&nbsp;누룬게&nbsp;선택된&nbsp;셀이&nbsp;아니면</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#4be6fa">this</span>).addClass(<span style="color:#ffd500">'active'</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">if</span>(selectedNum&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;<span style="color:#c10aff">0</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maxNum<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#4be6fa">Number</span>($(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minNum<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#4be6fa">Number</span>($(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">else</span>{</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;thisNum&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;<span style="color:#4be6fa">Number</span>($(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">if</span>(thisNum&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span>&nbsp;maxNum)&nbsp;maxNum&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;thisNum;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">else</span>&nbsp;minNum&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>&nbsp;thisNum;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'작은날짜:&nbsp;'</span>,minNum,<span style="color:#ffd500">',&nbsp;큰날짜:&nbsp;'</span>,maxNum)</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ff3399">for</span>(<span style="color:#ff3399">let</span>&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>minNum;&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>maxNum&nbsp;;&nbsp;i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(`.days&nbsp;li:nth<span style="color:#aaffaa"></span><span style="color:#ff3399">-</span>child(${i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>day})`).addClass(<span style="color:#ffd500">'active'</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#4be6fa">console</span>.log(i);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span style="color:#ffd500">'#demo'</span>).html(`선택된&nbsp;날짜&nbsp;:&nbsp;${minNum}일&nbsp;~&nbsp;${maxNum}일&nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span>button&nbsp;<span style="color:#ff3399">class</span><span style="color:#ff3399">=</span><span style="color:#ffd500">"btn&nbsp;btn-sm&nbsp;btn-dark&nbsp;ml-3"</span>&nbsp;xxonClick<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#ffd500">"location.reload()"</span><span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span>다시선택<span style="color:#aaffaa"></span><span style="color:#ff3399">&lt;</span><span style="color:#aaffaa"></span><span style="color:#ff3399">/</span>button<span style="color:#aaffaa"></span><span style="color:#ff3399">&gt;</span>`);</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">-</span><span style="color:#aaffaa"></span><span style="color:#ff3399">-</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;});</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">style</span><span style="color:#f0f0f0">&gt;</span><span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;</span>{<span style="color:#4be6fa">box-sizing</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;border-box</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;ul&nbsp;</span>{<span style="color:#4be6fa">list-style-type</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;none</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;body&nbsp;</span>{<span style="color:#4be6fa">font-family</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;Verdana,&nbsp;sans-serif</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.month&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;70px&nbsp;25px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;100%</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;#1abc9c</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;center</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.month&nbsp;ul&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;0</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.month&nbsp;ul&nbsp;li&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;white</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;20px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-transform</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;uppercase</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;letter-spacing</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;3px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.month&nbsp;.prev&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;left</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-top</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;10px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.month&nbsp;.next&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;right</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-top</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;10px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.weekdays&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;10px&nbsp;0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;#ddd</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.weekdays&nbsp;li&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;inline-block</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;13.6%</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;#666</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;center</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.days&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;10px&nbsp;0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;#eee</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;0</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.days&nbsp;li&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list-style-type</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;none</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;inline-block</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;13.6%</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;center</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;5px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size</span><span style="color:#ff3399">:</span><span style="color:#E083FF">12px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;#777</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;20px&nbsp;10px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;.days&nbsp;li.active&nbsp;</span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;5px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;#1abc9c</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;white&nbsp;!important</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color:#999999">/*&nbsp;Add&nbsp;media&nbsp;queries&nbsp;for&nbsp;smaller&nbsp;screens&nbsp;*/</span><span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;@media&nbsp;screen&nbsp;and&nbsp;</span>(<span style="color:#a8ff58">max-width</span><span style="color:#ff3399">:</span><span style="color:#a8ff58">720px</span>)<span style="color:#ff3399">&nbsp;</span>{<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.weekdays&nbsp;li,&nbsp;.days&nbsp;li&nbsp;</span>{<span style="color:#4be6fa">width</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;13.1%</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;@media&nbsp;screen&nbsp;and&nbsp;</span>(<span style="color:#a8ff58">max-width</span><span style="color:#ff3399">:</span><span style="color:#a8ff58">&nbsp;420px</span>)<span style="color:#ff3399">&nbsp;</span>{<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.weekdays&nbsp;li,&nbsp;.days&nbsp;li&nbsp;</span>{<span style="color:#4be6fa">width</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;12.5%</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.days&nbsp;li&nbsp;.active&nbsp;</span>{<span style="color:#4be6fa">padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;2px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;@media&nbsp;screen&nbsp;and&nbsp;</span>(<span style="color:#a8ff58">max-width</span><span style="color:#ff3399">:</span><span style="color:#a8ff58">&nbsp;290px</span>)<span style="color:#ff3399">&nbsp;</span>{<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.weekdays&nbsp;li,&nbsp;.days&nbsp;li&nbsp;</span>{<span style="color:#4be6fa">width</span><span style="color:#ff3399">:</span><span style="color:#E083FF">&nbsp;12.2%</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF">&nbsp;&nbsp;&nbsp;&nbsp;</span>}</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">style</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">head</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">body</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">h1</span>&nbsp;<span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"text-center&nbsp;mt-3"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span>CSS&nbsp;Calendar<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">h1</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">p</span>&nbsp;<span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"text-center"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span>표의&nbsp;내용을&nbsp;클릭하면&nbsp;선택/취소&nbsp;됩니다.<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">p</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">div</span>&nbsp;<span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"month"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">span</span>&nbsp;<span style="color:#a8ff58">id</span>=<span style="color:#ffd500">"todayMonth"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span>1월<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">span</span><span style="color:#f0f0f0">&gt;</span><span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">br</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">span</span>&nbsp;<span style="color:#a8ff58">style</span>=<span style="color:#ffd500">"font-size:18px"</span><span style="color:#a8ff58"></span>&nbsp;<span style="color:#a8ff58">id</span>=<span style="color:#ffd500">"todayYear"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span>2024<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">span</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">ul</span>&nbsp;<span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"weekdays"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span>일<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span>월<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span>화<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span>수<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span>목<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span>금<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span>토<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">ul</span>&nbsp;<span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"days"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span>&nbsp;&nbsp;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;<span style="color:#f0f0f0">&lt;</span><span style="color:#ff3399">div</span>&nbsp;<span style="color:#a8ff58">id</span>=<span style="color:#ffd500">"demo"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">&gt;</span><span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">body</span><span style="color:#f0f0f0">&gt;</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0">&lt;</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">html</span><span style="color:#f0f0f0">&gt;</span></div></div><div style="text-align:right;margin-top:-13px;margin-right:5px;font-size:9px;font-style:italic"><a href="http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter</a></div></td><td style="vertical-align:bottom;padding:0 2px 4px 0"><a href="http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white"><span style="font-size:9px;word-break:normal;background-color:#4f4f4f;color:white;border-radius:10px;padding:1px">cs</span></a></td></tr></table></div>"><div data-ke-class="article"><div class="colorscripter-code" style="color:#f0f0f0;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; position:relative !important;overflow:auto"><table class="colorscripter-code-table" style="margin:0;padding:0;border:none;background-color:#272727;border-radius:4px;" cellspacing="0" cellpadding="0"><tr><td style="padding:6px;border-right:2px solid #4f4f4f"><div style="margin:0;padding:0;word-break:normal;text-align:right;color:#aaa;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div><div style="line-height:130%">5</div><div style="line-height:130%">6</div><div style="line-height:130%">7</div><div style="line-height:130%">8</div><div style="line-height:130%">9</div><div style="line-height:130%">10</div><div style="line-height:130%">11</div><div style="line-height:130%">12</div><div style="line-height:130%">13</div><div style="line-height:130%">14</div><div style="line-height:130%">15</div><div style="line-height:130%">16</div><div style="line-height:130%">17</div><div style="line-height:130%">18</div><div style="line-height:130%">19</div><div style="line-height:130%">20</div><div style="line-height:130%">21</div><div style="line-height:130%">22</div><div style="line-height:130%">23</div><div style="line-height:130%">24</div><div style="line-height:130%">25</div><div style="line-height:130%">26</div><div style="line-height:130%">27</div><div style="line-height:130%">28</div><div style="line-height:130%">29</div><div style="line-height:130%">30</div><div style="line-height:130%">31</div><div style="line-height:130%">32</div><div style="line-height:130%">33</div><div style="line-height:130%">34</div><div style="line-height:130%">35</div><div style="line-height:130%">36</div><div style="line-height:130%">37</div><div style="line-height:130%">38</div><div style="line-height:130%">39</div><div style="line-height:130%">40</div><div style="line-height:130%">41</div><div style="line-height:130%">42</div><div style="line-height:130%">43</div><div style="line-height:130%">44</div><div style="line-height:130%">45</div><div style="line-height:130%">46</div><div style="line-height:130%">47</div><div style="line-height:130%">48</div><div style="line-height:130%">49</div><div style="line-height:130%">50</div><div style="line-height:130%">51</div><div style="line-height:130%">52</div><div style="line-height:130%">53</div><div style="line-height:130%">54</div><div style="line-height:130%">55</div><div style="line-height:130%">56</div><div style="line-height:130%">57</div><div style="line-height:130%">58</div><div style="line-height:130%">59</div><div style="line-height:130%">60</div><div style="line-height:130%">61</div><div style="line-height:130%">62</div><div style="line-height:130%">63</div><div style="line-height:130%">64</div><div style="line-height:130%">65</div><div style="line-height:130%">66</div><div style="line-height:130%">67</div><div style="line-height:130%">68</div><div style="line-height:130%">69</div><div style="line-height:130%">70</div><div style="line-height:130%">71</div><div style="line-height:130%">72</div><div style="line-height:130%">73</div><div style="line-height:130%">74</div><div style="line-height:130%">75</div><div style="line-height:130%">76</div><div style="line-height:130%">77</div><div style="line-height:130%">78</div><div style="line-height:130%">79</div><div style="line-height:130%">80</div><div style="line-height:130%">81</div><div style="line-height:130%">82</div><div style="line-height:130%">83</div><div style="line-height:130%">84</div><div style="line-height:130%">85</div><div style="line-height:130%">86</div><div style="line-height:130%">87</div><div style="line-height:130%">88</div><div style="line-height:130%">89</div><div style="line-height:130%">90</div><div style="line-height:130%">91</div><div style="line-height:130%">92</div><div style="line-height:130%">93</div><div style="line-height:130%">94</div><div style="line-height:130%">95</div><div style="line-height:130%">96</div><div style="line-height:130%">97</div><div style="line-height:130%">98</div><div style="line-height:130%">99</div><div style="line-height:130%">100</div><div style="line-height:130%">101</div><div style="line-height:130%">102</div><div style="line-height:130%">103</div><div style="line-height:130%">104</div><div style="line-height:130%">105</div><div style="line-height:130%">106</div><div style="line-height:130%">107</div><div style="line-height:130%">108</div><div style="line-height:130%">109</div><div style="line-height:130%">110</div><div style="line-height:130%">111</div><div style="line-height:130%">112</div><div style="line-height:130%">113</div><div style="line-height:130%">114</div><div style="line-height:130%">115</div><div style="line-height:130%">116</div><div style="line-height:130%">117</div><div style="line-height:130%">118</div><div style="line-height:130%">119</div><div style="line-height:130%">120</div><div style="line-height:130%">121</div><div style="line-height:130%">122</div><div style="line-height:130%">123</div><div style="line-height:130%">124</div><div style="line-height:130%">125</div><div style="line-height:130%">126</div><div style="line-height:130%">127</div><div style="line-height:130%">128</div><div style="line-height:130%">129</div><div style="line-height:130%">130</div><div style="line-height:130%">131</div><div style="line-height:130%">132</div><div style="line-height:130%">133</div><div style="line-height:130%">134</div><div style="line-height:130%">135</div><div style="line-height:130%">136</div><div style="line-height:130%">137</div><div style="line-height:130%">138</div><div style="line-height:130%">139</div><div style="line-height:130%">140</div><div style="line-height:130%">141</div><div style="line-height:130%">142</div><div style="line-height:130%">143</div><div style="line-height:130%">144</div><div style="line-height:130%">145</div><div style="line-height:130%">146</div><div style="line-height:130%">147</div><div style="line-height:130%">148</div><div style="line-height:130%">149</div><div style="line-height:130%">150</div><div style="line-height:130%">151</div><div style="line-height:130%">152</div><div style="line-height:130%">153</div><div style="line-height:130%">154</div><div style="line-height:130%">155</div><div style="line-height:130%">156</div><div style="line-height:130%">157</div><div style="line-height:130%">158</div><div style="line-height:130%">159</div><div style="line-height:130%">160</div><div style="line-height:130%">161</div><div style="line-height:130%">162</div><div style="line-height:130%">163</div><div style="line-height:130%">164</div><div style="line-height:130%">165</div><div style="line-height:130%">166</div><div style="line-height:130%">167</div><div style="line-height:130%">168</div><div style="line-height:130%">169</div><div style="line-height:130%">170</div><div style="line-height:130%">171</div><div style="line-height:130%">172</div><div style="line-height:130%">173</div><div style="line-height:130%">174</div><div style="line-height:130%">175</div><div style="line-height:130%">176</div><div style="line-height:130%">177</div><div style="line-height:130%">178</div><div style="line-height:130%">179</div><div style="line-height:130%">180</div><div style="line-height:130%">181</div><div style="line-height:130%">182</div><div style="line-height:130%">183</div><div style="line-height:130%">184</div><div style="line-height:130%">185</div><div style="line-height:130%">186</div><div style="line-height:130%">187</div><div style="line-height:130%">188</div><div style="line-height:130%">189</div></div></td><td style="padding:6px 0;text-align:left"><div style="margin:0;padding:0;color:#f0f0f0;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">!DOCTYPE</span> <span style="color:#a8ff58">html</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">html</span> <span style="color:#a8ff58">lang</span>=<span style="color:#ffd500">"en"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">head</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">meta</span> <span style="color:#a8ff58">charset</span>=<span style="color:#ffd500">"UTF-8"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">meta</span> <span style="color:#a8ff58">name</span>=<span style="color:#ffd500">"viewport"</span><span style="color:#a8ff58"></span> <span style="color:#a8ff58">content</span>=<span style="color:#ffd500">"width=device-width, initial-scale=1.0"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">title</span><span style="color:#f0f0f0">></span>t11_addClass.html(addClass/removeClass)<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">title</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">script</span> <span style="color:#a8ff58">src</span>=<span style="color:#ffd500">"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"</span><span style="color:#ff3399"></span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">link</span> <span style="color:#a8ff58">rel</span>=<span style="color:#ffd500">"stylesheet"</span><span style="color:#a8ff58"></span> <span style="color:#a8ff58">href</span>=<span style="color:#ffd500">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999"><!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> --></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">script</span> <span style="color:#a8ff58">src</span>=<span style="color:#ffd500">"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"</span><span style="color:#ff3399"></span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">script</span> <span style="color:#a8ff58">src</span>=<span style="color:#ffd500">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"</span><span style="color:#ff3399"></span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ffd500">'use strict'</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> selectedNum <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> <span style="color:#c10aff">0</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(() <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#aaffaa"></span><span style="color:#ff3399">></span> {</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// 자동으로 날짜li생성</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> str <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> <span style="color:#ffd500">''</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> today <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> <span style="color:#ff3399">new</span> <span style="color:#4be6fa">Date</span>();</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> year <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> today.getFullYear();</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> month <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> today.getMonth();</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// let date = today.getDate();</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> day <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> <span style="color:#ff3399">new</span> <span style="color:#4be6fa">Date</span>(year,month,<span style="color:#c10aff">1</span>).getDay();</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'1일의 요일: '</span>,day);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> lastDate <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> <span style="color:#ff3399">new</span> <span style="color:#4be6fa">Date</span>(year,month<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#c10aff">1</span>,<span style="color:#c10aff">0</span>).getDate();</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'마지막날:'</span>,lastDate);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">for</span>(<span style="color:#ff3399">let</span> i<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#c10aff">0</span>; i<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span>day ; i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> str <span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> `<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">></span><span style="color:#aaffaa"></span><span style="color:#ff3399">&</span>nbsp;<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span><span style="color:#aaffaa"></span><span style="color:#ff3399">/</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">></span>`;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">for</span>(<span style="color:#ff3399">let</span> i<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#c10aff">0</span>; i<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span>lastDate ; i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> str <span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> `<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">></span>${i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#c10aff">1</span>}<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span><span style="color:#aaffaa"></span><span style="color:#ff3399">/</span>li<span style="color:#aaffaa"></span><span style="color:#ff3399">></span>`;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#ffd500">'.days'</span>).append(str);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// 달력상단 현재날짜 기준으로 고치기</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#ffd500">'#todayMonth'</span>).text(`${month<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#c10aff">1</span>}월`)</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#ffd500">'#todayYear'</span>).text(`${year}년`)</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// 기존 클래스의 존재유무? hasClass()</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#999999">// 선택된 셀의 개수를 demo에 출력한다.</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> maxNum,minNum,thisNum;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">let</span> selectedArr <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> [];</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#ffd500">'.days li'</span>).on(<span style="color:#ffd500">'click'</span>,<span style="color:#ff3399">function</span>(){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'셀선택: '</span>,$(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">if</span>($(<span style="color:#4be6fa">this</span>).hasClass(<span style="color:#ffd500">'active'</span>)){<span style="color:#999999">//누른게 선택된 셀이면</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#4be6fa">this</span>).removeClass(<span style="color:#ffd500">'active'</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">-</span><span style="color:#aaffaa"></span><span style="color:#ff3399">-</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">else</span>{ <span style="color:#999999">// 누룬게 선택된 셀이 아니면</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#4be6fa">this</span>).addClass(<span style="color:#ffd500">'active'</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">if</span>(selectedNum <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> <span style="color:#c10aff">0</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> maxNum<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#4be6fa">Number</span>($(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%"> minNum<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#4be6fa">Number</span>($(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%"> selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">else</span>{</div><div style="padding:0 6px; white-space:pre; line-height:130%"> thisNum <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> <span style="color:#4be6fa">Number</span>($(<span style="color:#4be6fa">this</span>).text());</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">if</span>(thisNum <span style="color:#aaffaa"></span><span style="color:#ff3399">></span> maxNum) maxNum <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> thisNum;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">else</span> minNum <span style="color:#aaffaa"></span><span style="color:#ff3399">=</span> thisNum;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#4be6fa">console</span>.log(<span style="color:#ffd500">'작은날짜: '</span>,minNum,<span style="color:#ffd500">', 큰날짜: '</span>,maxNum)</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#ff3399">for</span>(<span style="color:#ff3399">let</span> i<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>minNum; i<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span><span style="color:#aaffaa"></span><span style="color:#ff3399">=</span>maxNum ; i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>){</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(`.days li:nth<span style="color:#aaffaa"></span><span style="color:#ff3399">-</span>child(${i<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>day})`).addClass(<span style="color:#ffd500">'active'</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#4be6fa">console</span>.log(i);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">+</span><span style="color:#aaffaa"></span><span style="color:#ff3399">+</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> $(<span style="color:#ffd500">'#demo'</span>).html(`선택된 날짜 : ${minNum}일 ~ ${maxNum}일 <span style="color:#aaffaa"></span><span style="color:#ff3399"><</span>button <span style="color:#ff3399">class</span><span style="color:#ff3399">=</span><span style="color:#ffd500">"btn btn-sm btn-dark ml-3"</span> xxonClick<span style="color:#aaffaa"></span><span style="color:#ff3399">=</span><span style="color:#ffd500">"location.reload()"</span><span style="color:#aaffaa"></span><span style="color:#ff3399">></span>다시선택<span style="color:#aaffaa"></span><span style="color:#ff3399"><</span><span style="color:#aaffaa"></span><span style="color:#ff3399">/</span>button<span style="color:#aaffaa"></span><span style="color:#ff3399">></span>`);</div><div style="padding:0 6px; white-space:pre; line-height:130%"> selectedNum<span style="color:#aaffaa"></span><span style="color:#ff3399">-</span><span style="color:#aaffaa"></span><span style="color:#ff3399">-</span>;</div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> }</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> });</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> });</div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">script</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">style</span><span style="color:#f0f0f0">></span><span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> * </span>{<span style="color:#4be6fa">box-sizing</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> border-box</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> ul </span>{<span style="color:#4be6fa">list-style-type</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> none</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> body </span>{<span style="color:#4be6fa">font-family</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> Verdana, sans-serif</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .month </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 70px 25px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> width</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 100%</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> background</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> #1abc9c</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> text-align</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> center</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .month ul </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> margin</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 0</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .month ul li </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> color</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> white</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> font-size</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 20px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> text-transform</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> uppercase</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> letter-spacing</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 3px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .month .prev </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> float</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> left</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding-top</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 10px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .month .next </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> float</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> right</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding-top</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 10px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .weekdays </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> margin</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 10px 0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> background-color</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> #ddd</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .weekdays li </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> display</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> inline-block</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> width</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 13.6%</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> color</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> #666</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> text-align</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> center</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .days </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 10px 0</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> background</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> #eee</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> margin</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 0</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .days li </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> list-style-type</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> none</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> display</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> inline-block</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> width</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 13.6%</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> text-align</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> center</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> margin-bottom</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 5px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> font-size</span><span style="color:#ff3399">:</span><span style="color:#E083FF">12px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> color</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> #777</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 20px 10px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .days li.active </span>{<span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 5px</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> background</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> #1abc9c</span><span style="color:#ff3399">;</span><span style="color:#4be6fa"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#4be6fa"> color</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> white !important</span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span><span style="color:#999999">/* Add media queries for smaller screens */</span><span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> @media screen and </span>(<span style="color:#a8ff58">max-width</span><span style="color:#ff3399">:</span><span style="color:#a8ff58">720px</span>)<span style="color:#ff3399"> </span>{<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .weekdays li, .days li </span>{<span style="color:#4be6fa">width</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 13.1%</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> @media screen and </span>(<span style="color:#a8ff58">max-width</span><span style="color:#ff3399">:</span><span style="color:#a8ff58"> 420px</span>)<span style="color:#ff3399"> </span>{<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .weekdays li, .days li </span>{<span style="color:#4be6fa">width</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 12.5%</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .days li .active </span>{<span style="color:#4be6fa">padding</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 2px</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> </span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> @media screen and </span>(<span style="color:#a8ff58">max-width</span><span style="color:#ff3399">:</span><span style="color:#a8ff58"> 290px</span>)<span style="color:#ff3399"> </span>{<span style="color:#ff3399"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399"> .weekdays li, .days li </span>{<span style="color:#4be6fa">width</span><span style="color:#ff3399">:</span><span style="color:#E083FF"> 12.2%</span><span style="color:#ff3399">;</span><span style="color:#E083FF"></span>}<span style="color:#E083FF"></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#E083FF"> </span>}</div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">style</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">head</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#ff3399">body</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">h1</span> <span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"text-center mt-3"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span>CSS Calendar<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">h1</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">p</span> <span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"text-center"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span>표의 내용을 클릭하면 선택/취소 됩니다.<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">p</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span> <span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"month"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">span</span> <span style="color:#a8ff58">id</span>=<span style="color:#ffd500">"todayMonth"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span>1월<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">span</span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#ff3399">br</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">span</span> <span style="color:#a8ff58">style</span>=<span style="color:#ffd500">"font-size:18px"</span><span style="color:#a8ff58"></span> <span style="color:#a8ff58">id</span>=<span style="color:#ffd500">"todayYear"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span>2024<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">span</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">ul</span> <span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"weekdays"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span>일<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span>월<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span>화<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span>수<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span>목<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span>금<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span>토<span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">li</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">ul</span> <span style="color:#a8ff58">class</span>=<span style="color:#ffd500">"days"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span> </div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">ul</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"> <span style="color:#f0f0f0"><</span><span style="color:#ff3399">div</span> <span style="color:#a8ff58">id</span>=<span style="color:#ffd500">"demo"</span><span style="color:#a8ff58"></span><span style="color:#f0f0f0">></span><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">div</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">body</span><span style="color:#f0f0f0">></span></div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#f0f0f0"><</span><span style="color:#f0f0f0">/</span><span style="color:#ff3399">html</span><span style="color:#f0f0f0">></span></div></div><div style="text-align:right;margin-top:-13px;margin-right:5px;font-size:9px;font-style:italic"><a href="http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter</a></div></td><td style="vertical-align:bottom;padding:0 2px 4px 0"><a href="http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white"><span style="font-size:9px;word-break:normal;background-color:#4f4f4f;color:white;border-radius:10px;padding:1px">cs</span></a></td></tr></table></div></div></div>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
김은하
2024-04-23 달력
김은하
추천 0
조회 36
24.04.24 02:14
댓글 1
다음검색
첫댓글 잘 하셨네요..ㅎ
만년달력으로 처리해 보시면 더 좋을듯요.. 수고하셨습니다.