메뉴 건너뛰기

조회 수 17064 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

JSP 게시판 만들기 - 구현 (HTML 코딩)

 

화면설계를 참고하여 HTML 코딩을 했다. 이쁘게 하면 좋겠지만 간단하게 <table /> 태그를 이용하여 심플하게 구성했다. 이러한 HTML 코딩은 웹 퍼블리셔가 주로 하게 되는 데 웹 퍼블리셔는 웹표준과 웹 접근성에 맞게 코딩하게 된다.

 

목록 페이지 (boardList.jsp)

 

 

등록 폼 페이지 (boardWriteForm.jsp)

 

 

수정 폼 페이지 (boardModifyForm.jsp)

 

 

상세 조회 페이지 (boardView.jsp)

 

 

 

목록 페이지 HTML 구조

대부분이 아래의 HTML 구조로 작성되었다. (파일첨부)

CSS, SCRIPT, 목록 HTML 구분지어 코딩

 

    <%@ page language="java" contentType="text/html; charset=UTF-8"

            pageEncoding="UTF-8"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

    <title>게시판 목록</title>

    <!-- CSS 영역 -->

    <style type="text/css">

        * {font-size: 9pt;}

        p {width: 600px; text-align: right;}

        table thead tr th {background-color: gray;}

    </style>

    <!-- //CSS 영역 -->

    <!-- 자바스크립트 영역 -->

    <script type="text/javascript">

        function goUrl(url) {

           location.href=url;

        }

    </script>

    <!-- //자바스크립트 영역 -->

    </head>

    <body>

       <!-- 검색 폼 영역 -->

       <form name="searchForm" action="" method="get">

       <p>

           <select name="searchType">

               <option value="ALL">전체검색</option>

               <option value="SUBJECT">제목</option>

               <option value="WRITER">작성자</option>

               <option value="CONTENTS">내용</option>

           </select>

           <input type="text" name="searchText" value="" />

           <input type="submit" value="검색" />

       </p>

       </form>

       <!-- //검색 폼 영역 -->

       <!-- 게시판 목록 영역 -->

       <table border="1" summary="게시판 목록">

           <caption>게시판 목록</caption>

           <colgroup>

               <col width="50" />

               <col width="300" />

               <col width="80" />

               <col width="100" />

               <col width="70" />

           </colgroup>  

           <thead>

               <tr>

                    <th>번호</th>

                    <th>제목</th>

                    <th>작성자</th>

                    <th>등록 일시</th>

                    <th>조회수</th>

               </tr>

           </thead>

           <tbody>

               <tr>

                    <td align="center" colspan="5">등록된 게시물이 없습니다.</td>

               </tr>

               <tr>

                    <td align="center">1</td>

                    <td><a href="boardView.jsp">동해물과 백두산이 마르고 닳도록 하...</a></td>

                    <td align="center">김연석</td>

                    <td align="center">2013.06.24</td>

                    <td align="center">10</td>

               </tr>

           </tbody>

           <tfoot>

               <tr>

                    <td align="center" colspan="5">1</td>

               </tr>

           </tfoot>

       </table>

       <!-- //게시판 목록 영역 -->

       <!-- 버튼 영역 -->

       <p>

           <input type="button" value="목록" onclick="goUrl('boardList.jsp');" />

           <input type="button" value="글쓰기" onclick="goUrl('boardWriteForm.jsp');" />

       </p>

       <!-- //버튼 영역 -->

    </body>

    </html>

 

 

 


List of Articles
번호 제목 날짜 조회 수
65 회원가입 2019.01.09 918
64 한줄메모 삽입 & AJAX file 2019.01.09 975
63 한줄메모 목록 리스트 AJAX file 2019.01.09 928
62 페이지 화면 이동방식 file 2019.01.09 893
61 패키지 컴파일 방법 2021.03.25 147
60 패키지 생성 bat문 2021.03.25 117
59 파라미터를 배열 형식으로 받기 2021.03.25 1422
58 태그문자&공백문자&줄바꿈 문자 처리 file 2019.01.09 1027
57 지시자(Directive) file 2017.09.12 3123
56 주석(comments) file 2017.09.12 3114
55 아이디 체크 2019.01.09 895
54 스크립틀릿(Scriptlet), 선언(declaration), 표현식(expression) file 2017.09.12 3635
53 수정 삭제 2019.01.09 1075
52 메모 상세 & EL file 2019.01.09 824
51 로그인 & AJAX 비동기 방식으로 처리&암호화&정규표현식 2019.01.09 1247
50 각종 체크 &우편번호 2019.01.09 957
49 request, response file 2017.09.12 3220
48 Oracle Database DB연결, table 생성 file 2017.09.11 4262
47 MYSQL JSP 연동 &리스트 뽑아오기 2019.01.09 4414
46 MYSQL JSP insert 폼에서 servlet으로 값넘기기 2019.01.09 26161
Board Pagination Prev 1 2 3 4 Next
/ 4

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved