From c47531009559cfd9a6a16b597b321f4e76aec1d9 Mon Sep 17 00:00:00 2001 From: SeoJin Kim Date: Tue, 5 Oct 2021 23:16:21 +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][34]=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B8=B0=EB=8A=A5=20-=203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://kimvampa.tistory.com/255 --- .../src/main/webapp/WEB-INF/views/search.jsp | 49 +++++++++++++++++ .../src/main/webapp/resources/css/search.css | 52 +++++++++++++++++++ .../src/main/webapp/WEB-INF/views/search.jsp | 51 +++++++++++++++++- .../src/main/webapp/resources/css/search.css | 51 ++++++++++++++++++ 4 files changed, 202 insertions(+), 1 deletion(-) diff --git a/VamPa/src/main/webapp/WEB-INF/views/search.jsp b/VamPa/src/main/webapp/WEB-INF/views/search.jsp index c922a82..10e6bbd 100644 --- a/VamPa/src/main/webapp/WEB-INF/views/search.jsp +++ b/VamPa/src/main/webapp/WEB-INF/views/search.jsp @@ -90,6 +90,37 @@ + +
+
+ + +
+ +
+ 테스트용1 + 테스트용2 + 테스트용3 + 테스트용4 + 테스트용5 + 테스트용6 +
+
+ 테스트용1 + 테스트용2 + 테스트용3 + 테스트용4 + 테스트용5 + 테스트용6 +
+ +
+ + + +
+ +
@@ -263,6 +294,24 @@ }); + /* 검색 필터 */ + let buttonA = $("#filter_button_a"); + let buttonB = $("#filter_button_b"); + + buttonA.on("click", function(){ + $(".filter_b").css("display", "none"); + $(".filter_a").css("display", "block"); + buttonA.attr("class", "filter_button filter_active"); + buttonB.attr("class", "filter_button"); + }); + + buttonB.on("click", function(){ + $(".filter_a").css("display", "none"); + $(".filter_b").css("display", "block"); + buttonB.attr("class", "filter_button filter_active"); + buttonA.attr("class", "filter_button"); + }); + $(document).ready(function(){ // 검색 타입 selected diff --git a/VamPa/src/main/webapp/resources/css/search.css b/VamPa/src/main/webapp/resources/css/search.css index 2d7ccbc..8a525a3 100644 --- a/VamPa/src/main/webapp/resources/css/search.css +++ b/VamPa/src/main/webapp/resources/css/search.css @@ -259,6 +259,58 @@ a{ font-size: 25px; } +/* 필터정보 */ +.search_filter { + width: 85%; + margin: auto; + margin-top: 30px; + margin-bottom: 50px; +} +.filter_button_wrap { + width: 100%; +} + +.filter_button_wrap button { + width: 50%; +} +.filter_button{ + background-color: #04AA6D; + border: 1px solid green; + color: white; + padding: 10px 24px; + cursor: pointer; + float: left; +} +.filter_button_wrap:after { + content: ""; + clear: both; + display: table; +} +.filter_button_wrap button:not(:last-child) { + border-right: none; +} +.filter_button:hover { + background-color: #3e8e41; +} +.filter_active{ + background-color: #045d3c; +} +.filter_content{ + padding:20px 50px 20px 50px; + border: 1px solid gray; +} +.filter_content a:not(:first-child){ + margin-left: 10px; +} +.filter_a{ + display: block; +} + +.filter_b{ + display: none; +} + + /* footer navai 영역 */ .footer_nav{ diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/search.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/search.jsp index bdf4047..064b9d5 100644 --- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/search.jsp +++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/search.jsp @@ -90,7 +90,38 @@ - + +
+
+ + +
+ +
+ 테스트용1 + 테스트용2 + 테스트용3 + 테스트용4 + 테스트용5 + 테스트용6 +
+
+ 테스트용1 + 테스트용2 + 테스트용3 + 테스트용4 + 테스트용5 + 테스트용6 +
+ +
+ + + + + +
+
@@ -261,6 +292,24 @@ }); + /* 검색 필터 */ + let buttonA = $("#filter_button_a"); + let buttonB = $("#filter_button_b"); + + buttonA.on("click", function(){ + $(".filter_b").css("display", "none"); + $(".filter_a").css("display", "block"); + buttonA.attr("class", "filter_button filter_active"); + buttonB.attr("class", "filter_button"); + }); + + buttonB.on("click", function(){ + $(".filter_a").css("display", "none"); + $(".filter_b").css("display", "block"); + buttonB.attr("class", "filter_button filter_active"); + buttonA.attr("class", "filter_button"); + }); + $(document).ready(function(){ diff --git a/VamPa_MySQL/src/main/webapp/resources/css/search.css b/VamPa_MySQL/src/main/webapp/resources/css/search.css index 6c6e54a..974924b 100644 --- a/VamPa_MySQL/src/main/webapp/resources/css/search.css +++ b/VamPa_MySQL/src/main/webapp/resources/css/search.css @@ -259,6 +259,57 @@ a{ font-size: 25px; } +/* 필터정보 */ +.search_filter { + width: 85%; + margin: auto; + margin-top: 30px; + margin-bottom: 50px; +} +.filter_button_wrap { + width: 100%; +} + +.filter_button_wrap button { + width: 50%; +} +.filter_button{ + background-color: #04AA6D; + border: 1px solid green; + color: white; + padding: 10px 24px; + cursor: pointer; + float: left; +} +.filter_button_wrap:after { + content: ""; + clear: both; + display: table; +} +.filter_button_wrap button:not(:last-child) { + border-right: none; +} +.filter_button:hover { + background-color: #3e8e41; +} +.filter_active{ + background-color: #045d3c; +} +.filter_content{ + padding:20px 50px 20px 50px; + border: 1px solid gray; +} +.filter_content a:not(:first-child){ + margin-left: 10px; +} +.filter_a{ + display: block; +} + +.filter_b{ + display: none; +} + /* footer navai 영역 */ .footer_nav{