메뉴 건너뛰기

조회 수 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 Oracle Database DB연결, table 생성 file 2017.09.11 4262
64 JSP 동작 원리, 내부 객체 file 2017.09.12 3579
63 스크립틀릿(Scriptlet), 선언(declaration), 표현식(expression) file 2017.09.12 3636
62 지시자(Directive) file 2017.09.12 3123
61 주석(comments) file 2017.09.12 3114
60 request, response file 2017.09.12 3220
59 JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성) file 2017.09.12 4860
58 JSP 게시판 만들기 - 구현 (이클립스 웹 프로젝트 생성) file 2017.09.12 13385
57 JSP 게시판 만들기 - 개발표준, 화면설계 file 2017.09.12 6590
56 JSP 게시판 만들기 - 시스템 아키텍처 file 2017.09.12 4781
55 JSP (Java Server Page), Servlet에 대해 file 2017.09.12 6707
54 JSP 게시판 만들기 - 네이밍, 데이터베이스 설계 file 2017.09.12 4956
53 JSP 게시판 만들기 - 구현 (웹 프로젝트와 톰켓 연동, 샘플 페이지 작성) file 2017.09.12 5185
52 JSP 게시판 만들기 - 구현 (디렉토리, 파일, 테이블 생성) file 2017.09.12 7909
» JSP 게시판 만들기 - 구현 (HTML 코딩) file 2017.09.12 17064
50 JSP 게시판 만들기 - 구현 (MySQL과의 연동) file 2017.09.12 37892
49 JSP 게시판 만들기 - 구현 (Method, Query 기초) file 2017.09.12 30633
48 JSP 게시판 만들기 - 구현 (파라미터, 요청/응답) file 2017.09.12 4798
47 JSP 게시판 만들기 - 구현 (마무리, 테스트) file 2017.09.12 6579
46 JSP 게시판 만들기 - 완료 (소스파일, 의견) 2017.09.12 5501
Board Pagination Prev 1 2 3 4 Next
/ 4

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved