From 3ccf90f845670123fa152b0a8330513b6041c95f Mon Sep 17 00:00:00 2001 From: SeoJin Kim Date: Mon, 27 Sep 2021 15:41:55 +0900 Subject: [PATCH] =?UTF-8?q?[Spring][=EC=87=BC=ED=95=91=EB=AA=B0=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8][33]=20=EB=A9=94=EC=9D=B8?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=84=A4=EB=B9=84=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://kimvampa.tistory.com/251 --- VamPa/src/main/webapp/WEB-INF/views/main.jsp | 28 +++++++- VamPa/src/main/webapp/resources/css/main.css | 66 ++++++++++++++++-- .../maven/com.vam/controller/pom.properties | 2 +- .../src/main/webapp/WEB-INF/views/main.jsp | 28 +++++++- .../src/main/webapp/resources/css/main.css | 67 +++++++++++++++++-- .../maven/com.vam/controller/pom.properties | 2 +- 6 files changed, 181 insertions(+), 12 deletions(-) diff --git a/VamPa/src/main/webapp/WEB-INF/views/main.jsp b/VamPa/src/main/webapp/WEB-INF/views/main.jsp index 1b43ce3..ac6cff7 100644 --- a/VamPa/src/main/webapp/WEB-INF/views/main.jsp +++ b/VamPa/src/main/webapp/WEB-INF/views/main.jsp @@ -87,7 +87,33 @@
-

navi area

+
+ +
+ 교양 + 테스트1 + 테스트2 + 테스트3 + 테스트4 + 테스트5 + 테스트6 +
+
+
+ +
+ 테스트1 + 테스트2 + 테스트3 + 테스트4 + 테스트5 + 테스트6 +
+

content area

diff --git a/VamPa/src/main/webapp/resources/css/main.css b/VamPa/src/main/webapp/resources/css/main.css index 2e1f249..3ead32c 100644 --- a/VamPa/src/main/webapp/resources/css/main.css +++ b/VamPa/src/main/webapp/resources/css/main.css @@ -123,10 +123,68 @@ a{ } /* 제품 목록 네비 */ -.navi_bar_area{ - width: 100%; - height: 70px; - background-color: #7696fd; +.navi_bar_area { + overflow: hidden; + background-color: #5e6b9e; +} + +.navi_bar_area a { + float: left; + font-size: 16px; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.dropdown { + float: left; + overflow: hidden; + margin-left: 10px; +} + +.dropdown .dropbtn { + font-size: 16px; + font-weight: bold; + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; + width:140px; +} + +.dropdown-content { + display:none; + position: absolute; + background-color: #f9f9f9; + width: 466px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.dropdown-content a { + float: none; + color: black; + padding: 12px 16px; + text-decoration: none; + display: inline-block; + text-align: left; + width: 80px; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.navi_bar_area a:hover, .dropdown:hover .dropbtn { + background-color: #475382; +} + +.dropdown-content a:hover { + background-color: #ddd; } /* 홈페이지 메인 제품 목록 */ diff --git a/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties b/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties index bdf228b..2b6a9af 100644 --- a/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties +++ b/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties @@ -1,5 +1,5 @@ #Generated by Maven Integration for Eclipse -#Thu Sep 16 21:52:41 KST 2021 +#Mon Sep 27 14:58:55 KST 2021 m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa m2e.projectName=VamPa groupId=com.vam diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp index 5ace3b6..f9eaecf 100644 --- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp +++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp @@ -87,7 +87,33 @@
-

navi area

+
+ +
+ 교양 + 테스트1 + 테스트2 + 테스트3 + 테스트4 + 테스트5 + 테스트6 +
+
+
+ +
+ 테스트1 + 테스트2 + 테스트3 + 테스트4 + 테스트5 + 테스트6 +
+

content area

diff --git a/VamPa_MySQL/src/main/webapp/resources/css/main.css b/VamPa_MySQL/src/main/webapp/resources/css/main.css index 1987a46..7ad1845 100644 --- a/VamPa_MySQL/src/main/webapp/resources/css/main.css +++ b/VamPa_MySQL/src/main/webapp/resources/css/main.css @@ -122,12 +122,71 @@ a{ } /* 제품 목록 네비 */ -.navi_bar_area{ - width: 100%; - height: 70px; - background-color: #7696fd; +.navi_bar_area { + overflow: hidden; + background-color: #5e6b9e; } +.navi_bar_area a { + float: left; + font-size: 16px; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.dropdown { + float: left; + overflow: hidden; + margin-left: 10px; +} + +.dropdown .dropbtn { + font-size: 16px; + font-weight: bold; + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; + width:140px; +} + +.dropdown-content { + display:none; + position: absolute; + background-color: #f9f9f9; + width: 466px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.dropdown-content a { + float: none; + color: black; + padding: 12px 16px; + text-decoration: none; + display: inline-block; + text-align: left; + width: 80px; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.navi_bar_area a:hover, .dropdown:hover .dropbtn { + background-color: #475382; +} + +.dropdown-content a:hover { + background-color: #ddd; +} + + /* 홈페이지 메인 제품 목록 */ .content_area{ width: 100%; diff --git a/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties b/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties index 021cd0c..ae2a2a5 100644 --- a/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties +++ b/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties @@ -1,5 +1,5 @@ #Generated by Maven Integration for Eclipse -#Thu Sep 16 21:52:42 KST 2021 +#Mon Sep 27 14:58:56 KST 2021 m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL m2e.projectName=VamPa_MySQL groupId=com.vam