티스토리 뷰

공부 이야기

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

판다(panda) 2012. 11. 26. 00:01

HTML 테이블의 길이보다 아주 긴 resultSet을 테이블 길이만큼만 표시.. 라는 좋은 정보의 블로그가 있어서..

참조하시라고 링크 걸어드립니다..

 

저 같은 경우에는 쿼리에서 컷스트링으로 일정자리수 이상 되는 글은 잘라서 가져오게끔 만들었는데..

이 방법은 그런게 아니고 테이블 길이에 따라 표시되니 따로 수정안해도 될것 같네요.. 

 

테이블 길이에 따라 내용이 조절되는 것도 역시 style 을 통해서 합니다..

 

<TABLE STYLE="TABLE-layout:fixed">

    <TR>

        <TD STYLE="overflow:hidden;text-overflow:ellipsis;">
            <NOBR>내용</NOBR>

        </TD>

    </TR>

</TABLE>

 

위에 내용이 웹표준성에는 맞지 않네요.. 참고만 하세요;..

 

CSS 에 추가해서 해보도록 하죠.. 지금은 아직 리스트 불러오기 조차 안되어있으니.. 나중에요;..

 

오늘은 글 등록하는걸 해볼겁니다..

 

우선 boardcss_write.jsp 를 만들었구요.. 폼 구성을 하기 전에.. 등록페이지 부터 연결하도록 하겠습니다..

 

등록하는 방법은 여러가지가 있는데요..

팝업창을 열어서 등록하는 방법, list 페이지에서 write 페이지로 바뀐후 등록하는 방법, list 페이지에서 등록하는 방법..

등이 있겠네요..

 

list 페이지에서 바로 등록하는 방법은..

[JSP] 게시판 만들기 세번째 - 다시 만드는 게시판5 에서 수정하는 방법으로 해봤고..

 

페이지 바뀐후 등록하는 방법은 계속 해왔던 방법이고.. 안해본건 팝업창이네요..

그럼 안해본 팝업창으로 해봐야겠죠?..

 

다시 boardcss_list.jsp 에서 팝업창으로 열리게 수정을 해주겠습니다..

 

팝업창 만들기 쉽습니다..

윈도우팝업오픈('경로','팝업창명',크기등 조절');

window.open('/boardCSS/boardcss_write.jsp', 'boardcss_write','width=600,height=600,scrolling=no, scrollbars=no');


이렇게하면.. 간단하게 팝어창이 만들어집니다..

 

<script language="javascript">
function onPopup(){
    popup = window.open('/boardCSS/boardcss_write.jsp', 'boardcss_write','width=600,height=600,scrolling=no, scrollbars=no');
    popup.focus();
}
</script>

 

<!-- 등록버튼 시작 -->
<div id="boardcss_list_add_button_table">
    <div class="boardcss_list_add_button">
        <p class="add_button" onClick="onPopup();">등록</p>
        <ul></ul>
    </div>
</div>
<!-- 등록버튼 종료 -->

 

스크립트 추가와.. onclick 으로 스크립트를 실행하게 만들어봤습니다..

 

등록을 누르면 크기 600x600 의 팝업창이 열리는것을 보실 수 있을겁니다..

이제 그 팝업창에 크기에 맞춰서 등록페이지를 만들어보겠습니다..

 

boardcss_write.jsp 으로 만들었구요.. 코딩 시작해보죠..

 

<%@ page language="java" import="java.sql.*, java.util.*, util.*, java.security.*" contentType="text/html;charset=euc-kr" %>

<html>
<head>
<title>4번 게시판 등록</title>
</head>

<style type="text/css">

#popup { width: 600px; }
#popup .title { position:relative; height:40px; text-align:center; width:600px; }

#popup .title p{ font-weight: bold; }

.popup_write { position:absolute; }

.popup_write .contents { position:absolute; }

#popup .popup_table .write_table { position:relative; height:400px; width:600px; }

#search { width:400px; height:30px; text-align:center;  border: 1px solid #cfcfcf; vertical-align:middle; line-height:29px; }

</style>

 

<body>

<div id="popup">
 <div class="popup_write">
  <div class="contents">
   <div class="popup_table">
    <div class="title"><p>등록</p></div>
    <div class="write_table" >
     <table summary="">
      <caption></caption>
       <colgroup>
        <col style="width:100px;" />
        <col />
       </colgroup>
       <tbody>
        <tr>
         <th>제목</th>
         <td><input id="search" type="text" name=""></td>
        </tr>
        <tr>
         <th>이름</th>
         <td><input id="search" type="text" name=""></td>
        </tr>
        <tr>
         <th>내용</th>
         <td><textarea name="contents" cols="85" rows="13" style="width:400px;height:300px;"></textarea></td>
        </tr>
       </tbody>
     </table>
    </div>
   </div>
  </div>
 </div>
</div>

</body>
</html>

 

 그러면 이렇게 나오는데요..

 

내용 등록 창이 제목, 이름 창과 약간 틀리기 때문에 이것도 CSS 수정을 통해 바꿔보겠습니다..

 

border: 1px solid #CDC9C9; 으로 회색테두리를 만들어주고..

bordescrollbar-arrow-color:#d2d2d2;scrollbar-3dlight-color:#fff;scrollbar-highlight-color:#ccc;scrollbar-face-color:#FFF;scrollbar-shadow-color:#ccc;scrollbar-darkshadow-color:#fff;scrollbar-track-color:#fff 으로 스크롤바를 꾸며줍니다..

 

 

.scroll_form { font-size:12px;  border: 1px solid #CDC9C9; bordescrollbar-arrow-color:#d2d2d2;scrollbar-3dlight-color:#fff;scrollbar-highlight-color:#ccc;scrollbar-face-color:#FFF;scrollbar-shadow-color:#ccc;scrollbar-darkshadow-color:#fff;scrollbar-track-color:#fff }

 

<td><textarea name="contents" cols="85" rows="13" class="scroll_form" style="width:400px;height:300px;"></textarea></td>

 

리스트에서 만들었던 버튼을 이름만 바꿔서 쓰겠습니다;..

css는 될수있으면 통일해서 넣어야하는데;.. 자꾸 늘어나네요;..

 

나중에 중복되는건 빼면되니까.. 그냥 진행하도록 하겠습니다;..

 

.addButton { width: 85px; text-align: center; display: inline-block; border: 1px solid #bebebe; padding: 6px 0 6px; cursor: pointer; font-weight: bold; }

그리고 테이블이 끝나는 곳에..

<div class="popup_btn_sec"><span class="addButton">등록</span>&nbsp;<span class="addButton">취소</span></div>

를 넣어서 버튼을 만들어줬습니다..

 

 

이제 등록을 눌렀을때 제목, 이름, 글 내용이 정확하게 적혀있는지 체크하는 부분과..

글내용이 저장되어 처리되는 등록처리 파일을 만들면되겠네요..

 

가장 쉬운것부터 하겠습니다.. 등록 팝업창이 떴으니.. 취소를 눌렀을때 등록 팝업창이 닫히도록 하겠습니다..

 

이 부분을 눌러도 닫히긴 하는데;.. 

 

저걸 눌러서 닫히면 취소 버튼은 만들 필요가 없는것이죠;..

버튼을 눌렀을때.. 현재 창을 닫도록 window.close() 를 넣겠습니다..

<span class="addButton" onClick="window.close();">취소</span>

 

그럼 취소 눌렀을때 팝업창이 사라지는걸 보실 수 있을겁니다..

 

요새 바빠서 다시 게시판 만들기 쓰기가 힘겹네요;..

 

그래서 이번엔 좀 짧습니다;.. 이해해 주시구요;.. 시간 남을때 조금씩 작성하는거라.. 어쩔수없습니다..

 

오늘의 소스입니다..

boardcss_write.jsp

저작자표시 비영리 변경금지