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

공부 이야기

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

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

요새 홈페이지 만들거나.. 웹페이지 코딩을 할때.. 표준코딩.. 을 하라고 하는데..

그렇게 코딩하긴 하지만.. 여간 귀찮은게 아니에요;..

그리고 요즘 웹페이지 만들때 가장 많이 사용하는 것 중에 하나가 <div></div> 입니다..

전 개인적으로 div 정말 싫어하거든요.. 이거 빼고 코딩 하고 싶지만.. 좀 잘 만들고자 한다면.. 안쓸수가 없어요..

이번 게시판 만들기 강좌에서는 CSS 스타일시트, DIV로 레이아웃을 잡아서 만들어볼까 합니다..

언제까지나 이전 게시판처럼 <table></table> 만 사용해서 코딩할 수 없지요..

사람은 새롭게 배워야 하는겁니다..

그럼 우선 서버에 새롭게.. boardCSS 라고 만들고.. 시작해보겠습니다..

css에는 font 설정, 이미지 위치 설정, 테이블 크기 설정 등을 넣고 사용할겁니다..

우선 만들면서.. 그때 그때 필요한 css 가 생기면 추가해보도록 하죠..

게시판 만들기에서 가장 처음에 할껀 게시판 글 리스트 만들기입니다..

뭐 순서대로 하자면 설계하고 테이블 만들고 해야하지만.. 우선 리스트 부터 만들어봅시다..

매번 하던거라.. 제 게시판 만들기 1,2,3 을 보셨거나 따라하신분이라면.. 아주 쉬울겁니다..

저는 boardcss_list.jsp 라고 이름을 만들어봤습니다..

기존과 틀린 점은.. 아래 부분입니다..

<body>

우선 테이블을 나눠 볼껀데요.. 이렇게 나눠볼 생각입니다..

기존 <table> 방식으로 코딩을 해보자면..

<table>

<tr>

</tr>

</table>

<br />

<table>

<tr>

</tr>

</table>

이렇게 되겠지요..

하지만 이번 강좌는 div 를 이용한 게시판이기 때문에.. div 로 시작해보겠습니다..

div라고 다른건 없습니다.. 쫄지마세요..

우선 글 등록 버튼이 있는 테이블을 만들어보겠습니다..

세부 설정은 나중에 어느정도 틀이 나오면 그때 하도록 하겠습니다..

/* boardcss_list 에서 사용되는 글 등록 버튼 테이블 크기 */
#boardcss_list_add_button_table { /* 세부 설정은 나중에 */ }

/* 화면에 보여지는 글 등록 버튼 */
#boardcss_list_add_button_table .add_button { /* 세부 설정은 나중에 */ }

/* boardcss_list 에서 사용하는 글 목록 테이블 크기*/
.boardcss_list_table { /* 세부 설정은 나중에 */ }

/* 화면에 보여지는 글 목록 테이블 */
.list_table { /* 세부 설정은 나중에 */ }

/* list_table 에서 사용되는 thead */
.list_table thead th { /* 세부 설정은 나중에 */ }

/* list_table 에서 사용되는 tbody */
.list_table tbody td { /* 세부 설정은 나중에 */ }

</style>

<div id="boardcss_list_add_button_table">

<p class="add_button">등록</p>

</div>

그리고 화면을 보면..

이라고 나오는데.. 뭐 이건.. 테이블로 만들어도 똑같으니;.. 우선 계속 진행하도록 하겠습니다..

<div class="boardcss_list_table">
    <table class="list_table">
        <caption>판다의 이상한 게시판</caption>
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>이름</th>
                <th>등록일자</th>
            </tr>
        </thead>
        <tbody>

            <tr>
              <td>1</td>
                <td>판다의 이상한 게시판 with CSS, DIV</td>
              <td>판다(panda)</td>
                <td>2012-10-19</td>

</tr>
        </tbody>
    </table>
</div>

</body>

</html>

그리고 화면을 보면..

아래 두가지의 등록이 있는데요..

빨간 등록 과 파란 등록에 마우스 커서를 올려놓으시면 뭔가 다르 점이 있을겁니다..

등록

style="cursor:pointer" 가 있고 없고의 차이인데요.. 파란 등록에만 style="cursor:pointer" 가 들어있죠..

이렇게 등록버튼 안에.. <p class="add_button" style="cursor:pointer">등록</p> 직접 넣으셔도 되지만..

이건 CSS를 사용해서 만드는 게시판이기 때문에.. style="cursor:pointer" 를 여기에 넣지않고 css에 넣겠습니다..

/* 화면에 보여지는 글 등록 버튼 */

/* 세부 설정 내용을 추가합니다 */
#boardcss_list_add_button_table .add_button { cursor: pointer; }

그리고 다시 화면을 보면 등록버튼에 마우스가 지나갈때마다 포인터가 바뀌는것을 볼 수 있을겁니다..

그런데 딸랑 등록 버튼 하나 있으니까 뭔가 허전해 보이고..

오른쪽 정렬도 아니고.. 그냥 왼쪽에 있으니까.. 뭔가 보기 싫네요..

등록 버튼에 박스를 만들어줘서 버튼처럼 보이게 만들고.. 오른쪽 끝으로 이동시켜 보겠습니다..

저도 CSS 관련된 것들은 거의 모릅니다.. 이런것들은 웹디자인 업체에서 해주는 경우가 많거든요..

그리고 강좌라고 써놓긴 했지만.. 이 카테고리의 원래 용도는 제가 공부한 내용을 적고..

지나가다 아시는 분이.. 댓글로 답을 해주는 그런 용도로 쓸 예정이였는데.. 다들 저한테 물어보시더라구요;..

저도 잘 모르는데;..

그래서 CSS 용어라던지.. 뭐 그런것들은 저도 쓸때마다 인터넷 찾아보고 합니다..

NHN - NULI Guidelines CSS.. 이걸 보시면.. 어떻게 사용해야하는지 대충 아실겁니다..

하지만 이건 NHN 방식이니 굳이 저렇게 따라서 하실 필요는 없구요.. 그때 그때 필요한것만 추가해서 넣으면됩니다;..

우선 화면에 따라서 테이블 크기가 변경되게 만들었습니다..

왜냐하면.. 대부분의 사람들이 높은 해상도를 사용하지만..

일부 공기업, 공공기관은 1024x768 을 쓰기에.. 최대한 거기에 맞춰야하거든요;..

그래서 현재 열려있는 창을 100%라고 치고.. 1024x768 해상도에서 제대로 나오게끔 만들겁니다..

/* boardcss_list 에서 사용되는 글 등록 버튼 테이블 크기 */
#boardcss_list_add_button_table { width: 100%; }

/* boardcss_list 에서 사용하는 글 목록 테이블 크기*/
.boardcss_list_table { width: 100%; }

/* 화면에 보여지는 글 등록 버튼 */

/* 등록 버튼에 박스를 만들어줍니다..
#boardcss_list_add_button_table .add_button { cursor: pointer; border: 1px solid #bebebe; }

헉.. 박스가 너무 길군요;.. position: absolute; right: 0px; top: 0px; 을 사용해서..

박스 위치를 오른쪽 상단으로 옮기겠습니다..

position: absolute; 에 관한 설명은.. 이런 분들 블로그 가시면 자세하게 나와있습니다.. 참고해주세요..

웹디자인 포토샵 HTML-CSS 기초 - 미니 웹사이트 만들기 7 - 절대위치(Absolute Position)와 고정위치(Fixed Position)..

저도 잘 몰라서 인터넷 검색해서 찾아 쓰니까.. css 부분은 직접 찾아서 공부하세요;..

아무튼 조절 후의 화면을 보면.. 오른쪽 상단에 붙어 있는 등록 버튼을 보실 수 있을겁니다..

(위에 회색 선은 버튼이 너무 위로 붙어서 메뉴창 끝이 짤린겁니다;)..

right: 10px; top: 10px; 으로 10씩 공간을 주면 떨어집니다..

등록이라는 두글자에 맞게 테두리가 있어서 뭔가 갑갑한 느낌이네요..

길이를 width: 85px; 정도로 만들어주고.. 위, 아래 공백이 없으니까..

padding: 6px 0 7px; 을 추가해서 버튼형태를 만들어줍시다..

그리고 텍스트는 가운데 정렬, 글씨는 굵게 text-align: center; font-weight: bold; 해줍니다..

어느정도 모양은 나왔네요.. 등록버튼과 번호 제목 이름 등록일자 사이의 공간을 넓혀주겠습니다..

/* boardcss_list 에서 사용되는 글 등록 버튼 테이블 크기 */
#boardcss_list_add_button_table { width: 100%; margin: 0 auto 15px; }

등록 버튼은 어느정도 만들어졌는데.. 중간에 판다의 이상한 게시판 글씨가 걸리적 거리네요..

caption 보기가 싫으신 분들은.. <caption>판다의 이상한 게시판</caption> 이걸 지워도 되구요..

css 에 이렇게 적어주시면 됩니다..

/* 화면에 보여지는 caption */
.list_table caption { display: none; }

디스플레이 none 으로 설정해주시면 화면에 나오지 않습니다..

캡션을 지웠더니.. 글이 위로 올라와 버렸네요;..

버튼에 position: absolute; 를 해줘서 그런것 같습니다..

css에 이것을 추가합니다..

/* 글 등록 버튼과 글 목록이 겹치지 않게 만들어준 아무것도 아닌것 */
#boardcss_list_add_button_table .boardcss_list_add_button ul { width: 100%; overflow: hidden; }

그리고 내용에는 class 와 ul을 추가해줍니다..

<div id="boardcss_list_add_button_table">
   <div class="boardcss_list_add_button">
        <p class="add_button">등록</p>
      <ul></ul>
   </div>
</div>

만들어진 화면을 보면..

여기에 높이값 30px 를 추가해서 공간을 더 벌릴 수 있습니다..

#boardcss_list_add_button_table .boardcss_list_add_button ul { width: 100%; overflow: hidden; height: 30px;}

height: 30px; 을 넣으면 완전 많이 벌려지니 10px 정도면 충분할것 같군요..

버튼은 어느정도 된것 같으니.. 글 목록 테이블을 만들어봅시다..

이건 아직 100% 설정을 안해놨죠.. 그래서 화면을 크게 벌려놓으면 위치가 틀려질겁니다..

/* 화면에 보여지는 글 목록 테이블 */
.list_table { width: 100%; }

을 해주고..

각 크기 비중을 25% 씩 해서 총 100%가 되게 만들었습니다..

나중에 수정, 삭제 를 넣으면 20% 씩 5개가 될겁니다..

이렇게 넣고 화면을 보면.. 이상하게 나오는걸 볼 수 있습니다;..

/* list_table 에서 사용되는 tbody */
.list_table tbody td { padding: 5px 0; text-align: center; } 으로 글 위치를 맞춰줍니다..

사실 해상도가 크면 아무런 문제가 없습니다.. 하지만 해상도가 작으면..

글씨가 두줄 또는 세줄로 나오는 경우가 생깁니다..

이래서 미친다는거죠;.. 공무원들은 XP에 익스플로러7, 그리고 1024x768을 사용하니까 말이죠;..

저만 쓰는 이런 게시판은 아무리 써도 1000개까지는 쓰기 힘들죠..

디씨인사이드, 일베, 오유 같은 곳은 하루에도 수백개의 글이 올라오기 때문에..

글 번호가 3912301 인것도 있습니다..

그런건 각 사이트마다 크기 조절하면 됩니다.. 아까 width="25%" 줬던것을..

width="15%" width="45%" width="20%" width="20%" 으로 바꿔주면 좋근 좋아보이겠네요..

창 크기를 위에 보다 더 줄여봤는데.. 이상한 게..까지만 써지던 제목이 with 까지 찍혀 나오는걸 볼 수 있을겁니다..

이건 나중에 DB에서 볼러올때 잘라내기로 하고.. 다시 조금 더 꾸며보겠습니다..

지난 게시판에서는 글과 글 사이에.. 선을 하나 만들어줘서 글과 글 사이를 분리해줬습니다..

이런식으로 말이죠..

   <tr>
       <td>5</td>
       <td>판다의 이상한 게시판 with CSS, DIV</td>
       <td>판다(panda)</td>
       <td>2012-10-19</td>
   </tr>
   <tr height="1" bgcolor="#e5e5e5"><td colspan="4"></td></tr>
   <tr>
       <td>4</td>
       <td>판다의 이상한 게시판 with CSS, DIV</td>
       <td>판다(panda)</td>
       <td>2012-10-19</td>
   </tr>

그럼 이렇게 나옵니다..

매번 쓰는 말이고.. 매번 보는 말일지도 모르겠지만.. 또 쓰겠습니다..

이번 강좌는 CSS를 이용한 게시판 만들기라서.. 이것도 CSS를 통해서 만들어 보도록 하겠습니다..

밑줄을 만들어줍니다..

/* list_table 에서 사용되는 tbody */
.list_table tbody td { padding: 5px 0; text-align: center; border-bottom: 1px solid #e5e5e5; }

번호 제목 이름 등록일자도 뭔가 허전하니까..

윗줄, 밑줄 두개 다 만들어주고.. 색도 칠해봅시다..

/* list_table 에서 사용되는 thead */
.list_table thead th { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 5px 0; text-align: center; background: #faf9fa; }

그럼 대충 이정도가 만들어집니다..

번호 제목 이름 등록일자 사이가 끊어져있는데.. 붙이고 싶은데 방법을 모르겠네요;..

우선 게시판 글 목록은 대충 완성 된것 같습니다..

다음 시간에는 검색창도 만들어 넣고 등록버튼에 색도 넣고.. 최종적으로 글 목록(디자인 부분)을 끝내록 하겠습니다..

오늘의 소스파일..

boardcss_list.jsp

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