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 @@ + +
+
+ + +
+ + + + +
+ + + +
+ +
@@ -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 @@ - + + +
@@ -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{