ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 테이블 활용하여 게시판 만들기, 이클립스 연결(톰캣)
    웹 Web/JSP & Servlet 2022. 1. 13. 11:07

    아주 간단한 기본 테이블

    table>tr*3

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>board</title>
    </head>
    
    <body>
        <table border = 2 cellspacing = 0>
            <tr>
                <td>과목</td>
                <td>요일</td>
                <td>시간</td>
            </tr>
            <tr>
                <td>css</td>
                <td>월</td>
                <td>9시-13시</td>
            </tr>
            <tr>
                <td>jsp</td>
                <td>금</td>
                <td>9시-11시</td>
            </tr>
        </table>
    </body>
    
    </html>

     

    약간의 디자인 넣기

    th:

    caption: table 태그 안에서 제목으로 사용되며, 가운데 정렬 

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>board</title>
        <style>
            th{
                background-color: aqua
            }
        </style>
    </head>
    
    <body>
       <h1> 게시판</h1>
        <table border = 2 cellspacing = 0>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>내용</th>
            </tr>
            <tr>
                <td>css</td>
                <td>월</td>
                <td>9시-13시</td>
            </tr>
            <tr>
                <td>jsp</td>
                <td>금</td>
                <td>9시-11시</td>
            </tr>
        </table>
        <button value = "글쓰기">글쓰기</button>
    </body>
    
    </html>

     

    위의 코드를 이클립스로 가져오기 - 톰캣 설치

     

    1. 톰캣 다운로드 및 설치

    2. 이클립스 워크스페이스 재설정 - 인코딩, 톰캣 연결

    2-1. 프로젝트 설치 - 톰캣 등록

    3. 테스트 웹페이지 작성

    4. 테스트 웹페이지 서버로 업로드

    5. 서버 실행

    6. 브라우저에서 해당 웹페이지 접근

     

     

    https://tomcat.apache.org/download-80.cgi -> tomcat9 -> 32-bit/64-bit Windows Service Installer (pgp, sha512

    이클립스 서버창에서 오른쪽 클릭 new -> server -> apache -> 톰캣 9.0버전 -> browse에서 톰캣9버전 선택 후 finish

    컴퓨터 제어판의 서비스 -> 오른쪽 마우스 클릭하여 apache 중지 -> 이클립스에서 dynamic web project 생성 -> jsp file 하나 만들어 body에 아무 문자나 입력 -> 서버창의 톰캣 스타트 -> 만약 오류가 나면 서버창의 톰캣을 더블클릭 해주고 포트번호 수정 및 publish module contexts 어쩌고에 체크 -> 다시 톰캣 실행하고 crtl+s -> jsp파일 실행 -> body에 작성한 문자가 새 페이지로 생성되면 성공

     

    window -> preference -> workspace -> text file encoding 에서 utf-8로 변경하고 -> web -> jsp files -> encoding에서 utf-8로 변경 하고 general ->web browser -> use internal web browser 선택

    <%@ page language="java" contentType="text/html; charset=EUC-KR"
        pageEncoding="EUC-KR"%> <!-- 지시자 -->
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="EUC-KR">
    <title>Insert title here</title>
    <style>
    body{background:skyblue}
    </style>
    </head>
    <body>
    asd
    </body>
    </html>

    위의 코드로 잘 실행이 되는 시험을 해보고

    <%@ page language="java" contentType="text/html; charset=EUC-KR"
        pageEncoding="EUC-KR"%> <!-- 지시자 -->
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="EUC-KR">
    <title>Insert title here</title>
    <style>
    	body{background:skyblue}
    	hr{width: 500; border: 3;}
    	div{font-size: 18px; color:blue; font-weight:900}
    </style>
    </head>
    <body>
    <div> 게시판</div> <hr>
        <table border = 2 cellspacing = 0>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>내용</th>
            </tr>
            <tr>
                <td>css</td>
                <td>월</td>
                <td>9시-13시</td>
            </tr>
            <tr>
                <td>jsp</td>
                <td>금</td>
                <td>9시-11시</td>
            </tr>
        </table>
        <button value = "글쓰기">글쓰기</button>
    </body>
    </html>

    브라캣에 작성한 body부분을 이클립스의 body에 복붙 후 일부 수정하였다

Designed by Tistory.