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

최근에 받은 트랙백

글 보관함

HTML5 Speech Input (음성인식) API

2012. 1. 15. 16:05 | Posted by 솔웅


Google provide excellent stuffs for HTML5 developer and one of the thing is that Speech Input API.
Just Click the microphone image and speak out any word then Google get and display the word in the text field.
One and big limitation is that it is working only on Google Chrome browser.

iPhone 의 Siri 가 나오는 바람에 그 신선함이 팍 꺾였지만 처음 이 기능을 보고 전 아주 신선한 충격을 받았어요.
이제 조만간 터치가 아니라 음성으로 기기를 제어할 수 있는 프로그램을 나도 만들 수가 있겠구나......
아래 텍스트 필드 옆에 있는 마이크 이미지를 클릭하고 말을 하면(아직 영어만 지원) 구글에서 그 말을 알아듣고 텍스트 필드에 추가 합니다.
지금은 오직 구글 크롬 브라우저에서만 작동합니다.


HTML5 Presentation
HTML

Speech Input

<input type="text" x-webkit-speech />

Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.

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

Fore more Details Click it. 
좀더 자세한 사항은 여기를 클릭 하세요. 

You can get sample source code here.
샘플 코드 입니다. 다운 받아서 사용하시면 됩니다.

 

반응형

Comment

HTML5 Storage 4 - Application Cache -

2012. 1. 10. 07:13 | Posted by 솔웅


Let's see.... just imagine... If you can open any web pages with out internet connection.. Wow.. You don't need 3G,4G, WiFi and Internet connection though. You don't need to spend your money for internet service. That's cool..

Unfortunately there is no way to access remote web pages with out internet connection but I have a good news that you can open any web pages what you've opened before without Internet Connection. That is Application Cache.

If you use WiFi with your mobile. just open web pages what you want to see then you can reopen the pages out of the WiFi range.

Yes, It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers have caching mechanisms, but they're unreliable and don't always work as you might expect. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.

Using the cache interface gives your application three advantages:

    Offline browsing - users can navigate your full site when they're offline
    Speed - cached resources are local, and therefore load faster.
    Reduced server load - the browser will only download resources from the server that have changed.

The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.

영어로 조금 길게 썼네요. HTML5에서 제공하는 Application Cache 기능은 오프라인 환경에서도 웹 페이지를 열어 볼 수 있도록 도와 줍니다.
물론 아무 페이지나 열어볼 수 있는 건 아니구요. 한번은 오픈해서 Application Cache에 저장이 된 웹 페이지에 한정 되겠죠.
이 기능은 Manifest file과 javaScript 인터페이스 두 부분에서 설정해 주시면 됩니다.

테스트하기가 조금 힘들긴 할텐데요.. 왜냐하면 HTML을 서버에 올려놓고 브라우저로 오픈하고, 인터넷이 안되는 환경에서 다시 열어보고 해야 되니까......

하여간 아래 제가 조금 수정한 HTML 파일 올립니다.
You can download below html file.


HTML5 Presentation

JS

Application Cache


cache.appcache:

Turn off your internet connection and refresh this page!


 as you can see above, you need include the manifest attribute on the document's html tag and javascript.
Click this if you want to know more details.

좀 더 자세한 사용법을 보시려면 여기를 클릭 하세요.


반응형

Comment

HTML5 Storage 3 - IndexedDB -

2012. 1. 9. 13:15 | Posted by 솔웅


Today's Topic is Indexed Database of HTML5.

Indexed DB 도 Web Storage 중 하나인데요. Key-value 조합으로 데이터를 관리 할 수 있도록 해 줍니다.

아래 파일을 다운 받아서 브라우저에서 테스트 해 보세요.
Download below file and open it with latest Google Chrome Browser.


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

This is only working on my Google Chrome browser as above.
이 기능은 구글 크롬 브라우저에서만 동작이 제대로 됩니다.


HTML5 Presentation
JS

IndexedDB

1.  "create objectStore" ->2.  Input key and value -> 3.  click "set" -> 4. do 2 and 3  as many as you want -> 5. you can see new key and value -> 6. You can delete it -> 7. you can remove objectStore

먼저 objectStore 를 create 하고 키와 밸류를 넣은 다음 set 버튼을 누릅니다.
그러면 데이터가 브라우저에 저장이 됩니다.
데이터를 여러개 생성할 수 있습니다. 하지만 key 값은 중복 될 수 없습니다.
생성된 데이터 옆에 Delete 버튼을 누르면 데이터가 지워집니다.
remove objectStore 버튼을 누르면 전체 objectStore 가 delete 됩니다.

오직 구글 크롬 브라우저에서만 실행 되더라구요.
혹시 다른데서 실행 되시는 분은 알려 주세요.

It works on Google Chrome browser only.
Please let me know if it works on any other browser.

그럼....

Thanks
반응형

Comment

HTML5 Storage 2 - Web SQL DB -

2012. 1. 9. 11:05 | Posted by 솔웅


Hi! This is the second tutorial of HTML5.
I am going to show you Web SQL DB of HTML5.

오늘 볼 기능은 Web SQL DB 입니다.
예전엔 PHP, ASP, JSP 같은 서버 사이드 스크립트 언어로 디비서버에 연결해서 테이블에 자료를 저장하고 불러오고 수정하고 했었습니다.
물론 HTML5에서도 그 기능이 가능한데요.
거기에다가 브라우저 내에도 테이블을 만들어서 SQL 쿼리로 테이블을 만들고 저장하고 지우고 할 수 있습니다.
물론 이 Data 는  Client side 의 Browser 에 저장이 됩니다.
Client side 에서 이 Browser 를 껐다 켜도, 그리고 컴퓨터를 껐다 켜도 그 데이터는 브라우저내에 그대로 있습니다. (서버에 있는 것이 아닙니다.)

이 기능을 살펴 보겠습니다.

- This function is not working on this blog so download below source code file and open the file with your browser (Google Chrome,Opera or Safari)
이 기능은 이 블로그에서는 실행이 안 되네요.
아래 업로드한 파일 다운 받으셔서 여러분 브라우저에서 실행해 보세요. -


HTML5 Presentation
JS

Web SQL Database

See the generated database: Developer > Developer Tools > Storage

1. Click Create Table Button -> The table will be created
2. Type Anything in Text field and click new to do item button. (You can make data as many as you want)
3. You can delete the data. (click the line Delete)
4. You can drop the table (Click the drop table button)

1. 먼저 create Table Button을 click 하셔서 table을 생성합니다. (Table1Test 테이블이 생성될 겁니다.)
2. text field 에 원하는 글자를 넣고 new to do item 버튼을 누르세요. 그러면 생성된 테이블에 그 데이터가 들어갑니다. 여러분이 원하는 만큼 만드세요.
3. 만들어진 데이터는 밑에 보여지게 됩니다. 여기서 Delete 링크를 누르면 해당 데이터는 지워지게 됩니다.
4. Drop table 버튼을 누르면 이 테이블 전체가 지워지게 됩니다.

사용법은 위에 있고 전체 소스는 아래에 업로드 하겠습니다.
You can download the source code below.

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                          - Not Working (X)

이 기능은 제가 가지고 있는 인터넷 익스플로어 하고 파이어폭스에서 작동하지 않네요.

Please let us know (Leave a comment) whether it is working on your browser (PC,Mobile) or not please.
여러분 브라우저에서 제대로 작동하는지 댓글에 달아 주시면 아주 고맙겠습니다.
모바일 브라우저에서의 동작 여부도요.

그럼...
thanks..


반응형

Comment

  1. 달빛그림자 2012.01.11 22:22

    파폭(9.0.1)에서 모든 오류가

    db.transaction(function(tx) {

    를 가리키네요..;ㅅ;

    • 너구리 2012.01.12 01:26

      FireFox 9.0.1 - Not Working (X)
      파폭에선 동작이 안된다고 하셨네요~^^

  2. 예 FireFox 9.0.1 에서 작동이 안됩니다.
    db.transaction(function(tx){ 에서 에러메세지가 체크되는지는 몰랐네요.
    좋은 정보 감사합니다.
    ^^

  3. 고라파덕 2012.02.01 03:57

    아, 저밑에 html파일 받아서 해야 정상 구동하는군요.
    크롬에서는 되는데. 역시 IE는 안 되네요.
    역시 HTML5라고는 캔버스만 지원하는 IE...
    물론, IE버젼이 제가 8이라는 점에서 당연히 안 되는거네요.
    IE는 9인가 10부터 HTML5지원하는거 같던데...

    • 솔웅 2012.02.01 06:25 신고

      예 이 글의 기능은 이 블로그내에서 작동은 안 하구요 샘플 파일을 받아서 실행해 보시면 됩니다.

      감사합니다.

  4. fantasyls 2012.02.01 04:00

    좋은글 담아가겠습니다!+_+

HTML5 Storage 1 - Web Storage -

2012. 1. 9. 09: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.
아래 제가 위에 보이는 페이지만 따로 수정한 파일 입니다.
다운 받으셔서 브라우저에서 실행하시면 위 화면을 보실 수 있습니다.


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

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

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

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


반응형

Comment

  1. 너구리 2012.01.12 01:28

    잘보고 갑니다~~^^

HTML5로 게임 만들기 워밍업

2012. 1. 7. 09: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로 게임을 만들 수 있는 여러 방법과 모바일 게임을 만드는 방법에 대해 공부해 나가겠습니다.


반응형

Comment

HTML5 Form 공부하기 -2-

2012. 1. 1. 15: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 에 대해서 알아 봤습니다.


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

반응형

Comment

  1. 너구리 2012.01.05 22:10

    잘 보고 갑니다~
    새해 복 많이 받으세요~^^

  2. 익명 2015.05.13 17:50

    비밀댓글입니다

HTML5 Form 공부하기 -1-

2012. 1. 1. 13: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 기능 등에 대해 공부 해 보겠습니다.

반응형

Comment

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

2011. 12. 31. 11: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도 있을 것 같은데..
혹시 아시는 분 계시면.. 알려 주세요...

그럼...
반응형

Comment

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

2011. 12. 31. 09: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에 집중해서 새로운 태그들을 살펴 보겠습니다.
반응형

Comment

이전 1 2 3 4 5 다음