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

공부 이야기

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

판다(panda) 2012. 10. 22. 00:01

두번째 시간입니다..

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

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

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

세번째 게시판은..

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

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

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

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

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

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

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

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>

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

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

위치 수정..

.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>

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