http://greenish.github.io/jquery-slides/#download

display : table, table-cell은 table, td태그와 같은 효과를 부여하여 table-cell내 요소의 세로 정렬을 가능하게 만들어 준다.

append : 요소내의 맨 마지막에 새로운요소를 추가

prepend : 요소내의 맨 처음에 새로운 요소를 추가

after : 요소의 뒤에 추가

before : 요소의 앞에 추가

다운로드 : http://www.garralab.com/nailthumb.php

사용법

아주 간단하게 썸네일 이미지를 모여줄 수 있다.

내가만든 java용 webSocketServer library

wakeup5_JavaWebSocketServer_v0.1.jar

1. 웹소켓 지원 브라우저 

(출처 - http://caniuse.com/#feat=websockets)

Current에 있는 것이 현재 버전이고

초록색이 지원, 분홍색이 미지원 브라우저.

(현재 대부분의 브라우저가 지원을 하는데 안드로이드는 이제야 지원하는 것 보니 왜 진즉에 안했나 싶음.. 유저에게 업데이트를 강제할 수도 없고 ㅡ.,ㅡ)

2. 웹소켓의 접속 과정

먼저 클라이언트에서 접속 요청을 보내고, 서버에서 요청을 받아 요청 정보를 핸드쉐이크 후 응답을 하면 소켓이 연결이 된다. 그 이후 소켓 통신처럼 스트림을 이용해 데이터를 주고 받을 수 있다.

2-1. 웹소켓의 접속

웹소켓의 접속은 브라우저에서 이루어지며 접속 방법은 다음과 같다.

var ws= new WebSocket('ws://localhost:8080/resources');

접속url은 ws:// 혹은 wss://(http://와 https://랑 같다), 접속할 host와 포트, /이후의 리소스로 이루어 진다.

2-2. 웹소켓 오픈 핸드쉐이크

먼저 요청을 보내고, 서버에서는 요청 헤더를 보고 적절히 응답을 보내야 한다. 이러한 과정을 핸드쉐이크라고 한다.

요청 헤더

응답 헤더

응답 헤더는  HTTP/1.1 101 Switching Protocols로 시작하며

Upgrade: websocket
Connection: Upgrade

Sec-WebSocket-Accept:

이 세개의 키값은 반드시 포함하여야 한다.

Sec-WebSocket-Accept의 값 만드는 방법

1. 요청 헤더의 Sec-WebSocket-Key 값에 미리 정의된 문자열을 ("258EAFA5-E914-47DA-95CA-C5AB0DC85B11")를 붙여 새로운 문자열을 만든 후,

2. 새로운 문자열을 SHA-1로 암호화.

3. 암호화 된 값을 다시 BASE64로 인코딩 하고 Sec-WebSocket-Accept를 키로하는 응답 헤더를 작성.

여기까지가 연결 핸드쉐이크이며 응답을 받은 클라이언트에서 Sec-WebSocket-Accept값을 비교하여 값이 일치 할 경우 소켓이 연결되며, 데이터를 주고 받을 수 있다.

2-3 웹소켓의 데이터.

0. 웹소켓 정보

웹소켓 api - http://www.w3.org/TR/2011/WD-websockets-20110419/#websocket

웹소켓 문서 - http://tools.ietf.org/html/rfc6455

 : 웹소켓 정보에 대해 아주 자세히 나와있으나 영어.. ㅠㅠ

일반적으로 잘 사용하지 않는 태그 중 LABEL 태그가 있다. 이 LABEL 태그를 잘 활용하면 라디오 버튼, 체크 박스, 입력 상자 등의 폼 컨트롤을 직접 선택하지 않고 텍스트만 눌러도 폼 요소가 선택이 되는 효과를 줄 수가 있다.

먼저 실행 결과부터 살펴 보도록 하자.

위 실행 결과에 대한 소스는 다음과 같다:

사용 방법은 간단하다. LABEL 태그의 속성으로 FOR를 사용하여 연결된 폼 컨트롤의 ID를 할당해 주면 된다.

결과물

<script type="text/javascript">
    window.onload = function(){
        document.querySelector("input[type=button]#button1")
        .addEventListener("click", function(){
            var pw = document.querySelector("input[type=password]#pw").value;
            var pw2 = document.querySelector("input[type=password]#pw2").value;
            
            console.log(pw + pw2);
              
            if(pw == pw2){
                document.form1.submit();
            }
        });
    }
</script>

<form name="form1" action="${contextPath}/member/join" method="post">
    id : <input type="text" name="id" required="required"/>
    pw : <input type="password" id="pw" name="pw" required="required"/>
    pw 확인 : <input type="password" id="pw2" required="required"/>
    <input type="button" id="submit" value="입력"/>
</form>

비밀번호 두개를 비교하여 같으면 submit하는 스크립트이다.

하지만 이 상황에서는 submit이 함수가 아니라며 submit이 되지 않는다..

그 이유는 20번 줄에 버튼의 id에 submit이라는 값을 주었기 때문... submit이라는 값을 주지 않으면 정상적으로 동작한다..