Download presentation
Presentation is loading. Please wait.
1
Html(front end) & jsp(back end)
인터넷응용프로그래밍 Html(front end) & jsp(back end)
2
웹 언어 SSS (Server Side Script) : 서버용 언어
ASP ASP.NET (C#, VBScript) PHP (Personal Home Page) JSP (JAVA Server Pages) CSS (Client Side Script) : 웹을 보여주기 위한 언어 javaScript VBScript JScript
3
서버 사이드 클라이언트-서버 구조의 서버 쪽에서 행해지는 처리 장점 단점
서버 관리자의 입장에서, 데이터 위조의 가능성을 줄일 수 있다. 서버 쪽의 데이터가 확실한 진위이며 클라이언트 쪽에서 위조해서는 안 되는 민감한 데이터의 경우 서버 사이드로 처리해야 한다. ex) 인터넷 뱅킹의 이체 관련 처리, MMORPG의 게임 아이템 클라이언트 사용자의 입장에서 클라이언트 컴퓨터의 처리 부담이 줄어든다. 단점 서버 관리자의 입장에서, 서버의 처리 부담이 커져 결과적으로 서버 비용이 늘어날 수 있다.
4
JSP(정적 페이지, 동적 페이지)
5
JSP (cont.) JSP - 장점 : HTML중심의 코드구조이므로 디자인 작업에 바로 사용 가능하다 그리고 그 일이 끝나면 바로 프로그램 로직을 고칠 수 있다. 설 치 과정이 간단하다 - 단점 : 프로그램 로직이 복잡할 경우 자바코드의 논리적 구조를 알아 보기가 힘들다. 소스코드가 공개되며, 프로그래머가 아닌 다른 사람이 소스코드를 만져서 손상시킬 위험성이 있다. 프로그램의 복잡한 로직을 구사하는 코드는 서블릿 클래스 안에 기술하고 프로그램의 결과를 보여주는 HTML중심의 코드만 JSP 페이지 안에 작성하는것이 좋다.
6
JSP의 동작 원리 클라이언트로부터 JSP 페이지의 첫 요청이 전달
변환된 자바 파일은 클래스 파일로 컴파일 된 후 생명 주기에 따라 서비스가 이루어진다.
7
JSP 기본 문법(1/2) JSP는 HTML문서 사이에 JSP문법코드가 삽입된 형태로 작성된다.
1. 선언(Declarations) - 선언은 자바 변수와 메소드를 JSP 페이지 내에서 선언하기 위해 사용 된다. - 변수 선언 예 : <%! String name=new String("BOB"); %> - 메소드 선언 예 : <%! public String getName() { return name; } %> 2. 표현식(Expressions) 표현식은 컨테이너에 의해 결과값(문자열)으로 바뀌는 JSP 요소 예 : Hello <%=getName()%> 3. 스크립트렛(Scriptlets) - 스크립트렛에서는 자바 문장을 자유롭게 기술할 수 있다. - 용법 : <% scriptlets source %>
8
JSP 기본 문법(2/2) (cont.) page 지시자 - jsp 전체에 적용되는 정보를 기술한다.
page contentType = "text/html; charset = euc-kr" %> page import = "java.util.*" %> include 지시자 - 다른 페이지를 불러다 현재 jsp페이지의 일부로 만들기 위해 사용 include file = "Today.jsp" %> html 주석 <!-- 주석내용 --> jsp 주석 <%-- 주석내용 --%>
9
JDK 설치
10
JDK 환경 변수 JDK가 설치된 경로를 시스템 변수에 새로 만듬
11
Apache Tomcat 설치하기 Tomcat 8.0 Download
12
Apache Tomcat 설치하기
13
Apache Tomcat 설치하기
14
Apache Tomcat 설치하기 https://www.eclipse.org/downloads/
Eclipse IDE for Java EE Developers 다운로드
15
Apache Tomcat 설치하기
16
Eclipse와 Tomcat 연동하기 File → New → Other → Server → Server로 프로젝트 생성 16
17
Eclipse와 Tomcat 연동하기 Apache → Tomcat v8.0 Server 선택 17
18
Eclipse와 Tomcat 연동하기 Tomcat installation directory와 JRE설정
19
JSP 예제 New → Other → Web → Dynamic Web Project
20
JSP 예제 JSP 파일 생성
21
JSP 예제 JSP파일 작성
22
JSP 예제 Java 파일 생성
23
JSP 예제 Java파일 작성
24
Form 실행(서버로 전달) .html 작성 .jsp 작성 Get과 post를 각각 실행하여 웹 주소창 확인해보기
Html의 name 속성을 통해 전달 받음
25
CSS(Cascading Style Sheets)
인터넷응용프로그래밍 CSS(Cascading Style Sheets)
26
CSS = Design? 순수 CSS 만을 이용해서 작성 된 페이지
27
Ex1) 태그 옵션 안에서의 디자인(Inline Styles)
28
Ex2) style태그 옵션에서의 디자인(Embedded Styles)
29
Ex3-1) CSS의 기본 CSS <P>요소의 배경을 노란색으로 변경한다. 선택자(selector) 값(value)
속성(property) 전체 선택자
30
Ex3-2) CSS의 기본 id선택자 : 한 대상만을 전담해서 css컨트롤 (ex: #special { color:red; }) class선택자 : 여러 대상을 전담해서 css컨트롤 (ex: .hometown { color:red } or p.hometown { color:red })
31
Ex3-3) CSS의 기본 - 폰트(1) ① ② ③ 속성 설명 font 한 줄에서 모든 폰트 속성을 설정할 때 사용
font-family 폰트 패밀리 설정 font-size 폰트의 크기 설정 font-style 폰트 스타일 설정 font-weight 폰트의 볼드체 여부 설정 1 -> 2 -> 3 순서로 폰트를 찾는다. ① ② ③ url을 통해서 fontfamily의 폰트를 다운받아 사용 가능
32
Ex3-3) CSS의 기본 - 폰트축약(2) font-style italic font-size 30px
font-family arial, sans-serif;
33
Ex4-1) 의사 클래스의 종류 콜론(:)을 사용하여 표기 <a> 요소에 클래스 link가 선언된 것처럼 생각하고자
선택자를 만듬(아래 링크 참조) 의사 클래스 의미 :link 방문하지 않은 하이퍼링크 :visited 이미 방문한 하이퍼링크 :hover 마우스가 올려 진 상태 visited hover
34
Ex4-2) pseudo-class
35
Ex5) Tip! Cascading?? 하나의 요소에 여러 개의 CSS가 충돌할 수 있다. 이 경우에는 우선순위(가중치)
<head> 에 정의된 CSS 인라인 CSS 사용자가 제공하는 CSS
36
Ex6) 외부 CSS 사용
37
Ex7-1) Positioning Element – absolute positioning
정적 위치 설정(static) : 정상적인 흐름에 따라 배치 상대 위치 설정(relative) : 정상적인 위치가 기준점이 됨 절대 위치 설정(absolute) : 컨테이너의 원점이 기준이 됨
38
Ex7-2) Positioning Element – relative positioning
39
Ex8) Backgrounds
40
Ex9) 폰트 크기 단위
41
Ex10) Element Dimensions
42
Ex11) box model
43
Ex12) border
44
Ex13) floating elements floating?? 문서 정렬의 차례
45
Homework) calendar Todo Inline/Embedded/External CSS가 모두 사용되어야 함
하나의 셀에 두 개의 그림과 글자가 들어감 그림의 종류는 마음대로 그림은 ‘float’ property 사용 글자는 ‘relative position’ 사용 ‘Table element’ 사용 CSS를 이용하여 짝수행과 홀수행의 스타일을 다르게 적용 ‘font’는 ‘web font’와 ‘font 축약’사용 표의 크기는 ‘뷰포트＇의 크기에 따라 자동으로 바뀌어야 함 Margin과 Padding을 사용하여 레이아웃 조절 Element dimension을 사용하여 표의 크기에 따라 크기가 바뀌어야 함 Overflow를 적용하여 list의 수가 많아질 때 스크롤이 생성되어야 함 ‘UL element 사용‘ List의 개요 수준에 따라 스타일이 달라야 함 Todo 인응과제 … Inline/Embedded/External CSS가 모두 사용되어야 함 Calendar.html/Calendar.css 파일 제출
Similar presentations
