[ HTML5 ]
- 기존 html4에서는 지원하지 않는 동영상, 오디오, 지리 위치 정보 등을 지원
- 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있다.
- 운영체제에 관계없이 스마트폰, 태블릿 같은 모바일 환경에서도 기능을 구현할 수 있다.
< HTML5 기능 >
기능 |
설명 |
Web Form |
입력 형태를 보다 다양하게 제공 |
Video |
동영상 재생을 위한 API 제공 |
Audio |
음악 재생을 위한 API를 제공 |
Offline Web |
인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 API 제공 |
Web DataBase |
표준 SQL을 사용해 데이터를 저장할 수 있는 기능을 제공 |
Web Storage |
웹 애플리케이션에서 데이터를 저장할 수 있는 기능을 제공 |
Canvas |
2차원 그래픽 그리기 및 객체에 대한 각종 효과를 주는 기능을 제공 |
SVG |
XML 기반 2차원 벡터 그래픽을 표현하기 위한 SVG 언어를 지원 |
Geolocation |
디바이스의 지리적 위치 정보를 가져오는 기능 제공 |
Web Worker |
웹 애플리케이션을 위한 스레드 기능 제공 |
Web Socket |
웹 애플리케이션과 서버 간의 양방향 통신 기능을 제공 |
CSS3 |
웹 애플리케이션의 다양한 스타일 및 효과를 나타내기 위한 CSS3 제공 |
< HTML5 구조 관련 태그 >
태그 |
설명 |
<header> |
머리말을 나타내는 태그 |
<hgroup> |
제목과 부제목을 묶는 태그 |
<nav> |
메뉴 부분을 나타내는 태그 |
<section> |
제목별로 나눌 수 있는 태그 |
<article> |
개별 콘텐츠를 나타내는 태그 |
<aside> |
왼쪽 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그 |
<footer> |
하단의 정보를 표시하는 태그 |
< HTML4 화면 레이아웃 구성 -> HTML5 화면 레이아웃 구성 >
| <div class="header"> -> <header> <div class="aside"> -> <aside> <div class="section"> -> <section> <div class="article"> -> <article> <div class="footer"> -> <footer> |
|
[ 제이쿼리 ]
- 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리
- 여러 효과, 이벤트 등을 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용함
< 특징 >
- CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하기 때문에 명료하면서 읽기 쉬운 형태로 표현 가능
- 메서드 체인 방식으로 수행하기에 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하기 반복되는 것을 피할 수 있음
- 많은 플러그인을 제공하기에 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있음
- 크로스 브라우징을 제공해 브라우저 종류에 상관 없이 동일하기 기능을 수행
< 사용 방법 >
1. www.jquery.com에서 라이브러리를 다운받아 사용하는 방법
2. 네트워크로 CDN 호스트를 설정해서 사용하는 방법
* HTML, JSP에서 제이쿼리 CDN 호스트를 설정하는 방법
| <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- 지정한 버전의 제이쿼리 사용 --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- 가장 최신 버전의 제이쿼리 사용 --> |
|
< 기능 >
선택자 종류 |
선택자 표현 방법 |
설명 |
All selector |
$("*") |
모든 DOM을 선택 |
ID selector |
$("#id") |
해당되는 id를 가지는 DOM을 선택 |
Element selector |
$("elementName") |
해당되는 이름을 가지는 DOM을 선택 |
class selector |
$(".className") |
CSS 중 해당되는 클래스 이름을 가지는 DOM을 선택 |
Multiple selector |
$("selector1,selector2,selector3,......selectorN") |
해당되는 선택자를 가지는 모든 DOM을 선택 |
[ 제이쿼리 Ajax ]
:: 클라이언트 측의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax(Asynchronous Javascript + XML) 기능을 사용
:: 자바 스크립트를 사용한 비동기 통신으로 클라이언트와 서버간의 XML,JSON 데이터를 주고받는 기술
:: 페이지 이동 없이 데이터 처리가 가능
:: 서버의 처리를 기다리지 않고 비동기 요청 가능
< 사용 방법 >
- $ 기호 다음에 ajax라고 명명하고 속성에 대한 값을 설정
| <script type="text/javascript"> function fn_test(){ $.ajax({ type: "post 또는 get", async: "true 또는 false", url: "요청할 URL", data: {서버로 전송할 데이터}, dataType: "서버에서 전송받을 데이터 형식", success: { //정상 요청, 응답시 처리 }, error: function(xhr,status,error){//오류 발생 시 처리} complete: function(data,textStatux){//작업 완료 후 처리} }); </script> |
|
< 속성 >
속성 |
설명 |
type |
통신 타입을 설정( post 또는 get 방식으로 선택) |
url |
요청할 url을 설정 |
async |
비동기식으로 처리할지의 여부를 설정(false인 경우 비동기로 처리) |
data |
서버에 요청할 때 보낼 매개변수 설정 |
dataType |
응답 받을 데이터 타입을 설정(XML,TEXT,HTML,JSON 등) |
success |
요청 및 응답에 성공했을 때 처리 구문을 설정 |
error |
요청 및 응답에 실패했을 때 처리 구문 설정 |
complete |
모든 작업을 마친 후 처리 구문 설정 |
< JSON(Javascript Object Notation) 사용하기 >
- name/value 쌍으로 이루어진 데이터 객체를 전단하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식
- XML을 대체하는 데이터 전송 형식 중 하나
(Ajax는 연동할 때 XML 형식으로 데이터를 주고받는다. 하지만 내부적으로 여러 단계의 처리 과정을 거치게 되기에 자원이 열약한 환경에서는 속도
면에서 불리하기 때문에 XML형식보다 단순한 JSON형식으로 데이터를 주고 받음.)
- 자바스크립트에서 파생되어 자바스크립트 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적기에 쉽게 사용가능
- https://code.google.com/archive/p/json-simple/downloads에서 json-simple-1.1.1.jar 다운
- servlet에서 jsonObject와 jsonArray클래스를 이용하여 데이터를 저장하고 PrintWriter로 Object전달
* 자료형
자료형 |
종류 |
예 |
수(Number) |
정수 |
128, 65 ,77, -50, -194 |
|
실수(고정 소수점) |
7.12, -4.563, 98.34 |
|
실수(부동 소수점) |
2e4, 3.6e34, 5.59e-7, 6.78E-4 |
문자열 |
문자열 |
"1004" "true" "Hello" "안녕" "\"CSS"\" |
|
제어 문자 |
\b( 백스페이스 ) \f ( 폼 피드 ) \n ( 개행 ) \r ( 캐리지 반환 ) \t ( 탭 ) \" ( 따옴표 ) \/ ( 슬래시 ) \\ ( 역슬래시 ) |
배열 |
배열은 대괄호[]로 나타냄 배열의 각 요소는 기본 자료형이거나 배열, 객체 각 요소들은 콤마(,)로 구별 |
"name":["한국","김치","최고"] // 대괄호 안에 배열 요소를 콤마(,)로 구분해서 나열 |
객체 |
JSON 객체는 중괄호 {}로 둘러싸서 표현 콤마(,)를 사용해 여러 프로퍼티를 포함할 수 있음 |
{ "name":"한국", "age":2020, "weight":70 } // 중괄호 안에 name/value 쌍을 콤마(,)로 구분해서 나열 |