From a68571fa4533f93ddf8a5a1cfa673a6bf572134b Mon Sep 17 00:00:00 2001
From: psy <pak1427@gmail.com>
Date: Wed, 23 Mar 2022 13:29:03 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=95=EC=86=8C=EC=98=81=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=EB=A9=94=EB=89=B4=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/webapp/WEB-INF/jsp/nav.jsp           |  15 +++
 .../webapp/resource/css/images/m_logo.png     | Bin 0 -> 703 bytes
 src/main/webapp/resource/css/style.css        |  90 +++++++++++++++++-
 3 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/main/webapp/resource/css/images/m_logo.png

diff --git a/src/main/webapp/WEB-INF/jsp/nav.jsp b/src/main/webapp/WEB-INF/jsp/nav.jsp
index ee796bd..e4e5b0c 100644
--- a/src/main/webapp/WEB-INF/jsp/nav.jsp
+++ b/src/main/webapp/WEB-INF/jsp/nav.jsp
@@ -17,6 +17,21 @@
         <li class="dp1">
             <a href="/">CI 변환</a>
         </li>
+
+        <li class="m-dp1">
+            <input type="checkbox" id="menuicon">
+            <label for="menuicon">
+                <span></span>
+                <span></span>
+                <span></span>
+            </label>
+            <div class="m-sidebar">
+                <h3>Menu</h3>
+                <ul>
+                    <li><a href="/">· CI 변환</a></li>
+                </ul>
+            </div>
+        </li>
     </ul>
 </div>
 
diff --git a/src/main/webapp/resource/css/images/m_logo.png b/src/main/webapp/resource/css/images/m_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4880268ff4377af52439d63f137574e1558dd51
GIT binary patch
literal 703
zcmV;w0zmzVP)<h;3K|Lk000e1NJLTq001-q001xu1^@s6Ug=r=00009a7bBm000XT
z000XT0n*)m`~Uy~aY;l$RA_<im_29|K@@<$4QVVwvX&_%TtL#raED-L5z~pWh=rAc
zCYD-=f{k`sS|*K`!a}b}9k)pDg`8MfcxYppi$t&qjEuaEb2IBD`*UPC=7TL}X5Z|7
zyqSG-7b&F}CB{a|W)y|Sot}S80n5NuU<PQa?S&nqPme#0mi9VM<Qeimq38N#fyuwE
z-#<{FpJ{<N8Pa)K1r~uCPzSoeE|35l8FM`WUK;Jlxnn?v^b6`N%pdpcw^5x(aP({5
ziOz?9`S&7XQj=>%WY<Kn5au3oWe&ff+V{1L6POeIvL7;JZ0c4vN(nXlWR4C|AMZH<
z1<(@fKx~AzfQBreS;<OIGIOiU!_p<EH~9^7Kz)B(MP`saV9GoNUK#DK?43l~J!gg-
zq(XO`5G_=mn(T{|#F8=TIz0tQm)vq+=zhDZ?5tSrtgl$5j7g1|G$&QPc2&=at#;wB
z*J(+GhDF_)w~}Qwh><+Y?bw~sxoPLdg4h{3sScGU&CsX5iQ>kvgzP0aG@)i+ug*|h
z$+Huyz3SXiF{aQ@bLwdJK^0HhwWJmYNX1fwOOXm4IK}mR1E#N6A!QfRb-B_dP!o}_
za*it{Wq#$hfV<{kH1`-LE;>OuN#v|%qO+unoiaqynq?oA3JW1i@8<FH8=oM$@(wQC
zb^>#<A&1VB>X074R^~jHRfo2u*uKywIwVuk<;~Z?roGp4&@xWeEn{zWrM)KOrA`y4
z`PXMgu5WUowihnR@25_*w0Gb{oFU<FEZ+%2z7vFeCkXjY5b~WM<U2vgcY=`b1R>uE
lLcSA(d?yI`&S(h%e*lYFfz&t2577Vs002ovPDHLkV1nQ+LIMB)

literal 0
HcmV?d00001

diff --git a/src/main/webapp/resource/css/style.css b/src/main/webapp/resource/css/style.css
index 9396e4a..631a3ea 100644
--- a/src/main/webapp/resource/css/style.css
+++ b/src/main/webapp/resource/css/style.css
@@ -65,6 +65,7 @@ details ul span{color:#686868;}
     list-style: none;
 }
 .nav .logo{
+    width: 214px;
     height: 30px;
     background-image: url(./images/logo.png);
     background-size: 128px;
@@ -79,6 +80,8 @@ details ul span{color:#686868;}
     font-size: 18px;
     padding-left: 15px;
 }
+.m-dp1{display: none;}
+
 .box_group{
     background: #fff;
     border-radius: 10px;
@@ -144,4 +147,89 @@ button span{
 button:hover{
     transition: all 0.3s;
     background:#4367a6;
-}
\ No newline at end of file
+}
+
+/* 미디어쿼리 */
+@media only screen and (max-width : 500px){
+    div.app-item.nav{
+        width: 100%;
+    }
+    .nav{
+        display: flex;
+    }
+    .nav .logo{
+        border: none;
+        margin: 0px;
+        background-image: url(./images/m_logo.png);
+        background-size: 52px;
+        background-position: 7px 3px;
+    }
+    .dp1 a{
+        display: none;
+    }
+    .m-dp1{
+        display: block;
+    }
+    /*인풋에 체크되기 전*/
+    #menuicon {display: none;}
+    #menuicon + label {
+        display: block;
+        /*margin: 30px;*/
+        width: 33px;
+        height: 28px;
+        /*z-index: 9999;*/
+        position: relative;
+        cursor: pointer;
+        right: -180px;
+        top: 3px;
+    }
+    #menuicon + label span{
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 4px;
+        border-radius: 30px;
+        background: #fff;
+        transition: all .35s;
+    }
+    #menuicon + label span:nth-child(1){top:0;}
+    #menuicon + label span:nth-child(2){top:50%; transform: translateY(-50%);}
+    #menuicon + label span:nth-child(3){bottom: 0;}
+
+    /*인풋에 체크 후*/
+    #menuicon:checked + label{z-index: 17;}
+    #menuicon:checked + label span{background: #fff;}
+    #menuicon:checked + label span:nth-child(1){top:50%; transform: translateY(-50%) rotate(45deg);}
+    #menuicon:checked + label span:nth-child(2){opacity:0;}
+    #menuicon:checked + label span:nth-child(3){bottom:50%; transform: translateY(50%) rotate(-45deg);}
+
+    .m-sidebar{
+        width: 200px;
+        height: 100%;
+        background: #182e49;
+        position: fixed;
+        top: 0;
+        right: -300px;
+        z-index: 16;
+        transition: all .35s;
+        margin-top: 8px;
+    }
+    .m-sidebar ul{list-style: none;}
+    .m-sidebar h3{
+        color:#fff;
+        padding-top: 50px;
+        padding-left: 23px;
+        font-family: 'Noto Sans KR', sans-serif;
+        font-weight: 500;
+    }
+    .m-sidebar a{
+        color: #fff;
+        display:inline-block;
+        border: 0px solid red;
+        list-style: none;
+        font-family: 'Noto Sans KR', sans-serif;
+        font-weight: 400;
+    }
+    #menuicon:checked + label +div {right:0;}
+
+}/*삭제조심*/
\ No newline at end of file