[Viewport] – 기본설정
[자동 전화걸기 태그 방지] – 기본설정
[홈 화면 아이콘] – 기본설정
[파비콘] – 기본설정 추천
[툴바감추기] – 기본설정 (세트)
[전체화면 모드] 아이폰용 (툴바감추기도 적용되어 있어야 적용됩니다.) (세트)
[스플래시 스크린] 아이폰용 (세트)
[상태바 색상 설정] (bar에 style 입히기) 아이폰용 (세트)
[화면 높이가 너무 짧을 경우]
HTML5 위키 -http://ko.wikipedia.org/wiki/HTML5
<form onsubmit=”return false;”>
<input type=”text” name=”aa” id=”aa” value=””>
<a href=”#” onclick=”javascript:함수명();”>버튼</a>
</form>
위의 빨간색 부분(onsubmit=”return false;”)을 추가하면
엔터키를 눌렀을 경우 자동으로 Submit(); 되는 부분을 방지할 수 있습니다.
HTML 5 Demos and Examples
HTML 5 experimentation and demos I’ve hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).
Learn the power tools for your job: git, SASS, require.js and more
Filter demos: canvas classlist contenteditable dataset dnd events file-api file geolocation getUserMedia hidden history manifest offline postMessage sql-database storage svg video websocket workers xhr2
Demo |
Support |
Technology |
ie: none firefox: nightly opera: live safari: none chrome: live |
getUserMedia canvas |
|
ie: none firefox: nightly opera: live safari: none chrome: live |
getUserMedia |
|
ie: nightly firefox: live opera: live safari: live chrome: live |
file dnd xhr2 |
|
ie: none firefox: live opera: live safari: live chrome: live |
hidden |
|
ie: none firefox: live opera: live safari: live chrome: live |
classlist |
|
ie: live firefox: live opera: live safari: live chrome: live |
storage |
|
ie: none firefox: live opera: live safari: live chrome: live |
dataset |
|
ie: none firefox: live opera: live safari: live chrome: live |
history |
|
Browser based file reading Not part of HTML5 |
ie: none firefox: live opera: live safari: live chrome: live |
file-api |
Drag files directly into your browser Not directly part of HTML5 |
ie: none firefox: live opera: live safari: live chrome: live |
file-api dnd |
ie: none firefox: nightly opera: live safari: live chrome: live |
websocket |
|
ie: live firefox: live opera: live safari: live chrome: live |
video |
|
ie: live firefox: live opera: live safari: live chrome: live |
canvas |
|
ie: live firefox: live opera: live safari: live chrome: live |
video canvas |
|
ie: live firefox: live opera: live safari: live chrome: live |
video |
|
ie: live firefox: live opera: live safari: live chrome: live |
canvas |
|
ie: live firefox: live opera: live safari: live chrome: live |
contenteditable storage |
|
Geolocation Works on Safari Mobile too |
ie: live firefox: live opera: live safari: live chrome: live |
geolocation |
postMessage same domain |
ie: live firefox: live opera: live safari: live chrome: live |
postMessage |
postMessage cross domain |
ie: live firefox: live opera: live safari: live chrome: live |
postMessage |
ie: live firefox: live opera: live safari: live chrome: live |
dnd |
|
ie: live firefox: live opera: live safari: live chrome: live |
dnd |
|
offline detection Works on Safari Mobile too |
ie: none firefox: live opera: live safari: live chrome: live |
offline events |
navigator.onLine tests Doesn’t use events, only polls |
ie: live firefox: live opera: live safari: live chrome: live |
offline |
ie: none firefox: live opera: live safari: live chrome: live |
offline events |
|
offline application using the manifest FF 3.6 is still buggy – doesn’t request manifest after initial load |
ie: none firefox: live opera: live safari: live chrome: live |
offline manifest |
ie: live firefox: live opera: live safari: live chrome: live |
storage |
|
ie: none firefox: none opera: live safari: live chrome: live |
sql-database |
|
ie: none firefox: none opera: live safari: live chrome: live |
sql-database |
|
Web Workers watch out – uses a lot of CPU! example without – will hang your browser |
ie: none firefox: live opera: live safari: live chrome: live |
workers |
SVG clock animation SVG inline clock with animation. |
ie: live firefox: live opera: live safari: live chrome: live |
svg |
All content, code, video and audio is Creative Commons Share Alike 2.0
(3) 크기가 없는 input 박스 하나더 추가해준다.
자동 submit 이 input 박스 하나있을 때만 발생하므로 크기가 없는 input 박스를
추가해 준다. 스타일을 크기 0, 숨김으로 설정한다.
지금까지 우리가 학습한것은 하나의 폼은 한번 submit 된다는 것이다.
가령
<form action="abc"><input type="submit" /></form>그리고 jquery 에서는 아래와 같이 serialize 를 이용하여 전송이 가능하다. <script>// <![CDATA[ $(function(){ $("#btn_submit").click(function(){ $.post("경로", $("#sform").serialzie(), function(data){ }); }); }); // ]]></script>
물론 onsubmit 를 이용해서 처리해도 문제는 없다.
그렇다면 다중의 폼을 한군데로 전송할 수는 없을까?
<form class="sform" action="abc"> </form> <form class="sform" action="abc"> </form>
폼 클래스 값으로 다중 form submit을 처리 할수 있다
HTML을 jade 템플릿으로 컨버팅해주는 사이트입니다.
우연찮게 -_- 해외 사이트 돌아다니다가 발견! 했습니다. ㅎㅎ
요즘 node 공부를하고있는데 view 템블릿 엔진으로 jade를 사용 한다는데..
손쉽게 html 코드를 컨터팅 뽝 !
http://html2jade.aaron-powell.com/
-_-허… 근데 jade를 많이 쓰는지는 잘 모르겠네요 …
그냥 node 에서 많이 쓴다고하니.. 책들마다 jade 설명이 꼭들어가있네요..
html 코드를 간결하고 짧고, 장점은 있어보이는데…흠… 아직 익숙치 않아서 그런거겠죠 ?ㅎ;;;
얼마전 메타 태그를 이용하여 페이지 새로고침을 해야하는 상황이 생겼습니다.
바로 사이트헤더에 meta정보를 이용하여 새로고침하는 거였는데..
잘 몰랐엇는데..
저만 모르고 있는건가 싶기도 하지만..
그래도 혹시나 모르고 있을 분들을 위해서 적습니다.
웹에서
<A href =” mailto: ~~~” >메일보내기</a>
로 메일을 보낼수 있엇던 것처럼
모바일 웹에서는 sms를 이용해서 문자를 보낼 수 있다는군요
Browser/platform | sms:/smsto: scheme | mms:/mmsto: scheme | mailto: scheme |
Safari | Only sms: and in iPhone (not iPad/iPod). No body support. | No | Yes |
Android browser | Yes, no number or body support | Yes, no number or body support | Yes |
Symbian/S60 | Only sms: | Only mmsto: | Yes |
Nokia Series 40 | No (use mailto: instead) | No | Yes (it can also be used for SMS and MMS) |
webOS | Only sms: | No | Yes |
BlackBerry | No | No | Yes |
NetFront | Yes | Yes | Yes |
Openwave (Myriad) | No | No | Yes |
Internet Explorer | Only sms: | No | Yes |
Motorola Internet Browser | No | No | Yes |
Opera Mobile | Yes | Yes | Yes |
Opera Mini | Depends on the device | Depends on the device | Depends on the device |
예제
<a href="sms://">Send an SMS</a> <a href="sms://?body=Visit%20the%20best%20site%20at%20http://mobilexweb.com"> Invite a friend by SMS<a> <a href="sms://+3490322111">Contact us by SMS</a> <a href="sms://+3490322111?body=Interested%20in%20Product%20AA2"> More info for producto AA2</a>
mailto 태그를 잘 활용하는 방법 대부분의 사람들이 mailto 태그를 사용할 때 수신자 속성만 정의하고 사용할 때가 많다. 하지만 참조, 1. 가장 기본적인 형태는 다음과 같다: <A href=”mailto:webmaster@korea.internet.com“>웹마스터에게 메일을</a> 2. 다음으로는 참조를 삽입해 보자. 단순히 이메일 주소에 ?cc= 부분에 참조 이메일 주소를 적어주면 된다: <A href=”mailto:webmaster@korea.internet.com?cc=partner@korea.internet.com“>웹마스터에게 메일을</a> 3. 이제 여기다 숨은 참조를 붙여보도록 하자: <A href=”mailto:webmaster@korea.internet.com?cc=partner@korea.internet.com&bcc=ads@korea.internet.com“>웹마스터에게 메일을</a> 4. 이번엔 여러 사람에게 메일을 보내는 경우를 살펴 보자: <A href=”mailto:webmaster@korea.internet.com, 5. 이제 제목란에 적당한 제목을 붙여 보도록 하자: <A href=”mailto:webmaster@korea.internet.com?cc=partner@korea.internet.com&bcc=ads@korea.internet.com&subject=문의가 있습니다!”>웹마스터에게 메일을</a> 6. 이제 여기에 메일 본문 내용까지 붙여보도록 하자: <A href=”mailto:webmaster@korea.internet.com?cc=partner@korea.internet.com&bcc=ads@korea.internet.com&subject=문의가 있습니다!&body=mailto 태그 사용 방법에 대해 자세히 알고 싶습니다”>웹마스터에게 메일을</a> |
” ” : 공백(스페이스 한 칸)을 의미
<
부등호(<)
>
부등호(>)
&
앰퍼샌드(&) 기호
"
쌍따옴표(“) 하나를 표[\”] 이것도 쌍따옴표가 되겠다.
&35; #추가
shap(#)하나를 표현
&39#추가
따옴표(‘) 하나를 표현, [\’] 이것도 따옴표가 되겠다.
이 간접 표현식이 난 맨날 아직도 해깔린다.. 특히 <> –; 언제 한번 정리 하려 했는데 이제야 정리 하는 군…
더 아는데로 계속추가…
이 표현은 여기 저기 많이 쓰인다… html뿐 아니라 ibatis에서도.