<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>검색 페이지</title>
<link rel="stylesheet" type="text/css" href="resources/css/h/search_page.css"/>
<script type="text/javascript"
src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".srh_result").hide();//hide all contents
$("#srhTab li:first").addClass("tab_selected").show();//active first tab
$(".srh_result:first").show();
//srhTab클릭했을 때
$("#srhTab").on("click", "li", function(){
$("#srhTab li").attr("class", "");
$(this).attr("class", "tab_selected");
$(".srh_result").hide();
var tab = $(this).find("a").attr("href");
$(tab).fadeIn("fast");
return false;//이걸 안하면 스크롤이 중간에...
});
});//document end
</script>
</head>
<body>
<c:import url="../JY/header.jsp"></c:import>
<div class="input_txt_wrap">
<div id="srhTxt">
<form action="searchGallaryPage" id="searchForm" method="post">
<input type="text" placeholder="검색어를 입력해주세요."/>
</form>
</div>
</div>
<div class="search_tab_wrap">
<div id="srhTab">
<ul>
<li><a href="#tab1">작품</a></li>
<li><a href="#tab2">작가</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="ctts">
<div class="srh_cnt_box">
<span class="srh_cnt">작품 검색 결과 4건</span>
<div class="srh_flag_div">
<ul class="srh_flag">
<li>정확도</li>
<li>좋아요</li>
<li>최신</li>
</ul>
</div>
</div>
<div class="search_result">
<div class="search_nothing">
<b>검색어</b>에 대한 검색결과가 없습니다.<br/>
다시 검색해 보세요.
</div>
</div>
<!------------------------------------------------------------------------ 페이징 -->
<div class="paging_area">
<div id="pagingWrap">
<span>«</span>
<span class="paging_selected">1</span>
<span>»</span>
</div>
</div>
</div>
</div>
<c:import url="../JY/footer.jsp"></c:import>
</body>
</html>
-----------------------------------------------------------------------------------------------------------css
@charset "UTF-8";
body {
font-size: 0pt;
margin: 0;
font-family: '돋움';
}
body, div, ul, ol, li, form, fieldset, legend, p, th, td, input, select, textarea, button {
margin: 0;
padding: 0;
list-style: none;
}
[type="button"] {
cursor: pointer;
font-family: '돋움';
}
a {
color: inherit;
text-decoration: none;
}
.input_txt_wrap {
height: 50px;
background-color: white;
text-align: center;
margin-top: 120px;
}
#srhTxt {
display: inline-block;
width: 1330px;
height: 50px;
margin: 0 auto;
}
#srhTxt [type="text"] {
font-size: 40px;
border: 0px;
width: 100%;
color: #333;
float: left;
}
#srhTxt input:focus {
outline: none;
}
.search_tab_wrap {
text-align: center;
}
#srhTab {
display: inline-block;
width: 1300px;
margin: 0 auto;
text-align: center;
}
#srhTab li {
float: left;
width: 80px;
padding: 30px 0 6px 0;
margin-right: 6px;
font-size: 24px;
color: #666;
}
#srhTab li:hover, #srhTab li:active {
float: left;
width: 80px;
padding: 30px 0 6px 0;
margin-right: 6px;
font-size: 24px;
color: #EF6C33;
font-weight: bold;
border-bottom: 2px solid #EF6C33;
cursor: pointer;
}
#srhTab .tab_selected {
float: left;
width: 80px;
padding: 30px 0 6px 0;
margin-right: 6px;
font-size: 24px;
color: #EF6C33;
font-weight: bold;
border-bottom: 2px solid #EF6C33;
cursor: pointer;
}
/* ----------------------------------------------------메인 */
.main {
background-color: #fbfbfb;
}
.ctts {
width: 1300px;
margin: 0 auto;
min-height: 1500px;
text-align: center;
}
.srh_flag_div * {
text-align: center;
}
.srh_cnt_box {
height: 60px;
}
.srh_cnt {
font-size: 17px;
color: #909090;
float: left;
margin-top: 26px;
}
.srh_flag_div {
height: 20px;
float: right;
display: inline-block;
margin-top: 26px;
}
.srh_flag_div ul li {
float: left;
list-style-type: none;
transition: 0.5s;
font-size: 17px;
color: #909090;
cursor: pointer;
height: 20px;
margin-left: 30px;
}
.srh_flag_div ul li:nth-child(1)::before {
float: left;
color: #EF6C33;
list-style-type: disc;
content:"\2022";
font-weight: bold;
font-size: 17px;
height: 20px;
width: 1em;
margin-left: -1em;
}
.srh_flag_div ul li:hover::before, .srh_flag_div ul li:active::before {
float: left;
color: #EF6C33;
list-style-type: disc;
content:"\2022";
font-weight: bold;
font-size: 17px;
height: 20px;
width: 1em;
margin-left: -1em;
}
/*-----------------------------------------------------결과 */
.search_nothing {
display: inline-block;
width: 500px;
height: 500px;
font-size: 30px;
margin: auto;
position: relative;
top: 100px;
}
/*-----------------------------------------------------paging */
.paging_area {
text-align: center;
width: 701px;
margin: 0 auto;
font-size: medium;
}
#pagingWrap {
font-size: 15pt;
}
#pagingWrap span {
display: inline-block;
min-width: 30px;
padding: 5px;
margin: 0px 5px;
cursor: pointer;
border-radius: 5px;
}
.paging_selected {
display: inline-block;
min-width: 30px;
padding: 5px;
border: 1px solid #444;
margin: 0px 5px;
cursor: pointer;
border-radius: 5px;
}
#pagingWrap span:hover:not(.paging_selected) {
background-color: #ddd;
border-radius: 5px;
}
'개발관련 > front-end' 카테고리의 다른 글
| [jquery]serializeArray() serialize() 차이 (0) | 2021.09.29 |
|---|---|
| 신고하기 팝업 1차 구현하기 (0) | 2021.07.23 |
| 첫 페이지 구현 2 (0) | 2021.06.30 |
| line-height, vertical-align (0) | 2021.05.30 |
| css 색상 (0) | 2021.05.30 |
