[JSP] 게시판 만들기 with CSS, DIV 2

두번째 시간입니다..

 

지난시간과 마찬가지로.. 리스트 페이지를 더 꾸며보도록 하겠습니다..

 

첫번째 게시판의 검색 기능은 단순하게 제목을 검색하는것이였고.. 

 

두번째 게시판은 첫번째 게시판에서 코딩 보안을 한것이라.. 검색기능이 없었고;..

 

세번째 게시판은..

제목과 이름을 검색할 수 있게 만들어놨었죠.. 

 

이번에는 뭔가 또 새로운 검색 기능을 보여줘야할것 같네요;.. 부담이 팍팍;..

 

그럼 세번째 게시판 내용보기와 검색하기를 합쳐서 만들어보죠.. 뭐 결과적으론 똑같은건데;..

더 이상 해 볼 만한 내용이 생각나지않아요;..

 

우선 세번째 게시판 검색기능 소스는 이렇습니다..

예전 강좌 찾아보셔도 되긴하는데.. 귀찮으니까;..

 

<table width="100%" cellpadding="0" cellspacing="0" border="0">
   <form name="searchForm" action="newboard_list.jsp" method="post">
   <input type="hidden" name="pages" value="<%=pages%>">
   <tr>
        <td align="right">
            <select name="search_key">
                <option value="s_subject" <%=search_key.equals("s_subject") ? "selected" : ""%>>제목</option>
                <option value="s_name" <%=search_key.equals("s_name") ? "selected" : ""%>>이름</option>
            </select>
            <input type="text" name="search_value" size="20" maxlength="30" value="<%=search_value%>">
            <input type="image" src="이미지 주소" border="0" align="absmiddle" alt="검색">
       </td>
   </tr>
   </form>
</table>

큰 틀은 비슷할겁니다.. 여기서 약간의 수정이 필요한거죠..

 

CSS 추가부터 하겠습니다..

 

/* boardcss_list 에서 사용되는 글 검색 테이블 크기 */
#boardcss_list_search { width: 100%; }

#boardcss_list_search ul li { display: inline; font-weight: bold; }

 

<!-- 검색 테이블 시작 -->
<div id="boardcss_list_search" style="display:block;">
    <ul>
         <li>제목</li>
         <li><input type="text" name="search_subject" value="" /></li>
         <li>검색</li>
         <li>상세검색</li>
    </ul>
</div>
<!-- 검색 테이블 종료 -->

 

기본 검색값은 제목입니다.. 여기서 input 상자에 제목을 넣고 검색을 누르면 검색이 되게 할겁니다..

상세검색은.. 눌렀을때 상세 검색조건이 나와서 더 자세하게 검색하는 기능을 만들어볼겁니다..

 

저렇게 만들면.. 이렇게 나옵니다.. 

 

이것도 모양이 안이쁘니까.. CSS 추가해서 꾸며보겠습니다..

/* input 상자 모양 */ 
#search { width:200px; height:20px; }

 

크기와 높이 조절.. 그리고 input 상자에 id 추가..

 

<!-- 검색 테이블 시작 -->
<div id="boardcss_list_search" style="display:block;">
    <ul>
        <li>제목</li>
        <li><input id="search" type="text" name="search_subject" value="" /></li>
        <li>검색</li>
        <li>상세검색</li>
    </ul>
</div>
<!-- 검색 테이블 종료 -->

 

크기, 높이 조절로 어느정도 틀이 된것 같은데.. 상자 테두리 색이 변해서 안이쁘니까;.. 그것도 바꿀께요..

한번에 바꾸면 좋은데.. 저도 만들면서.. 이 글을 동시에 작성하는거라;.. 적용하고 글쓰고 하느라 한번에 못합니다;..

 

/* input 상자 모양 */
#search { width:200px; height:20px; text-align:center; border: 1px solid #cfcfcf; }

 

마우스 커서의 위치를 박스 한가운데로 이동.. 그리고 상자 테두리를 회색으로 처리해서 상자 테두리 색을 고정했습니다..

 

그리고 이게 상자 높이가 작아서 보는데 문제가 없는데..

 

상자 높이가 크면..

#search { width:200px; height:60px; text-align:center; border: 1px solid #cfcfcf; }

 

이렇게 나옵니다.. 

 

#search { width:200px; height:60px; text-align:center;  border: 1px solid #cfcfcf; vertical-align:middle; } 

 

vertical-align:middle; 를 추가해서 가운데로 정렬한것 까지는 좋았는데.. 검색박스 안에 글씨가 상향되어서 나오는군요;..

 

line-height: 0px 로 상향된 글씨를 하향조절 할 수 있습니다..

#search { width:200px; height:60px; text-align:center; border: 1px solid #cfcfcf; vertical-align:middle; line-height:56px; }

 

하지만.. 검색박스를 저렇게 크게 할 이유가 없으니까;.. 원래되로 되돌리겠습니다..

 

/* input 상자 모양 */
#search { width:200px; height:20px; text-align:center;  border: 1px solid #cfcfcf; vertical-align:middle; line-height:20px; }

 

그리고 검색버튼도 위에 등록버튼처럼 상자, 글씨 굵기 등을 해주겠습니다..

 

/* 검색 버튼 */
#boardcss_list_search ul li.search_button { cursor: pointer; width: 60px; text-align: center; border: 1px solid #bebebe; padding: 6px 0 6px; vertical-align:middle; font-weight: bold;}

 

검색과 상세검색 사이가 너무 붙었네요..

 

margin-right:10px; 를 추가해서 공간을 만들어줍니다..

 

그리고 중간에 있는 검색 창 위치를 오른쪽으로 맞춰줍니다..

#boardcss_list_search ul{ float: right; width: 550px; display: inline; margin-right:-170px; } 

 

이제 상세검색도 꾸며보죠..

 

/* 상세 검색버튼 */
#boardcss_list_search ul li.detail_button { cursor: pointer; width: 80px; text-align: center;  border: 1px solid #bebebe; padding: 6px 0 6px; vertical-align:middle; font-weight: bold; }

 

그리고 검색박스 크기가 검색, 상세검색 버튼보다 작기에.. 크기를 비슷하게 만들겠습니다..

 

/* input 상자 모양 */
#search { width:200px; height:30px; text-align:center;  border: 1px solid #cfcfcf; vertical-align:middle; line-height:29px; }

 

검색버튼 보다 크기가 크니까 화면에서 잘리더군요..

그래서 아까 오른쪽으로 맞춰주기 위해 -170 줬던걸 -130 줬습니다..

#boardcss_list_search ul{ float: right; width: 550px; display: inline; margin-right:-130x; }  

 

이제 상세검색 테이블을 만들어보겠습니다..

 

우선 CSS 추가부터 하겠습니다..

 

/* 상세 검색버튼 */
#boardcss_list_search ul li.detail_button { cursor: pointer; width: 100px; text-align: center;  border: 1px solid #bebebe; padding: 6px 0 6px; vertical-align:middle; font-weight: bold; }
/* 상세검색 테이블 */
.detailSearch { width: 100%; border-top: 1px solid #e5e5e5; }
.detailSearch .detailSearch_table { width: 100%; border-top: 0; border-bottom: 1px solid #e5e5e5; }

.detailSearch .detailSearch_table tbody td { padding: 5px 0; }
.detailSearch .detailSearch_table tbody td.detailSearch_td { vertical-align: middle; height: 30px; }

.detail_td { width: 100%; position: relative; height: 30px; }
.detail_td .detailSearch_button { cursor: pointer; width: 54px; position: absolute; border: 1px solid #bebebe;  padding: 6px 0 6px; text-align: center; font-weight: bold; right: 91px; display: block; }

<!-- 상세검색 테이블 시작 -->
<div id="detailSearch" class="detailSearch" style="display:block;">
    <table class="detailSearch_table" summary="" border="0">
        <colgroup>
            <col width="15%" />
            <col width="30%" />
            <col width="15%" />
            <col width="40%" />
       </colgroup>
       <tbody>
            <tr>
                <th>제목</th>
                <td><input id="search" type="text" name=""></td>
                <th>이름</th>
                <td><input id="search" type="text" name=""></td>
           </tr>
           <tr>
                <th>등록일자</th>

 

<!-- 여기서 search1 을 하면 크기가 200px 이기 때문에.. 찌그러져서 나옵니다.. 그래서 크기가 100px인 search2를 만들겠습니다 #search2 { width:100px; height:30px; text-align:center; border: 1px solid #cfcfcf; vertical-align:middle; line-height:29px; } -->

                <td colspan="2"><input id="search2" type="text" name="">~<input id="search2" type="text" name=""></td>
                <td class="detailSearch_td">
                    <div class="detail_td">
                        <span class="detailSearch_button">검색</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!-- 상세검색 테이블 종료 -->

 

여기까지 하면.. 화면에 나타나는 결과는.. 이정도가 되겠네요..

 

 

검색 버튼 위치 수정과.. 상세검색이 닫히는 닫기 버튼을 만들겠습니다..

 

위치 수정..

.detail_td .detailSearch_button { cursor: pointer; width: 54px; position: absolute; border: 1px solid #bebebe;  padding: 6px 0 6px; text-align: center; font-weight: bold; right: 44px; display: block; }

/* 상세검색 닫기 */
.closeButton_table { width: 100%; text-align: right; }
.closeButton { width: 85px; text-align: center; display: inline-block; border: 1px solid #bebebe; padding: 6px 0 6px; cursor: pointer; font-weight: bold; }

 

       </tbody>
   </table>

   <div class="closeButton_table">
       <a class="closeButton">닫기</a>
   </div>

</div>
<!-- 상세검색 테이블 종료 -->

 

 

이것들을 다 합치면 이렇게 되겠네요..

 

상세검색에 ▼ 가 있으니까 닫기에는 ▲ 을 넣어주겠습니다..

 

그리고 버튼이 동작해야하니까.. ▲ 을 넣으면서 버튼 동작도 시켜보죠..

 

  <li class="detail_button" onclick="document.getElementById('boardcss_list_search').style.display = 'none'; document.getElementById('detailSearch').style.display = 'block';">상세검색▼</li>

 

 <div class="closeButton_table">
  <a class="closeButton" onclick="document.getElementById('boardcss_list_search').style.display = 'block'; document.getElementById('detailSearch').style.display = 'none';">닫기▲</a>
 </div>

 

상세검색 누르기 전..

 

상세검색 누른 후.. 상세검색 버튼이 사라지면서 상세검색 테이블이 보여짐.. 

 

오늘은 여기까지입니다..

 

다음시간에는 글 등록 페이지를 만들어보도록 하겠습니다..

 

오늘의 소스..

 

boardcss_list.jsp