Chapter 4. JSP Page 구성 요소

Chapter 4. JSP Page 구성 요소

1. JSP Page Directive

 - page Directive

<%@page%>

  · JSP Page의 속성을 지정하는데 사용되는 Directive

  · Page Directive 속성

속성	기본값	설명
info		Page를 설정하는 문자열을 지정
language	“java”	JSP Page의 Script 요소에서 사용할 언어 지정
contentType	“text/html;chars et=ISO-8859-1”	JSP Page가 생성할 문서의 Type 지정
extends		자신이 상속 받을 Class를 지정
import		다른 Package에 있는 Class를 사용하고자 할 때 사용
session	“true”	HttpSession의 사용 여부를 지정
buffer	“8kb”	JSP Page의 출력 Buffer의 크기를 지정
autoFlush	“true”	출력 Buffer가 다 찰 경우에 저장되어 있는 내용의 처리를 설정
isThreadSafe	“true”	현재 Page에 Multi Thread의 허용 여부를 설정
errorPage		Error 발생 시 Error를 처리할 Page를 지정
isErrorPage	“false”	해당 Page를 Error Page로 지정
pageEncoding	“ISO-8859-1”	해당 Page의 문자 Encoding을 지정
isELIgnored	JSP Version에 따라 다름	표현 언어(EL에 대한 지원 여부를 설정

 - include Directive

<%@ include file = “포함될 File의 URL”%>

  · 여러 Page에서 공통적으로 사용되는 내용이 있을 경우 해당 내용을 별도로 File에 저장해 필요한 JSP Page 내에 삽입하는 기능

  · include Directive 처리과정

 - HTML5 기본 문법

  · HTML5 Web Page 기술 방식

<header>
      <nav></nav>
</header>
<section id=“”>
</section>
<footer>
</footer>

  ◦ HTML5

   ▹ <section></section>을 사용해 영역을 구분

   ▹ Java Script가 담당하던 처리의 일부를 HTML Tag의 속성에서 처리

   ▹ 한글 Encoding : UTF-8

  ◦ CSS

   ▹ 화면에 HTML Tage를 표현

   ▹ JavaScript가 담당하던 처리의 일부를 담당

  ◦ Javascript

   ▹ HTML5, CSS가 처리할 수 없는 기능 등을 담당

   ▹ Canvas에서 사용하면 Game도 작성 가능

  · HTML5에 추가된 Tag

  ◦ 구조적 Elements

   ▹ 구역을 나누는 Block의 요소

   ▹ HTML4의 <div></div> Tag를 대체

   ▹ 각 요소별 설명

요소	설명
header	Site의 소개나 Navigation 등을 표시
nav	Site Navigation 항목 표시(Ex. <nav><a href=“#intro”>기관소개</a></nav>)
article	독립적인 Contents를 표시
section	일반적인 문서나 Appliction 영역을 표시, Section의 제목을 나타내는<h1>~<h6>와 같이 사용
aside	본문의 내용과는 독립적인 Sidebar의 Contents를 표시
footer	Site의 제작사나 저작권의 정보 등을 주로 표시

  ◦ Multimedia Elements

   ▹ Plug-in 없이 Multimedia를 재생할 수 있게 해주는 요소

   ▹ 각 요소 별 설명

    ▸  audio

<audio controls>
      <source src = “play1.mp3” type = “audio/mpeg”/>
</audio>

     ◽  Audio File 재생

    ▸  video

<video width=“320” height=“240” controls>
      <source src=“movie1.mp4 type=”video/mp4“>
</video>

     ◽  Video File 재생

  ◦ Other Elements

   ▹ canvas

<canvas id=“canvas1” width=“320” height=“240”/>

    ▸  Web 상에게 Graphic 표시

    ▸  JavaScript 및 API와 같이 사용해서 다양한 Application을 만들 수 있다.

    ▸  Canvas의 제어는 JavaScript가 담당

   ▹ command

<command type=“command” label=“Open” onclick=“open()”>Open</command>

    ▸  사용자 실행 명령어 표시

   ▹ datalist

<datalist id=“bro”>
      <option value=“IE”>
      <option value=“Chrome”>
      <option value=“Safari”>
</datalist>

    ▸  사용자가 Text 랴딩에 입력 시 선택할 수 있는 값의 목록을 표시

   ▹ details

<details>
<summary>Copyright</summary>
<p>저작권 표시</p>
</detais>

    ▸  추가적인 정보나 사용자가 요청하는 정보를 표시

   ▹ embed

<embed src=“a.swf”>

    ▸  Plug-in Contents 표시

   ▹ figure

    ▸  설명 글을 붙일 대상을 정의

   ▹ figcaption

<figure>
      <img src=“imges/a.jpg” alt=Logo>
      <figcation>Team Logo</caption>
</figure>

    ▸  <figure>로 정의한 대상에 설명글을 붙임

   ▹ keygen

<keygen name=“security”>

    ▸  Server로 양식 전송 시 한 쌍의 Key를 생성해 private key는 Local에, public key는 Server에 저장 

   ▹ mark

<p>본 Web Site의 <mark>문의</mark></p>

    ▸  Text에 형광펜을 칠한 것과 같은 강조 효과

   ▹ meter

<meter value=“2” min=“1” max=“10”>10점 만점 중 2점</meter>

    ▸  측정값을 표시

   ▹ output

<form oninput=“x.value=paraseInt(a.value)+parseInt(b.value)”>
<input type=“number” id=“a” value=“5”>
+<input type=“number” id=“b” value=“10”>
=<output name=“x” for=“a b”></output>
</form>

    ▸  수학적 계산의 결과 값을 표시

   ▹ progress

<progress value=“30” max=“100”></progress>

    ▸  시간이 걸리는 작업을 막대로 표시

   ▹ time

<p>날짜 : <time datetime=“2015-09-07”></time></p>

    ▸  날짜나 시간을 표시

  · HTML5에서 변경된 Tag

요소	설명
a	href 속성 없이 사용하면 null Link로 사용
address	실제의 주소 표시
b	중요하지는 않지만 Text를 진하게 표시할 때 사용
hr	단락의 주제를 바꿀 때 사용
I	주요한 정보를 기울임꼴로 표시
menu	실제 문서 Menu 정보를 제공하는데 사용
small	세부 주석이나 법적 인쇄 문서에서 작은 글자 정보 표시
strong	중요한 정보를 진하게 표시

  · HTML5에서 제거된 Tag

  ◦ CSS에서 대체할 수 있어 사용하지 않는 Tag

   ▹ basefont, big, center, frame, frameset, frameset, noframes, s, strike, tt, u

  ◦ 다른 Tag와 사용법에서 혼란을 주어 더 이상 사용되지 않는 Tag

   ▹ acronym, applet, isindex, dir, noscript

  · 새로 추가된 속성

  ◦ autocomplete

<input type“text” id=“name” name=“name” autocomplete/>

   ▹ 자동 완성 기능을 켜거나 끔

   ▹ <input> Tag에서 사용

  ◦ autofocus

<input type“text” id=“name” name=“name” autofocus>

   ▹ 입력 Field에 Focus를 넘김

   ▹ <input>, <select>, <textarea>, <button> Tag에서 사용

  ◦ async

<script src=“demo_async.js” async></script>

   ▹ Script를 실행할 수 있게 되면 비동기적으로 실행

   ▹ <script> Tag에서 사용

  ◦ label

<menu label=“파일”>
      <button type=“button” onclick=“fileNew()”>새파일</button>
      <button type=“button” onclick=“fileOpen()”>열기</button>
      <button type=“button” onclick=“fileSave()”>저장</button>
</menu>

   ▹ Menu 명을 지정

   ▹ <menu> Tag에서 사용

  ◦ manifest

<html manifest=“test.appache”>
<head>
<title>test</title>
</head>
......
</html>

   ▹ Off-Line Web Cache를 사용 시 manifest Filedml 경로 지정

   ▹ <html> Tag에서 사용

  ◦ min, max

<input type=“number” id=“age” name=“age” value=“20” min=“20” max=“99”/>

   ▹ 숫자 범위를 지정 시 최소, 최대값 지정

   ▹ <input> Tag에서 사용

  ◦ multiple

<form action=“process.jsp”>
      Upload할 File 선택 : <input type=“file” name=“files” multiple>
      <input type=“submit”>
</form>

   ▹ 여러 개의 값을 허용

   ▹ <input> Tag에서 사용

  ◦ novalidate

<form adction=“process.jsp” novalidate>

   ▹ Server로 양식을 전송 시 유효했는지 보증할 수 없음

   ▹ <form> Tag에서 사용

  ◦ pattern

<input type=“text” name=“areaCode” pattern=“[A-Za-z]{3}” title=“Area Code(3)”>

   ▹ 조건을 사용한 일반식을 표시

   ▹ <input> Tag에서 사용

  ◦ placeholder

<input id=“name” name=“name” type=“text” placeholder=“홍길동” autofocus>

   ▹ 입력 Field에 입력 Hint 표시

   ▹ 입력하기 위해 Field를 Click하면 Hint 내용은 사라짐

   ▹ <input>, <textarea> Tag에서 사용

  ◦ required

<input id=“name” name=“name” type=“text” placeholder=“홍길동” autofocus required>

   ▹ 필수 입력 Field를 설정

   ▹ <input>, <textarea> Tag에서 사용

  ◦ reversed

<ol reversed>
      <li>JAVA</li>
      <li>JSP</li>
      <li>HTML5</li>
</ol>

   ▹ 목록의 번호가 역순으로 표시

   ▹ <ol> Tag에서 사용

  ◦ scoped

<style scoped>
      p {color : black;}
</style>

   ▹ 해당 Element의 부모와 자식 Element가 Style의 적용 대상

   ▹ 지정하지 않으면 문서 전체

   ▹ <style> Tag에서 사용 

  ◦ start

   ▹ ordered list의 시작값을 지정

   ▹ <ol> Tag에서 사용

  ◦ step

   ▹ 숫자나 범위를 지정할 때 값의 단계값을 지정

   ▹ <input> Tag에서 사용

  ◦ type

<menu type=“toolbar>
<li>
<menu label=“파일”>
      <button type=“button” onclick=“fileNew()”>새파일</button>
      <button type=“button” onclick=“fileOpen()”>열기</button>
      <button type=“button” onclick=“fileSave()”>저장</button>
</menu>
</li>
</menu>

   ▹ Menu의 종류 선택

   ▹ 선택할 수 있는 값은 toolbar, context, list가 있음

   ▹ <menu> Tag에서 사용

  ◦ value

   ▹ Item의 값을 지정

   ▹ <li> Tag에서 사용

  · 제거된 속성

  ◦ CSS로 대체 가능하기 때문에 더 이상 사용하지 않는 속성

   ▹ align, background, border, cellpadding, cellspacing, frame, height, width, size, type, valign etc.

2. JSP Page의 Script Elements

 - 선언문(Declaration)

<%!%>

  · 전역 변수 선언 및 Method 선언

 - Scriptlet

<%%>

  · Programming Code 기술

 - 표현식(Expression)

<%=%>

  · 화면에 출력할 내용 기술

  · 변수 값이나 Method 반환 값 등을 출력할 때 주로 사용됨

 - 주석

<!-- -->
<%-- -->
//
/* */

  · Program의 실행에는 영향을 미치지 않지만 Program의 이해 및 Source Code의 분석에 필요한 문구 기술

5. Tomcat 환경에서 한글 처리

 - Server에서 Web Browser에 응답되는 Page의 화면 출력 시 한글 처리

<@ page contentType=“text/html;charset=utf-8”%>

 - Web Browser에서 Server로 넘어오는 Parameter 값에 한글이 있는 경우 한글 처리

<% request.setCharacterEncoding(“utf-8”);%>