반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

WEB_APP/HTML5

HTML5 Storage 1 - Web Storage -

2012. 1. 10. 02:10 | Posted by 솔웅


반응형
Hey guys this is Dougy and welcome to my HTML5 tutorial blog.
What I am going to do is that I'm going to introduce HTML5 to you with Google HTML5 presentation that was created by Marcin Wichary and modified by many people in the Google Chrome team. (http://slides.html5rocks.com/disclaimer.html)
I modified it a little bit to write on this blog.

Ya...You can get original presentation from  http://slides.html5rocks.com.
As I said that just I did small modification the presentation file to write on this blog and to learn HTML5.
I will add my experience during study the presentation.
I hope that you get a lot of things about HTML5 from my blog

갑자기 영어가 나왔죠?
HTML5를 공부하면서 한국 뿐만 아니라 외국인들도 제 블로그에 와서 새로운 것들을 얻어가서 도움이 됐으면 하는 마음에 이제부터 영어로도 설명을 좀 올리려고 합니다.
지금 올리는 소스는 Google 에서 만든 HTML5 프리젠테이션을 이 블로그에 올리려고 약간 수정한 겁니니다.
http://slides.html5rocks.com 에 가시면 원본을 보실 수 있습니다.
이 내용을 정리하면 HTML5에 어떤 기능들이 있는지 알기 쉽게 그리고 직접 눈으로 확인하면서 공부할 수 있을 것 같아서 제 블로그에 정리해 두려고 합니다.
HTML5 Presentation

JS

Web Storage

Save text value on the client side (crash-safe)



DownLoad below file to test it.

오늘 공부할 내용은 Web Storage 입니다.
위 text area 에 글자를 쓰고 save 버튼을 누른 후 다른 웹싸이트에 갔다가 다시 돌아와도 그 텍스트가 그대로 남아 있습니다.

You can download the file what I modified the Web Storage source code of the presentation.
아래 제가 위에 보이는 페이지만 따로 수정한 파일 입니다.
다운 받으셔서 브라우저에서 실행하시면 위 화면을 보실 수 있습니다.

HTML5LocalSessionStorage.html


P.S.
Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            - Working Well (O)
Safari 5.1.2                             - Working Well (O)
FireFox 9.0.1                          - Working Well (O)

Hey guys please let us know that this is working on your browser or not.
We need your name of the Browser and version also.
It will be very helpful for us if you share the information whether this is working on your mobile browser or not. If you can test it on your mobile browser.

Thanks.

제가 가지고 있는 웹 브라우저에서 테스트 한 결과 입니다.
IE 9.0 에서는 이 기능이 동작하지 않습니다.
그러니 이 기능을 테스트 하시려면 지원되는 브라우저를 다운 받아서 테스트 하셔야 합니다.

이 글은 보다 많은 분들과 정보를 공유하고 서로 도와가면서 기술을 익히려고 만들었습니다.

여러분들이 사용하시는 브라우저와 버전에서 동작이 잘 되는지 댓글에 남겨 주시면 저도 많은 공부가 될 것 같습니다.
그리고 여러분들이 사용하시는 모바일 브라우저에서 동작이 잘 되는지도 같이 공유해 주세요.

PC는 위에서처럼 브라우저와 버전 정보하고 작동 여부를 알려주시면 되고 모바일은 어떻게 해야할까요? 아이폰,안드로이드폰 여부하고 폰 모델명과 안드로이드 버전 정보도 있으면 좋겠고.. 브라우저 종류와 버전 정보도 있으면 좋겠네요.

앞으로 하나하나 기능별로 정리해서 글을 올릴건데요. 계속 정리해 나가면 구글에서 만든 튜토리얼에서 좀 더 발전된 튜토리얼이 만들어 질 수 있을거예요.

이게 소스 공유의 정신이라고 생각합니다.

그럼 많은 협조 부탁드립니다.


반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Better semantic tags  (0) 2012.01.18
HTML5 Speech Input (음성인식) API  (0) 2012.01.16
HTML5 Storage 4 - Application Cache -  (0) 2012.01.11
HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
WEB_APP/HTML5

HTML5로 게임 만들기 워밍업

2012. 1. 8. 02:59 | Posted by 솔웅


반응형
이제 HTML5 기본 개념과 여러 테크닉들에 대해서 어느 정도 살펴 본 것 같습니다.
자바스크립트, CSS 도 능숙하지는 않지만 오랫동안 써 왔기 때문에 친숙하구요.
본격적으로 HTML5로 게임만들기 공부에 들어가려고 하는데요.

그러기 전에 워밍업 부터 하고 들어가려구요.
유튜브나 블로그들을 찾아 다녔는데 아주 맘에 드는 강좌는 찾비 못했습니다.
그래서 Learning HTML5 Game Programming 이라는 책을 기본으로 공부 하려구요.

본격적인 공부 들어가기 전에 잊어버릴까봐 전에 살펴봤던 HTML5와 Canvas 사용법 간단히 살펴 보고 넘어가겠습니다.

HTML 파일은 아래와 같이 하세요.
 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Youtube HTML5 Game Dev Tutorial</title>
</head>
<body style="background:#303030;">
   
    <button id="drawSquareBtn" type="button" > Draw Square </button>
    <button id="clearCanvasBtn" type="button" > Clear Canvas </button>
    <canvas id="canvasBg" width="800px" height="500jpx" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>
    <script src="game.js"> </script>

</body>
</html>

첫줄은 HTML5를 사용하기 위한 doctype 입니다. 그냥 무조건 쓰시면 됩니다.
body 안에는 2개의 버튼이 있고 1개의 Canvas가 있습니다.


아직까지는 저 위의 버튼을 눌러도 아무런 동작이 일어나지 않습니다.

그 동작이 일어나게 하기 위해 아래와 같이 자바스크립트를 작성합니다.
(game.js 라는 파일이 되겠죠? html 내에서 그걸 참조하고 있으니까 거기에 작성 해야 합니다.)

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var clearCanvasBtn = document.getElementById('clearCanvasBtn');
clearCanvasBtn.addEventListener('click',clearCanvas,false);

var drawSquareBtn = document.getElementById('drawSquareBtn');
drawSquareBtn.addEventListener('click',drawSquare,false);

function drawSquare() {
    ctxBg.fillStyle = '#505050';
    ctxBg.fillRect(20,100,200,60);
}

function clearCanvas(){
    ctxBg.clearRect(20,100,800,500);
}

html의 canvas 태그에 있는 아이디를 불러와서 canvasBg라는 변수에 담습니다.
이 이름은 개발자 마음대로 할 수 있습니다. 다만 알아보기 쉽게 하기 위해서 html 내의 id 이름이랑 같이 했습니다.
그리고 canvas를 이용할 때 항상 사용하는 getContext 를 사용했습니다.
그리고 html의  clearCanvasBtn 을 같은 이름의 변수에 담았구요.
drawSquareBtn 도 같은 이름의 변수에 담았습니다.
두개 다 버튼인데요.
각 버튼마다 리스너를 달았습니다.
그래서 clearCanvasBtn 을 click 하면 clearCanvas() 라는 함수가 실행되고 drawSquareBtn을 click 하면 drawSquare() 함수가 실행 됩니다.

drawSquare() 함수를 살펴볼까요?
일단 canvas 의 context에 505050 이라는 색을 지정했습니다.
그리고 이 context (ctxBg) 에 fillRect 로 사각형을 그려넣습니다.

그리고 clearCanvas() 함수는 canvas 크기만큼 clearRect를 합니다.
그러니까 캔버스위에 어떤 것이 그려지든 다 지우는 겁니다.


Draw Square 를 누르면 위와 같이 사각형이 그려지고 Clear Canvas 버튼을 누르면 저 위 화면 처럼 캔버스가 깨끗해 집니다.

여기서 팁으로 구글 크롬 브라우저를 사용하면 아래와 같은 화면도 볼 수 있습니다.


브라우저에서 오른쪽 마우스를 누르고 맨 아래에 있는 inspect elements 라는 메뉴를 누르면 나타납니다.
해당 페이지의 html 파일과 자바스크립트, css 파일 소스를 볼수 있고 만약에 스크립트에 에러가 있으면 그 에러 사항도 표시해 줍니다.

간단히 HTML5로 게임 만들기 위한 워밍업으로 HTML5 canvas 이용방법을 다시 한번 살펴 보았습니다.

앞으로 HTML5로 게임을 만들 수 있는 여러 방법과 모바일 게임을 만드는 방법에 대해 공부해 나가겠습니다.


반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Speech Input (음성인식) API  (0) 2012.01.16
HTML5 Storage 4 - Application Cache -  (0) 2012.01.11
HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
WEB_APP/HTML5

HTML5 Form 공부하기 -2-

2012. 1. 2. 08:24 | Posted by 솔웅


반응형
이전 글에 이어서 계속 HTML5 의 Form 에 대해 알아보겠습니다.

*** type="color"
이 기능도 아주 매력적인 기능입니다.
색을 유저가 고를 수 있게 도와주는 기능인데요. 단지 HTML의 Input 태그에서 type만 color로 해주면 됩니다. 너무 간단한데 아직까지는 Opera에서만 지원이 되나봐요.
어제 코드에 아래 코드를 추가해 주세요.
            <label for="background-color">Choose a calor for background(Opera 11 only) :</label>
            <input id="background-color" type="color" /> <br/>


이렇게 유저가 색을 고를 수 있구요. Other를 누르면 좀 더 다양한 색을 고를 수 있습니다.

*** type="range"
이 기능은 한정된 숫자 범위 중에 유저가 입력 없이 Drag나 Touch 로 숫자를 선택할 수 있는 기능입니다.
일반 웹페이지에서도 사용할 수 있겠지만 모바일에서 훨씬 유용하게 사용될 수 있을 것 같네요.
<label >Forget about writing, just slide.</label>
 <input type="range" min="1" max="10" step="1" value="1"/><br/>


number type 과 같이 미니멈,맥스멈, step을 설정할 수 있습니다. 물론 대부분의 input 에서 지원되는 value 도 지정할 수 있구요.
위 화면은 오페라 브라우저 입니다. 다른 브라우저들에서는 다르게 나올 수 있습니다. HTML5가 지원이 안 되는 브라우저에서는 안 나올 수도 있구요.
모바일에서는 안드로이드, 아이폰 모두 HTML5 를 지원하니까 다 제대로 나올 겁니다.

*** type="file"
파일 업로드 할 때 사용할 수 있습니다.
여러 파일을 한꺼번에 업로드 하는 것 을 지원 하려면 multiple을 사용하시면 됩니다.
실제로 업로드(서버로)를 하려면 Server side script 언어인 PHP,JSP,ASP 등을 사용해야 합니다.
<input type="file" name="multiplefieldupload" multiple /><br/>


*** datalist
사용자에게 여러 리스트 중에서 하나를 선택하도록 할 때 datalist 를 이용합니다.
이 경우 <input > 태그의 type은 text 이지만 이외에 list="aaa" 라고 따로 리스트를 지정해 줍니다.
그리고 <datalist id="aaa">로 datalist 태그를 만들고 그 안에 원하는 리스트를 넣으면 됩니다.
그리고 유저가 리스트 중 하나를 선택하면 이 값을 받아서 display 할 수도 있습니다.
예전에는 모두 javascript로 작성했는데 HTML내에서 아주 간단하게 처리할 수 있네요.
아래 코드를 넣어 보세요.
<label> <h6>요즘 인터넷에 떠도는 이명박 대통령이나 친인척 관련 비리 루머들이 있습니다. <br/>
                여러분은 이중 어느것이 진실이고 실제로 어느것이 이명박 대통령과 관계가 있다고 생각하시나요? :

</h6>
            <input type="text" name="mbbiri" list="mbbiri"/>
                <datalist id="mbbiri">
                    <option value="주가조작BBK실소유주">
                    <option value="내곡동사저비리">
                    <option value="부산저축은행비리">
                    <option value="4대강 비리">
                    <option value="인천공항매각비리">
                    <option value="삼화저축은행비리">
                    <option value="모두다 관련이 있다">
                    <option value="아무것도 관련이 없다">
                </datalist>
            </label> <br>
            <label> You have entered:
                <output onforminput="this.value=mbbiri.value" />
            </label><p>


브라우저에서 실행합니다.

유저가 textbox를 선택하면 프로그램적으로 얘기하면 이 textbox가 활성화 되면 이렇게 리스트가 출력 됩니다.




그리고 유저가 이 리스트 중 아무거나 선택을 하면 그 선택한 값을 이렇게 출력 할 수도 있습니다.

조금 정치적인 예문이었죠?

인터넷 뉴스 보면 나오니까... 들은 얘기들인데... 내 생각은 말 못하겠어요... ^^

그래서 급하게 '아무 말 못하겠다'를 하나 더 만들어서 그걸 선택해 버렸네요.

쫄지 말아야 되는데... :)

아 그리고 론스타 비리, 디도스 부정선거 비리도 있는데 깜빡했다.. 아쉽네...

지난번에도 썼었는데..

학생은 하라는 공부하고 직장인들은 경제를 위해서 열심히 일해야 합니다.

그리고 국민들은 열심히 정치에 참여해야 합니다.   ^^


이 기능도 오페라 브라우저에서는 잘 됩니다. 그런데 다른 브라우저에서는 잘 되는지 모르겠네요. 제가 테스트하던 크롬에서는 안되네요.


***  placeholder

input box를 보면 미리 연한 글씨로 글자가 쓰여져 있는 경우가 있습니다. 유저가 그 textbox를 클릭하면 이 연한 글자는 지워지고 유저가 원하는 글자를 입력할 수 있게 되는데요. 이 연한 글자(guide)가 나오도록 하는 것이 placeholder 입니다.

<input type="text" placeholder="Type Anything"> <p>

보시면 맨 아래 input box에 Type Anything이라는 글자가 미리 나와 있죠?


*** Required

회원가입을 하다보면 id, password 같은 것들은 필수 입력 항목입니다.

이 필수 입력항목을 넣지 않고 버튼을 누르면 이 입력 항목을 넣으라는 메세지가 나오죠?

예전에는 이것을 모두 JavaScript로 했는데 HTML5에서는 자체적으로 이 기능을 제공하고 있습니다.


방금 전 placeholder 했던 tag에 required 를 넣어 보세요.

<input type="text" placeholder="Type Anything" required> <p>


이렇게 Required 를 한 input box에 아무것도 안 넣고 버튼을 누르면 값을 넣으라고 메세지가 나옵니다.


브라우저 마다 똑 같이 나오는 것은 아닙니다. 처음 것은 Opera 이고 두번째 것은 Chrome 입니다. 기능은 제공하지만 모양이나 문구는 다르게 나옵니다.


*** date,time,month,week

유저에게 날짜등을 입력받을 때 달력이 뜨게 하는 기능이 있습니다.

아직까지는 이 기능 구현할 때 아주 복잡한 자바스크립트를 사용합니다.

하지만 HTML5에서는 아주 간단하게 이런 기능을 구현할 수 있습니다.

다만 이것도 오페라 브라우저에서만 지원이 되는 것 같습니다.

<label> Choose a date :
            <input type="date"/>
            </label><br/>
            <label> Choose a time :
            <input type="time"/>
            </label><br/>
            <label> Choose a month :
            <input type="month"/>
            </label><br/>
            <label> Choose a week :
            <input type="week"/>
            </label><br/>


이렇게 해당 칸을 클릭하면 달력이 뜹니다. 그냥 단지 type="date" 했을 뿐인데 아주 근사한 달력이 제공 되네요. (오페라에서만.. 아직 까지는...)


보시다 시피 date 타입은 연월일, month 타입은 연월 그리고 week 타입은 선택한 주가 1년중 몇번째 주인지가 나옵니다.

time은 1~24시간이 표시됩니다. 분단위로 위아래로 움직일 수 있고 직접 type 도 가능합니다.


여기까지 HTML5이 Form 에 대해서 알아 봤습니다.


그럼.. 새해 복 많이 받으세요....

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 4 - Application Cache -  (0) 2012.01.11
HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
WEB_APP/HTML5

HTML5 Form 공부하기 -1-

2012. 1. 2. 06:01 | Posted by 솔웅


반응형
HTML 5 의 Semantic 관련 태그 공부에 이어서 Form 관련 Tag에 대해 공부하겠습니다.
Form 은 웹페이지에서 아이디 비밀번호를 넣고 버튼을 누르면 로그인이 되는 부분.
그리고 회원가입할 때 이름,주소, 전화번호 뭐 이런거 넣을 때 버튼 누르면 회원가입이 되는 부분.
뭐 이렇게 유저가 데이터를 Type하고 그 데이터를 서버에 보내서 어떤 일을 처리할 수 있도록 하는 부분의 처음에 HTML 웹페이지의 Form에서 이뤄집니다.

일단 이것을 사용하려면 HTML의 <body> </body> 태그 사이에 <form> </form> Tag를 사용해서 구현합니다.

서버로 보내려면 <form > 태그 안에 정보 보낼 목적지가 들어가야 되고 그 목적지에서 PHP나 ASP 같은 Server side script 언어로 서버에 데이터를 보내는 등의 작업이 이뤄져야 하는데요.

이 부분은 여기서 공부하는 HTML5와는 다른 부분이라서 이 글에서는 HTML5 내의 <input> 태그의 종류(Type)에 대해서만 다루겠습니다.
이전 HTML보다 훨씬 진보된 여러 기능이 HTML5에서 지원 됩니다.
우선 아래와 같이 html을 작성 하세요.
<!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Form</title>
    <meta charset="utf-8"/>
</head>
<body>
    <form>
        <fieldset>
            <legend> This is the Web Form of HTML5. </legend>
          
        </fieldset>
    </form>
</body>
</html>


우선 <form></form>태그로 감싸고 그 사이에 <fieldset>과<legend> 로 내용이 들어갈 테두리와 그 제목을 넣습니다.

이제부터 이 <legend></legend> 밑에 코드들을 넣어 가면서 공부하겠습니다.
우선 아주 기본적인 요소인 <label> 태그와 <input> 태그 중에서 type이 text 인 것 과 email 인 것을 넣어 보겠습니다.

그리고 </fieldset> 바로 위에는 버튼을 넣겠습니다.

            <label name="name"> Name</label>
            <input name="name" type="text" /> <br/>
            <label name="email"> Email </label>
            <input name="email" type="email" /> <br/>


<input type="submit" value="Enter" />

이 코드를 넣으면 아래와 같이 됩니다.


위에는 Opera 브라우저에서 본 화면이고 아래는 Chrome 브라우저에서 본 겁니다.
나중에 배울 date와 color type 등은 아직까지 Opera에서만 지원이 되는 것 같더라구요.
그래서 아마 Opera 브라우저 화면으로 테스트를 진행하시면 좋을 겁니다.

여기서 label은 그냥 글자 써 넣을 때 사용하는 것이고 input 태그의 type 이 text 인 것은 user로부터 입력을 받기 위한 것입니다. text type 은 user 가 아무것이나 입력할 수 있도록 허용합니다.
반면에 type 이  email 인 경우에는 email 형식이 아닐 경우 즉 중간에 @이 들어가야 되고 그 이후는 도메인 주소가 되야되고 하는 그런 형식에 위배되면 메세지를 띄웁니다.


예전에는 이런것들을 모두 JavaScript에서 했는데 이제는 그냥 HTML5에서 다 처리해 줍니다.

마찬가지로 blog,숫자,전화번호에 대한 type 들도 따로 있습니다.

            <label name="blog"> Blog </label>
            <input name="blog" type="url" /> <br/>
            <label name="number"> Number </label>
            <input type="number" value="1900" min="1900" max = "2200"/><br/>
            <label name="phone"> Phone </label>
            <input id="phone" type="tel" /><br/>

blog는 인터넷 주소 규칙에 맞게 써야 합니다. 그렇지 않으면 위 화면 같이 메세지가 뜹니다. (http://coronasdk.tistory.com 이렇게 완벽하게 쳐 넣어야 합니다.)
그런데 오페라에서는 앞에 http://가 없으면 자동으로 넣어 주기도 하더라구요.
HTML5가 모든 브라우저에서 동일하게 적용되지 않기 때문에 이런 부분은 주의를 하셔야 합니다.
Mobile에서는 거의 모든 브라우저가 HTML5를 지원하기 때문에 제약이 덜 하겠지만요....
일단 type 이 blog 인 것은 웹 주소 형식을 체크해 주도록 되 있구요.
다음 number와 tel 은 모바일 웹을 개발 할 때 유용할 겁니다.
이곳 input box를 유저가 선택하면 모바일에서는 숫자 입력키보드나 전화번호 입력 키보드가 뜨게 될 테니까요.
number 는minimum 값과 maximum 값을 지정할 수도 있구요. 1단위로 넘어갈지 2단위로 넘어갈지 아니면 10씩 넘어갈지 정하는 step 이라는 인수도 있습니다.
type이 tel 이면 설명 드렸듯이 전화번호를 입력할 거라는 의미인데 모바일 폰에서 유용하게 사용 될 수 있습니다.

오늘은 여기까지 하구요.
다음 시간에는 Opera 브라우저에서 잘 지원되고 있는 date, color type을 비롯해서 range, file 업로드 그리고 datalist 기능 등에 대해 공부 해 보겠습니다.

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
WEB_APP/HTML5

HTML5 기본 Semantic Tag 들 알아보기 -3-

2012. 1. 1. 04:18 | Posted by 솔웅


반응형
오늘 HTML5 기본 Semantic Tag 알아보기 마지막 시간입니다.
나중에 또 좋은 정보를 얻으면 공부하고 여기 정리해 놓겠지만 wiredwiki의 강좌에서는 마지막 입니다.

오늘 다룰 Tag들은 <mark><progress> 입니다.
<mark> 는 의미적인 의미에서 강조를 주는 태그 입니다. 예전에 <strong>은 시각적인 의미에서 강조를 주었거든요.
<mark>를 이용한다고 더 글자가 진해지거나 하지는 않습니다. CSS를 이용해서 처리해야합니다.
그리고 <progress> 태그는 진행바입니다. 다운로드 같은거 받을 때 얼마나 진행됐는지 보여주는 겁니다.

그리고 HTML5에서 새로워진 것 중 하나가 CSS 사용법인데요.
예전엔 CSS를 사용하려면 <head> 안에 넣거나 외부파일로 만든 다음 <head> 안에서 link를 걸어야 됐습니다.
아니면 <body> 내에 있는 다른 Tag 안에서 달아주던가 했는데요.
HTML5에서는 하나의 방법이 더 생겼습니다.
<style scoped> </style> 안에 넣으면 됩니다.

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <p> Welcome to <mark> HTML5 </mark> </p>
    <p> Status: <progress min="0" max="100" value="38"></progress></p>
    <style scoped>
        h1 {color:red;
            font-family:verdana;
            font-size:normal;}
    </style>
    <p>
    <h1> Page Title</h1>
    <p>
    <a href="http://html5.validator.nu/"> http://html5.validator.nu/ </a>
    <p>   
</body>
</html>

실제로 이 3개 태그를 사용한 코드입니다.
화면을 볼까요?

처음에 <mark> 처리 한 것은 배경색이 노란색으로 됐네요. 배울 때는 아무런 변화가 없다고 배웠는데... 제가 테스트하는 브라우저(크롬)에서는 <mark> 를 이용하면 이렇게 노란 배경색이 깔리나 봅니다.

그 다음의 <progress>를 이용한 거구요. 이걸 다이나믹하게 이용하려면 자바 스크립트를 사용해야 되겠죠?

그 다음에 <body> 내에서 CSS 를 적용한 겁니다.

밑에 링크는 html5가 문법적으로 잘 작성됐는지 안 됐는지 알아 볼 수 있는 싸이트 입니다.

참고하세요.

HTML,CSS,JavaScript 로 프로그래밍 할 때 제일 문제가 디버깅,테스트 인데..
지난번에 Sencha Touch 세미나 다녀와서 올린 글에 JavaScript 문법 체크해 주는 싸이트 올렸었던거 같은데요. 여긴 HTML5 입니다.

잘 되는지 한번 저도 사용해 봐야겠습니다.

이런 싸이트가 있다면 디버깅 편하게 할 수 있도록 하는 tool도 있을 것 같은데..
혹시 아시는 분 계시면.. 알려 주세요...

그럼...
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10
HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
WEB_APP/HTML5

HTML5 기본 Semantic Tag 들 알아보기 -2-

2012. 1. 1. 02:45 | Posted by 솔웅


반응형
오늘도 어제에 이어서 wiredwiki의 youtube 강좌를 기반으로 공부하고 정리해 보겠습니다.

오늘은 <hgroup> 과 이미지등을 표시하는 <figure> 그리고 HTML5는 아니지만 <iframe> 에 대해서 살펴 보겠습니다.

우선 <hgroup>은 <h1>~<h6> 엘리먼트들을 그룹화 하기때문에 하나 이상의 h 엘리먼트가 있어야 합니다. 이것들은 하나의 섹션으로 그룹화 됩니다.
<figure>는 이미지 등을 표현합니다. 그리고 <iframe>은 브라우저 내에 또 다른 브라우저를 갖을 수 있도록 합니다.


그림도 들어가고 iframe도 들어가고 하니까 한 화면에 다 나오질 않네요.
우선 이 화면엔  이전 글 소스에서 <article> 태그를 모두 지워버리고 <hgroup>을 사용했습니다.
그리고 그 안에 <figure> 태그를 사용했구요.


그리고 이 화면에서는 <iframe>을 사용해서 naver와 yahoo를 불러왔습니다.

아래 코드를 보시죠.

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <header>
        <span style="color:red;font-style:italic;font-family:verdana;">
        Start HTML5 with Dougy </span>
        <hr/>
    </header>
    <aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
        Welcome to the world of HTML5 which opens you various possibilities for making
        the web more accessible and easy to use.
    </aside>
    <nav>
        <a href="html5syntax.html"> HTML5 syntax </a> |
        <a href="html5forms.html"> HTML5 Forms </a> |
        <a href="csscheats.html"> Css CheateCodes </a> |
        <a href="http://coronasdk.tistory.com"> My Blog </a>
    </nav>
    <hgroup>
        <h1> Sunrise at Sandy Hooks </h1>
        <figure>
            <img src="depart.jpg" width="200">
        </figure>
        <h2> Montauk is too far from here. </h2>
        <figure>
            <img src="drag.jpg" width="100">
        </figure>
    </hgroup>
    <p> This is the dummy website which i have created to show you guys how the new HTML5 elements works</p>
    <p> If you want to know for Corona SDK mobile application development tool
        then come to <a href="http://coronasdk.tistory.com"> My Blog. </a></p>
    <iframe src="http://www.naver.com" width="400" height="150"> </iframe><br>
    <iframe src="http://www.yahoo.com" width="400" height="150"> </iframe><br>
    <footer>
        &copy; 2011 Douglas All Right Reserved
    </footer>
</body>
<html>

대 부분 지난 글들과 같습니다.
다른 점은 지난 소스에 있던 <article> 대신 <hgroup>을 사용했는데요. 그것은 <h1>~<h6> 엘리먼트들을 그룹화하기 위해서 입니다.

이 <hgroup> 안에 <figure> 태그가 있는데요. 이것은 그 안에 이미지가 나올거라는 것을 알려 줍니다.

<footer> 바로 위에 보면 <iframe> 태그가 나오죠? 이건 전혀 새로운 건 아닙니다. 10년전에도 사용했었던 기능이니까요. 브라우저 안에 새로운 브라우저를 만들어서 그 안에 웹페이지를 표시할 수 있도록 만든겁니다.
처음것은 naver.com이 나오고 두번째 것은 yahoo.com이 나옵니다.
외부 싸이트뿐만 아니라 내부 웹페이지도 넣을 수 있습니다.

웬일인지 이 iframe은 많이 사용하지 않은 것 같네요.

다음시간에도 HTML5에 집중해서 새로운 태그들을 살펴 보겠습니다.
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 1 - Web Storage -  (2) 2012.01.10
HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
HTML5 Canvas 이용하기 - 03 -  (0) 2011.12.24
WEB_APP/HTML5

HTML5 기본 Semantic Tag 들 알아보기 -1-

2012. 1. 1. 02:26 | Posted by 솔웅


반응형
그동안 Youtube의 Bucky 강좌를 보면서 정리했는데요. Bucky가 그동안 올린 강좌를 다 정리해 버렸네요. (HTML5관련해서요.)
우리의 Bucky가 계속 올리고 있으니까 새로운거 올리면 저도 공부하고 또 여기에 정리해 넣을께요.
오늘은 Bucky가 올릴때까지 다른 Tutorial을 한번 볼려구요.
제가 찾은건 wiredwiki 가 올린 강좌입니다.

기본적인 HTML5의 Tag들을 살펴 보겠습니다.
<header><aside><nav><article><section><footer> 태그를 이용해서 화면을 구성해 봤습니다.


위 화면을 만들었습니다.
우선 Header로 맨 위 빨간 글을 표현했고 aside로 오른쪽 side에 있는 글들을 지정했습니다.
다음 nav로 메뉴들을 만들었고 article 로 두개의 section을 감싸서 큰제목 작은 제목의 글들을 넣었습니다. 그리고 footer로 저작권 표시를 했구요.

소스 코드를 볼까요?

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <header>
        <span style="color:red;font-style:italic;font-family:verdana;">
        Start HTML5 with Dougy </span>
        <hr/>
    </header>
    <aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
        Welcome to the world of HTML5 which opens you various possibilities for making
        the web more accessible and easy to use.
    </aside>
    <nav>
        <a href="html5syntax.html"> HTML5 syntax </a> |
        <a href="html5forms.html"> HTML5 Forms </a> |
        <a href="csscheats.html"> Css CheateCodes </a> |
        <a href="http://coronasdk.tistory.com"> My Blog </a>
    </nav>
    <article>
        <section>
            <h1> Sunrise at Sandy Hooks </h1>
            <p> Come to Sandy Hooks to see the first sunrize of 2012..... Wow
                Sunrize at Atlantic Ocean. cool...</p>
        </section>
        <section>
            <h2> Montauk is too far from here. </h2>
            <p> It is for 2:30 distance from my place. </p>
        </section>
    </article>
    <footer>
        &copy; 2011 Douglas All Right Reserved
    </footer>
</body>
<html>

어차피 오늘은 복습하는 과정이니까 옛날 배웠던 것을 다시 떠올리면서 분석해 보죠.
<!doctype html>은 이 문서는 HTML5를 사용하겠다는 신호입니다 대소문자 구분은 없습니다.
그 다음 <head>에 title과 메타태그를 넣었습니다.
그 아래에 있는 body 태그 사이에 있는 내용들이 브라우저에 표시될 것들입니다.
<header>를 보면 그 안에 내용을 <span>으로 감쌌죠? 이건 HTML5에서 새로 나온건 아니고 이전부터 있었던 겁니다 <div>와 함께 자주 사용되는건데요. 여기서는 <header>안의 내용에 따로 CSS를 적용하기 위해서 사용했습니다.

지금까지는 주로 외부에 css 파일이 있고 <head> 안에서 이 css파일을 <link>걸어서 사용했었는데요. 여기선 주로 html 안의 tag에 직접 걸겠습니다.
일단 css가 아니라 HTML5를 배우는 거니까 거기에 Focus를 맞추는 겁니다.
<hr/>도 HTML5는 아니고 그 이전부터 있었던 것으로 선을 긋는 겁니다.

그 다음엔 <aside> 를 썼는데요. tag 안에 CSS를 보면 float:right이 있습니다. 그래서 그 안의 내용이 브라우저에서 오른쪽에 정렬 됩니다.

다음 nav 태그에서는 각종 링크를 걸어 줬구요.

그리고 <article>에는 두개의 <section>을 넣었습니다. 이 section 안에 Main Contents들이 들어갔구요.

맨 마지막에 <footer>가 들어갔습니다.
&copy; 라는게 있는데 이건 원문자 C를 말하는 겁니다.

이렇게 다시 HTML5의 기본 Semantic Tag들인 <header><aside><nav><article><section><footer> 들을 사용해 봤습니다.

다음엔 이 외에 다른 HTML5 Tag들을 배워보겠습니다.
Bucky의 강좌는 CSS, JavaScript 와 함께 진행이 되서 Dynamic한 효과를 보는데 좋고 이 wiredwiki 의 강좌는 HTML5에 집중돼 있어서 또 좋네요.

둘 다 열심히 공부해야겠어요.

그럼.....

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 게임 만들기 워밍업  (0) 2012.01.08
HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
HTML5 Canvas 이용하기 - 03 -  (0) 2011.12.24
HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자  (0) 2011.12.22
WEB_APP/TIPs

브라우저가 캔버스 지원 유무 판단하기

2011. 12. 30. 23:38 | Posted by 솔웅


반응형
아래 스크립트를 아용하면 됩니다.

  <script>

      var draw = function () {

          var canvas = document.getElementById("canvas");

 

          //canvas의 컨텍스트가 존재하면 canvas를 지원하는 브라우저

          if (canvas.getContext) {

              //구현

          }

          else { //canvas의 컨텍스트가 존재하지 않으면 canvas를 지원하지 않는 브라우저

              alert("이 브라우저는 캔버스를 지원하지 않습니다.");

          }

      }

  </script>


HTML5를 지원하지 않는 브라우저가 아직 많이 있으니까 혹시 HTML5개발하려면 구현부분에 HTML5를 사용하고 alert부분에는 일반 HTML을 사용해야 할 것 같습니다.



반응형
저작자표시 비영리 동일조건

'WEB_APP > TIPs' 카테고리의 다른 글

JSON 파일 만드는데 도움 주는 툴  (0) 2012.08.20
iOS 웹클립에 관한 팁  (0) 2012.06.25
Data Architect와 Data Modeling Architect 에 대한 메모  (0) 2012.06.25
Responsive WEB (반응형 웹) 맛보기  (0) 2012.06.13
User Agent Switcher 소개  (0) 2012.06.12
Entity Relationship Modeling  (0) 2012.06.10
3D 관련 툴 블랜더(blender)  (0) 2012.02.01
HTML5, JavaScript 관련 툴들 소개  (0) 2012.01.31
웹앱 (WEB APP) 관련 메모 정리  (0) 2011.12.11
WEB APP 시작하기...  (0) 2011.12.05
WEB_APP/HTML5

HTML5 Web Storage -01-

2011. 12. 27. 04:44 | Posted by 솔웅


반응형
HTML5 에서 데이터를 저장했다가 사용하도록 하는 방법이 여러가지가 있습니다.
외부 서버에 접속해서 DB에 있는 데이터를 가져와서 처리하는게 아니라 그냥 Client side에서 데이터를 관리할 수 있도록 제공하는 기능을 말합니다.
이전에는 (정확히는 지금까지 지만..) 쿠키와 세션을 많이 사용했습니다.
이 방법은 client 쪽에 쿠키라는 작은 정보를 넣고 이 쿠키에 접근해서 그 정보를 사용하는 겁니다. 이 경우 쿠키에 접근할 때마다 서버와의 communication이 일어나는데요 Web Storage는 그런 서버와의 커뮤니케이션이 일어나지 않아서 서버의 부담을 줄일 수 있습니다.
Web Storage는 Key와 Value 의 구조로 돼 있습니다.
이 Web Storage는 싸이트 단위로 관리되는 Local Storage와 Browsing Context로 관리되는 Session Storage가 있습니다. 둘 다 똑 같은데요. 그냥 세션 스토리지는 기간의 제한이 있다는 것만 다릅니다.
local Storage는 한 싸이트에 대해 다른 창(탭)을 띄워도 정보가 계속 유지 되는 거구요. Session Storage는 한 창에서만 정보가 유지 되는 겁니다.

뭐 골치아픈 이론은 넘어가고 곧바로 페이지 만드는 것 부터 할께요.

오늘 만들 화면은 왼쪽에 Key 입력하는 textbox와 value 입력하는 text area 그리고 정보를 저장하기 위한 save 버튼을 만들겠습니다.
그리고 오른쪽에는 save 버튼을 누르면 key 와 value 가 표시 되도록 할 거구요.

일단 HTML 로 기본 틀을 잡아 보죠.
 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Web Storage API</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="webstoragedoug01.css">
    <script src="webstoragedoug02.js"></script>
</head>
<body>
    <section id="leftbox">
    <form>
        <p>(key) One: <input type="text" id="one"></p>
        <p>(value) Two <textarea id="two"></textarea></p>
        <p><input type="button" id="button" value="Save"</p>
    </form>   
    </section>
    <section id="rightbox">
        Nothing Yet Now!
    </section>
</body>
</html>

<input type="text"> 태그와 <textarea> 태그는 기본 html 문법입니다. 따로 설명은 안 할께요. 혹시 이거 모르시는 분은 html 공부부터 시작하시는게 좋을 겁니다.
leftbox,rightbox 라는 id를 갖는 두개의 section을 만들었습니다.
leftbox에는 input, textarea,button 태그들이 있구요. rightbox에는 그냥 글자만 있습니다.

여기까지 하면 이런 화면이 나옵니다.
이제 webstoragedoug01.css 를 작성해서 화면을 꾸며 보겠습니다.
#leftbox{
    float:left;
    padding:20px;
    border:3px solid red;
}
#rightbox{
    float:left;
    width:250px;
    margin-left:20px;
    padding:20px;
    border:3px solid blue;
}
float를 주어서 왼쪽에서 오른쪽으로 section 을 배치하도록 했습니다.

이제 왼쪽 오른쪽 box들이 제대로 표시되고 있습니다.
그럼 이제 동적인 효과를 위해서 JavaScript를 작성하겠습니다.
function doFirst(){
    var button = document.getElementById("button");
    button.addEventListener("click",saveData,false);
}
function saveData(){
    var one = document.getElementById("one").value;
    var two = document.getElementById("two").value;
    sessionStorage.setItem(one,two);
    display(one);
}
function display(one){
    var rightbox = document.getElementById("rightbox");
    var two = sessionStorage.getItem(one);
    rightbox.innerHTML = "Name : " + one + "<br/> Value : " + two;
}
window.addEventListener("load",doFirst,false);
분석해 볼까요?
1. 우선 맨 밑에 리스너부터 실행이 될 겁니다.
페이지가 load 될 때 doFirst 함수가 Call 됩니다.
2. doFirst() 함수에는 button이라는 지역변소에 html 내의 id가 button인 요소를 대입합니다.
그리고 이 버튼에 리스너를 다는데요. click 이벤트가 발생하면 saveData()함수를 실행합니다. 그러니까 화면에서 save버튼을 누르면 saveData()가 call 되서 실행 될 겁니다.
3. saveData()에는 one,two 두 지역 변수를 만들어서 각각 html 내에 id가 one,two 인 애들의 value 를 이 변수에 집어 넣습니다. 둘 다 input box와 textarea 안에 있는 글자들(values)이 대입 될 겁니다.
그 다음에 바로 오늘 배울 세션 스토리지가 나오네요.
4. sessionStorage.setItem(one,two)의 의미는 one을 key값으로 하고 two를 value 값으로 하는 세션스토리지를 만든다는 의미입니다. one이 key 값이라고 하는 것은 값이 중복되지 않는다는 말입니다. unique 한 key인거죠.
이러면 간단하게 세션스토리지에 원하는 값들을 저장하는 겁니다.
그리고 나서 display함수를 call 하는데요. parameter 로 one 즉 key 값을 던져 줍니다.
5. display() 함수에서는 one을 인자로 받아서 사용할 겁니다.
우선 rightbox라는 지역변수를 만들어서 거기에 html에서 id가 rightbox인 요소를 대입합니다.
6. 다음이 오늘 배우는 세션스토리지 관련한 내용인데요.
saveData()함수에서 set 한 세션스토리지를 불러와서 사용하는 방법입니다.
sessionStorage.getItem(one); 하면 key값이 one인 value를 불러오는 겁니다. 이 값을 two 에 대입합니다.
그리고 나서 HTML 코드를 만들어서 Name에 one을 Value에 two 를 표시하도록 합니다.


이러면 왼쪽에 글을 입력하고 save를 누르면 오른쪽에 그 내용이 표시 됩니다.
그런데 세션스토리지는 해당 정보를 브라우저에 저장해 둔다고 했습니다.
제가 animal2, Cat 치기 전에 animal1, Dog를 쳤었거든요.
근데 그 정보를 볼 수가 없네요.

이 코드는 세션스토리지를 충분히 잘 활용하기 위한 코드는 못 됩니다. 제대로 활용하기 위해서 자바스크립트를 많이 바꾸겠습니다.
function doFirst(){
    var button = document.getElementById("button");
    button.addEventListener("click",saveData,false);
    display();
}
function saveData(){
    var one = document.getElementById("one").value;
    var two = document.getElementById("two").value;
    sessionStorage.setItem(one,two);
    display();
    document.getElementById('one').value="";
    document.getElementById('two').value="";
}
function display(){
    var rightbox = document.getElementById("rightbox");
    rightbox.innerHTML = "";
    for(var x=0; x<sessionStorage.length;x++){
        var a = sessionStorage.key(x);
        var b = sessionStorage.getItem(a);
        rightbox.innerHTML += a+" - "+b+"<br/>";
    }
}
window.addEventListener("load",doFirst,false);

display()함수가 많이 바뀌었죠?
먼저 보면 일단 one이라는 인수를 받지 않습니다.
rightbox는 이전이랑 똑 같구요. 다음줄에서 rightbox를 빈 공간으로 만들어 버립니다.
그 다음에 session Storage에 저장 되 있는 내용들을 표시할 건데요.
for문을 sessionStorage에 저장돼 있는 갯수만큼 돌립니다.
sessionStorage.length가 세션스토리지에 저장된 데이터의 수 입니다.
a에 key값을 넣고 b에 이 키값에 대한 value 값을 집어 넣은 다음 HTML 코드를 넣어 표시합니다.
이러면 해당 창에서 이전에 넣었던 데이터들도 모두 표시 될 겁니다.
심지어는 Naver 나 Google로 가서 다른 싸이트 막 써핑하다가 다시 돌아와도 계속 그 값을 남아있을 겁니다.
이렇게 다른 싸이트 나갔다가 돌아오는 경우를 대비해서 doFirst()함수 마지막에 display(); 함수 Call 하는 부분을 추가합니다.
그리고 Html에서 값을 넣고 save버튼을 누르면 그 값이 오른쪽에 표시되고 input box나 Text Area는 새로운 값을 입력 받기 위해 빈칸으로 만들어 주면 좋겠죠?
그래서 saveData() 함수에 display();  하고 난 후 one,two 의 value 를 빈칸으로 합니다.


자 이제 세션 스토리지에 나와 있는 내용들이 다 나옵니다.
제가 우리나라 역대 10명의 대통령과 그 말로를 Key, Value로 짝 지었습니다.
이제 naver나 내 블로그나 다른 싸이트를 돌아 다니다가 와도 저 정보는 그대로 있을 겁니다.
하지만 다른 탭을 열거나 다른 브라우저를 띄워서 접속하면 이 정보는 남아있지 않습니다. 이게 바로 세션스토리지 입니다.
만약에 이 데이터들을 로컬 스토리지로 set 하고 사용했다면 새로운 탭으로 열어도 이 정보는 계속 남아 있을 겁니다.
세션스토리지에서 특정 데이터를 지울 수도 있습니다.
그럴 경우는 sessionStorage.removeItem("name");을 하시면 됩니다.
그리고 모든 데이터를 지우려면 sessionStorage.clear(); 하시면 되구요.

재미삼아 우리나라 역대 대통령을 가지고 예를 들었는데요.
총 10명의 역대 대통령이 있군요 우리나라에.(현 대통령까지 포함해서)
외국으로 도망간 대통령에 쿠테타로 쫒겨난 두명의 대통령, 총 맞아 죽은 대통령, 퇴임 후 대통령에서 졸지에 반란 수괴로 법원 판결을 받은 두명의 대통령, 퇴임후 살아있는 대통령, 퇴임후 노환으로 별세한 대통령, 그리고 퇴임 후 자살한 대통령까지...
내용들은 별로 재미있지 않네요. 현 대통령께선 퇴임 후 어떻게 될까요?

제가 컴퓨터 프로그래밍 일을 한지 10년이 넘었는데요. 전공이 정치학이었거든요. 좀 정치에 관심이 많아요.
프로그래머는 열심히 프로그래밍 하고, 학생은 열심히 공부하고, 근로자는 열심히 일 하고 국민은 열심히 정치해야 합니다. :)

그럼 다음 글에서 뵐께요.

P.S. 제가 역대 대통령을 1대부터 현재까지 쭉 순서대로 입력을 했는데 출력 되는건 순서가 막 뒤죽 박죽 되서 나오네요.
이게 순서대로 입력되고 순서대로 출력되지 않나봐요. 세션스토리지가요. 버그인가?
세션스토리지 정보를 좀 더 찾아봐도 정렬과 관련한 API는 없는 것 같구요.
혹시 세션스토리지 내 데이터 정렬에 대해 아시는 분 계시면 조언 부탁드립니다.
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
HTML5 Canvas 이용하기 - 03 -  (0) 2011.12.24
HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자  (0) 2011.12.22
HTML5 Canvas 이용하기 - 01 -  (0) 2011.12.21
WEB_APP/HTML5

HTML5 드래그 앤 드롭 하기 Drag and Drop

2011. 12. 26. 03:23 | Posted by 솔웅


반응형
PC에서는 화면에 폴더 두개를 띄워 놓고 파일을 옮기면 파일이 복사되거나 옮겨 집니다.
브라우저에서는 이와 비슷하게 이미지나 텍스트 같은 객체 object 들을 드래그해서 다른 지점으로 옮기도록 할 수 있습니다. HTML을 이용해서 말이죠.

오늘은 이 브라우저 상에서 객체를 드래그 앤 드롭 하는 방법에 대해 알아보겠습니다.

브라우저에 왼쪽에 드롭하라고 알려주는 박스 하나 그리고 오른쪽에는 이미지가 있는 박스 하나를 만들겠습니다.
그래서 이 이미지를 왼쪽에 드래그 앤 드롭 하면 옮겨져서 왼쪽 박스에 display 되게 만들겠습니다.

이렇게 만들기 위해서는 일단 HTML로 2개의 박스 틀을 만들고 CSS로 왼쪽 오른쪽 정렬 및 다른 꾸며주는 효과를 주어야 할 것 같네요.
그리고 Drag and Drop 효과는 자바스크립트로 주어야 합니다.

그럼 HTML부터 작성해 볼까요?

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 HTML5 Drag N Drop</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="dragdoug01.css">
    <script src="dragdoug02.js"></script>
</head>
<body>
    <section id="leftbox">
        Drag an image in me!
    </section>
    <section id="rightbox">
        <img id="deco" src="drag.jpg" width="200">
    </section>
</body>
</html>
자 이렇게 두개의 나란한 박스로 사용될 두개의 section을 만들었습니다.
이 section 들을 박스로 만들고 왼쪽 오른쪽 배치하고 색을 입히고 하는 것들은 dragdoug01.css에서 할겁니다.
일단 html만 완료된 상태로 브라우저에 출력하면 아래와 같습니다.

그림이 우아하죠? 크리스마스 이브때 맨하튼 5번가에 갔었어요. 거기에 매년 연말이 되면 가게들 window decoration이 아주 멋진데요. 이 사진은 Berg Dorf goodman store의 Decoration 입니다.

일단 HTML은 완료 됐구요. 다음 CSS를 만들겠습니다.
#leftbox{
    float:left;
    width:250px;
    height:300px;
    margin:5px;
    border:3px solid blue;
}

#rightbox{
    float:left;
    width:250px;
    height:300px;
    margin:5px;
    border:3px solid red;
}
 id가 leftbox인 section 먼저 작업하면 float:left로 했으니까 이 section 이 왼쪽에 위치하게 되고 그 다음 오는 요소는 오른쪽에 배치될 겁니다. 그리고 너비,높이, 마진, 보더 등을 정하구요. rightbox도 마찬가지로 했습니다.

자 이제 원하는 모양대로 왼쪽, 오른쪽 박스가 만들어졌고 왼쪽에는 글자가 오른쪽에는 이미지가 있습니다.
지금 오른쪽에 있는 이미지를 왼쪽으로 드래그 앤 드롭 해 보세요.
제 브라우저에서는 드래그 할 때 이미지가 따라 오지만 마우스 표시가 금지표시(Ø)처럼 나오네요. 여러분은 좀 다르게 나올 수 있습니다. 이건 브라우저에서 기본적으로 설정된 기능입니다.
이제 우리는 이 브라우저에서 기본적으로 설정된 기능을 실행하지 않고 우리가 직접 만든 기능이 실행 되도록 프로그래밍을 할 겁니다.

이제 자바스크립트 코드를 아래와 같이 만드세요.
 function doFirst(){
    mypic = document.getElementById('deco');
    mypic.addEventListener("dragstart",startDrag,false);
    leftbox = document.getElementById('leftbox');
    leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);
    leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);
    leftbox.addEventListener("drop",dropped,false);
 }
 function startDrag(e){
    var code = '<img id="deco" src="drag.jpg" width="200">';
    e.dataTransfer.setData('Text',code);
 }
 function dropped(e){
    e.preventDefault();
    leftbox.innerHTML = e.dataTransfer.getData('Text');
 }
 window.addEventListener("load",doFirst,false);
맨 마지막에 있는 이벤트리스너는 브라우저에 해당 페이지가 처음 로드될때 doFirst함수를 실행하라는 말입니다.
그럼 doFirst를 분석해 볼까요?
mypic이라는 변수에 id가 deco라는 객체를 담습니다. html 파일을 보시면 아시겠지만 이건 이미지입니다. 이 mypic에 리스너를 다는데 이벤트는 dragstart입니다.
그러니까 mypic을 드래그 시작할 때 startDrag함수를 실행하라는 겁니다.
다음 leftbox 변수에 id가 leftbox인 요소를 대입합니다.
이 leftbox에는 dragenter와 dragover 이벤트에 브라우저에서 기본적으로 제공되는 기능을 막습니다.
e.preventDefault(); 이것인데요.
이 리스너에서는 함수를 호출하는 것이므로 따로 함수로 만들어서 그 함수를 호출해도 되구요. 위에서처럼 아예 함수를 그 안에 집어 넣어도 됩니다.
다은엔 leftbox의 drop 이벤트에 dropped 함수를 호출하는 리스너를 넣습니다.

이제 이미지를 드래그 할 때 호출되는 startDrag를 볼까요?
code라는 지역변수에 html에서 만들었던 img 태그를 모두 넣습니다.
그리고 이 code Text라는 Key 값으로 setting 합니다.
 setData메소드는요.
• setData(type, data)

- key/value 쌍으로 MIME 타입과 데이터 저장(여러 세트 저장 가능)

- Draggable의 dragstart 이벤트에서 Draggable의 정보를 저장하기 위해 사용

- 브라우저의 기본 드래그 요소나 외부 애플리케이션의 드래그 요소는 자동으로 여러 세트의 MIME 타입이 지정됨

• getData(type)

- 지정한 MIME 타입의 데이터 반환

- droppable의 drop 이벤트에서 draggable의 정보를 꺼내기 위해 사용

이렇습니다.
그리고 leftbox에 이미지가 drop 됐을 때 호출 되는 dropped 함수를 보겠습니다.
브라우저에서 제공되는 drop 이벤트에 대한 기본 기능을 먼저 막았구요.
그리고 leftbox에 geData로 아까 setData로 저장했던 html 코드를 넣습니다.
그러면 leftbox에 이미지를 불러오는 html 코드가 붙여지게 됩니다.


이제 브라우저에서 User 가 이미지를 지정된 곳으로 이동 시킬 수 있게 됐습니다.

여기에 좀 더 세세하게 각 이벤트에 리스너를 달아서 여러 동작들을 주면 좀 더 세련되게 꾸밀 수 있을겁니다.
예를 들어 leftbox에 drop하면 이미지가 이동하니까 leftbox에 마우스가 들어오면 이제 drop하면 이미지가 복사될 거라는 것을 알 수 있도록 leftbox의 색을 바꾼다던지. 진짜 파일이 이동하도록 leftbox에 drop 되면 오른쪽 box의 이미지를 지워버린다든지 하는거요.
아래 예제 코드를 넣습니다.
 function doFirst(){
    mypic = document.getElementById('deco');
    mypic.addEventListener("dragstart",startDrag,false);
    mypic.addEventListener("dragend",endDrag,false);
    leftbox = document.getElementById('leftbox');
    leftbox.addEventListener("dragenter",dragenter,false);
    leftbox.addEventListener("dragleave",dragleave,false);
    leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);
    leftbox.addEventListener("drop",dropped,false);
 }
 function startDrag(e){
    var code = '<img id="deco" src="drag.jpg" width="200">';
    e.dataTransfer.setData('Text',code);
 }
 function dropped(e){
    e.preventDefault();
    leftbox.innerHTML = e.dataTransfer.getData('Text');
 }
  function endDrag(e){
    pic = e.target;
    pic.style.visibility='hidden';
 }
 function dragenter(e){
    e.preventDefault();
    leftbox.style.background="SkyBlue";
    leftbox.style.border="3px solid red";
 }
  function dragleave(e){
    e.preventDefault();
    leftbox.style.background="White";
    leftbox.style.border="3px solid blue";
 }

 window.addEventListener("load",doFirst,false);
 
자바스크립트의 여러 drag 이벤트를 사용해서 단계별로 기능들을 제공했습니다.
이벤트들은 dragstart,dragend,dragenter,dragleave,dragover,drop 등입니다.
mypic에는 dragstart 이벤트에는 html 이미지 태그를 setData로 저장을 해두고,
dragend 이벤트에서는 이미지를 안 보이도록 합니다.
그러면 이미지가 leftbox로 옮겨지만 rightbox 안의 이미지는 없어지게 됩니다.

leftbox에는 dragenter 이벤트에 배경색과 border 색을 바꾸고 dragleave 이벤트에서는 다시 배경과 border 색을 원상태대로 돌려 놓습니다.
이렇게 하면 이미지가 leftbox 안에 들어오면 복사가 가능하다는 의미로 배경색과 border 색이 변하고 drop 해서 복사가 끝나면 다시 원 상태대로 돌아올 겁니다.
사실 이 코드대로 하면 이미지 뿐만 아니라 그냥 마우스를 아무데서나 드래그해서 leftbox에 넣으면 색이 변합니다.

아래 오늘 소스코드를 올려 놓을 께요.

tistory.zip



직접 해 보시고 여러분이 생각하신대로 프로그램을 좀 더 발전 시켜보세요.
이 코드를 응용해서 아주 다양한 기능을 만들 수 있을 겁니다.

예를 들어 쇼핑몰 홈페이지에서 쇼핑카트에 담는것을 그냥 드래그 앤 드롭으로 할 수도 있구요.

쇼핑몰 얘기가 나온김에 HTML5에서는 브라우저 내에서 mySQL 같은 Database 기능과 유사한 기능을 사용할 수 있도록 해 줍니다.

다음엔 이 브라우저 내 DB 기능에 대해서 공부해 볼께요.


반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 Web Storage -01-  (2) 2011.12.27
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
HTML5 Canvas 이용하기 - 03 -  (0) 2011.12.24
HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자  (0) 2011.12.22
HTML5 Canvas 이용하기 - 01 -  (0) 2011.12.21
HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript  (2) 2011.12.19

티스토리툴바