HTML

				<form id="signupform" method="post" action="login_action.php">
					<fieldset>
						<legend>회원가입 폼</legend>
						<p>
							<label for="email">메일주소</label><input type="text" name="email" id="email" class="input" /><span>유효한 이메일을 입력하세요.</span>
						</p>
						<p>
							<label for="password">비밀번호</label><input type="password" name="password" id="password" class="input" /><span>영문과 숫자 조합으로 비밀번호를 입력하세요.</span>
						</p>
						<p>
							<label for="password_re">비밀번호 확인</label><input type="password" name="password_re" id="password_re" class="input" /><span>비밀번호를 한번 더 입력하세요.</span>
						</p>
						<p>
							<input type="submit" value="회원가입" class="button" /><input type="button" value="가입취소" class="button" />
						</p>
					</fieldset>
				</form>
			

CSS

form#signupform { margin: 0; padding: 0; }
form#signupform fieldset { border: 1px solid #CCCCCC; padding: 0 10px;}
form#signupform legend { border: 1px solid #CCCCCC; font-size: 110%; margin: 0 0 0 10px; padding: 5px; }
form#signupform p { padding: 5px 0; }
form#signupform p label { font-weight: bold; }
form#signupform p span { color: #666666; font-size: 11px; padding: 0 0 0 10px; }
form#signupform input.button { font-size: 120%; margin: 0; padding: 8px; }

JQuery

			$(document).ready(function(){
				$("#signupform").submit(function(){
					if($("#email").val()==""){
						alert("메일주소를 입력해주세요.");
						$("#email").focus();
						return false;
					}

					if($("#password").val()==""){
						alert("비밀번호를 입력해주세요.");
						$("#password").focus();
						return false;
					}

					if($("#password_re").val()==""){
						alert("비밀번호를 한번 더 입력해주세요.");
						$("#password_re").focus();
						return false;
					}

					if($("#password").val()!=$("#password_re").val()){
						alert("비밀번호를 한번 더 입력해주세요.");
						$("#password_re").focus();
						return false;
					}
				});
			});
			

HTML

		<ul class="example_button">
			<li id="hideall"><a href="#para2">전체 p Hide</a></li>
			<li id="showall"><a href="#para1">전체 p Show</a></li>
			<li id="oddhide"><a href="#para4">짝수번째 p Hide</a></li>
			<li id="oddshow"><a href="#para3">짝수번째 p Show</a></li>
		</ul>

		<div class="clear"></div>

		<div id="list">
			<p>박지성-테베스, 월드컵 전초전 '맨체스터 더비'</p>
			<p>英 잡지, 이청용 이적 유력 슈퍼스타 Top 50 선정</p>
			<p>존 테리, "이청용의 크로스는 내 가슴에 맞았다"</p>
			<p>[라리가 32R] 레알, 알메리아에 2-1 역전승…호날두 리그 19호골</p>
		</div>
	

CSS

	ul.button{margin:0;padding:0;}
	ul.button li{float:left;margin:3px;}
	ul.button li a {display:block;padding:3px 6px;border:3px solid #ccc;border:2px solid #ccc;background:#f7f7f7;font-weight:bold;text-align:center;}
	

JQuery

		$(document).ready(function(){
			$("li#hideall a").click(function(){$("p").hide();});
			$("li#showall a").click(function(){$("p").show();});
			$("li#oddhide a").click(function(){$("p:odd").hide();});
			$("li#oddshow a").click(function(){$("p:odd").show();});

			$("li#oddfadeout a").click(function(){$("p").fadeOut();});
			$("li#oddfadein a").click(function(){$("p").fadeIn();});
		});
	

HTML

				<ol id="examplelist">
					<li>order list 1</li>
					<li>order list 2</li>
					<li>order list 3</li>
					<li>order list 4</li>
					<li>order list 5</li>
				</ol>
			

CSS

			.text_red{color:red;}
			.text_green{color:green;}
			

jQuery

			$(document).ready(function(){
				$("#examplelist li:first").hover(function(){
					$(this).addClass("text_red");
				}, function(){
					$(this).addClass("text_green");
				});
			});
			

HTML

		<ol>
			<li>order list 1</li>
			<li>order list 2</li>
			<li>order list 3</li>
			<li>order list 4</li>
			<li>order list 5</li>
		</ol>
	

CSS

	.list_background{background:yellow;font-weight:bold;}
	

jQuery

	$(document).ready(function(){
		$(".example_addClass").click(function(e){
			e.preventDefault();
			$("ol > li").addClass("list_background");
		});
	});
	

HTML

		<a href="http://www.ugoon.net">Link Example</a>
		

jQuery

	$(document).ready(function(){
		$("a.example").click(function(e){
			e.preventDefault();
			alert("Welcome to the jQuery world");
			return false;
		});
	});
	

시작

이 문서는 개인적인 공부를 목표 정리하였으며, 사내에서 공유하여 사용할 수 있도록 사내에서만 주소를 공개하고 있습니다. 하루 하루 빠르게 발전하고 있는 HTML5에 대하여 대략적인 내용을 포함하고 있으며, 추후 브라우저 지원에 따른 HTML5 작업을 할 수 있도록 가이드 또한 함께 제공합니다. HTML5에 대한 이야기가 여러 업체 및 관련 뉴스, 소식이 쏟아지고 있는 상황이기에 이 문서로 인하여 기본적인 HTML5 지식을 습득하고, 다른 검색이나 학습을 통하여 HTML5에 대하여 폭 넓은 지식을 갖도록 하는 것이 이 문서의 목표입니다. (하지만, 이 문서만으로는 모든 부분에 대한 설명과 문제 해결방법을 해결할 수는 없습니다.)
이 문서 내용에 대한 출처 및 원본은 [출처/참고링크]에서 확인하면 됩니다.

문서 이력

• Author – 유정훈 (오타나 수정할 부분은 메일로 보내주세요.) playheader@gmail.com, i@ugoon.net)
• Date – 2010-03-01
• 이 문서는 나눔고딕에 최적화되어 있습니다. (나눔고딕 다운로드)
• History
  1. 2010-03-01 (개요 작성)
  2. 2010-03-10 (콘텐츠 추가)
  3. 2010-03-16 (문서구조부분 추가)

개요

• 2010년 3월 현재 Working Draft 상태
  • W3C HTML5 – http://www.w3.org/TR/html5/
• 웹의 미래를 책임질 중요한 표준
• 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 벤더가 참여하고 있음.
• HTML의 차기 주요 제안 버전
• 2004년 6월 Web Hypertext Application Technology Working Group (WHATWG)에서 웹 어플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작
• Plug-in (Flash Player, Silverlight 등등) 같은 것 없이 진화된 웹 어플리케이션을 만들 수 있도록 함

↑ 목차보기

대표적인 기능

• 캔버스 요소를 통하여 다이나믹한 그래픽을 자바스크립트만을 이용하여 웹 페이지에 보여줌.
• 비디오 요소를 통하여 간단하게 웹에서 비디오를 제어함.
• Geolocation API로 웹 브라우저에서도 내 현재 위치를 알 수 있음.
• 로컬 저장이 가능하여 웹 어플리케이션에서 오프라인 지원이 됨. 예를 들어, 인터넷이 끊겨도 기존 메일을 읽을 수 있음.
• 백그라운드 프로세싱이 가능해서 웹 어플리케이션이 브라우저 속도를 느리게하지 않으면서 무거운 작업을 돌릴 수 있음.
• Drag & Drop API로 웹 어플리케이션에서도 Drag & Drop이 가능함.
• 더 많은 요소와 API들로 웹 어플리케이션보다 더 기능과 UI가 풍부한 어플리케이션을 만들수 있게하고 궁극적으로 클라우드 컴퓨팅을 더욱 강화시켜줄 수 있음.
• 모바일 브라우저들도 HTML 5를 지원하기 시작하여 모바일에서도 강화된 어플리케이션을 이용할 수 있음.

↑ 목차보기

HTML4과 HTML5 기본 문서 구조 비교

HTML 4.01

HTML 5

HTML5 추가정보

1. 태그 추가
   • 구조적인 태그 – 구역을 나누는 블록요소인 div 태그를 대신함
     • <header>
     • <nav>
     • <article>
     • <section>
     • <aside>
     • <footer>
   • API 태그 – 플러그인 없이 멀티미디어를 재생할 수 있게 함.
     • <audio>
     • <video>
     • <canvas>
   • 기타
     • <embed>
     • <figure>
     • <hgroup>
     • <mark>
     • <meter>
     • <output>
     • <progress>
     • <rp>
     • <rt>
     • <ruby>
     • <source>
     • <time>

↑ 목차보기

새로운 Input 요소와 속성

요소

1. type=”datetime”
2. type=”datetime-local”
3. type=”date”
4. type=”month”
5. type=”time”
6. type=”week”
7. type=”number”
8. type=”range”
9. type=”email”
10. type=”url”
11. type=”search”
12. type=”tel”
13. type=”color”

속성

1. 정규식 추가
   • <input type=”text” name=”phone” id=”phone” Pattern=”[0-9]{3}-[0-9]{3}-[0-9]{3}” title=”전화번호를 입력하세요”>
2. 이벤트
   • <input type=”text” name=”phone” id=”phone” Pattern=”[0-9]{3}-[0-9]{3}-[0-9]{3}” title=”전화번호를 입력하세요” Oninvalid=”handle_myself(); return false;”>

↑ 목차보기

출처/참고 링크

• W3C HTML 5
• 위키피디아(한글) – HTML 5
• HTML5란 무엇이며 왜 중요한지에 대한 이야기
• HTML4와 HTML5의 차이점 (W3C 영문자료 – 2010년 3월 10일 Editor Draft)

↑ 목차보기