[ewd2014]class03

Expressive Web Application Design | WEEK 2 : FLEX.HTML5

익스프레시브웹응용디자인Expressive Web Application Design


Second Class | 0320

Web Trend 2014(30m)

HTML5 Coding(20m)

CSS3 Basics(30m)

Website : ewd.jylee6977.com/tc (next mon)


http://masonry.desandro.com/

http://masonry.desandro.com/


http://demo.hongkiat.com/css3-image-captions/index.html

http://demo.hongkiat.com/css3-image-captions/index.html


http://www.unheap.com/section/inputs-forms/

http://www.unheap.com/section/inputs-forms/


http://wipmessenger.com/

http://wipmessenger.com/


http://turnplay.ramotion.com/en




http://hipstamatic.com/oggl/

http://hipstamatic.com/oggl/

http://weathersnap.io/

http://weathersnap.io/

http://makefac.es/

http://makefac.es/

http://www.fiftythree.com/

http://www.fiftythree.com/

http://nizoapp.com/

http://nizoapp.com/

http://www.tourism-app.com/

http://www.tourism-app.com/

http://www.panikapp.com/

http://www.panikapp.com/


http://flatuicolors.com/

http://www.snowbird.com/winter/

http://www.snowbird.com/winter/

http://squidee.co/

http://squidee.co/

https://layervault.com/

https://layervault.com/

http://dribbble.com/shots/988886-Dropdown-With-Switches-Psd

http://dribbble.com/shots/988886-Dropdown-With-Switches-Psd


Typography & Unique Web Copy

http://www.croptheblock.com/

http://www.croptheblock.com/


Visual EffectAdobe Edge

CodePen

http://codepen.io/

http://codepen.io/

http://codepen.io/

http://html.adobe.com/edge/animate/

http://codepen.io/


Fixed Navigation

http://theorydesign.ca/

http://theorydesign.ca/


Responsive Design Must


Personal Portraits

http://www.andreamann.com/

http://www.andreamann.com/


Short presentation video

http://getgoldee.com/

http://getgoldee.com/


<header>

<article>

<section>

<section>

<aside>

<footer>

<nav>section

일반적인 문서나 애플리케이션 영역 표시섹션의 제목을 h1~h6까지 함께 사용

article 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠 표시

aside 문서의 주요 부분을 표시하고 남는 사이드바의 콘텐츠

hgroup 제목과 그의 부제목을 그루핑

header헤더부분, 사이트 소개 또는 네베게이션 등 표시내용중간에는 머리글 역할

footer푸터 부분사이트 저작관, 제작자 정보

nav 사이트안에서의 네비게이션 요소 표시


http://grigorlawyers.com.au/

머리말부분지정메뉴삽입 | 검색창등 <form>등을통해삽입가능


http://miniapps.co.uk/

제목과부제목의묶음중요한뼈대역할


http://zoocha.com/

네이게이션 링크표현<header><footer><aside>항목에포함가능. 위치에영향을받지않음

http://zoocha.com/


http://www.projectfedena.org/

네이게이션 링크표현독립적인형태가능

http://www.projectfedena.org/


http://www.andydev.co.uk/blog

웹상의실제 내용제목의 <h3><time><p>포함


http://www.areya.de

contents를 묶어주는 태그웹에서재배포되어서는안 되는컨텐츠지정가능


http://www.designc7.com

contents를 묶어주는태그다른 <section>또는 <article>포함가능


직접 해보기

<header>

<nav>

<section>


직접 해보기(1)

1. DOCTYPE 선언

<!DOCTYPE html><html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>산과벗하는산악회</title>

</head>


직접 해보기(2)

2. <header>태그삽입

<body><header id="top"><h1> 산과벗하는산악회 </h1><h3> 주말산행뿐만아니라주중산행, 무박산행도합니다</h3>

</header>


직접 해보기(3)

3. <nav>태그삽입

<nav id="mainNav"><ul><li><a href="#">산행예절</a></li><li><a href="#">산행준비</a></li><li><a href="#">산행종류</a></li><li><a href="#">보행요령</a></li><li><a href="#">등산식량</a></li>

</ul></nav>


직접 해보기(4)

4. <section>태그삽입

<section id="content">

<header><h3> 산행예절</h3>

</header>

<article><h4> 인사 </h4>

<p>인사를 할때에는 너무큰소리로하지말고상대방이 똑똑히들을정도의 소리로인사한다. 산쟁이 중에는 "수고하십니다"란인사를싫어하는 사람이많다. 오히려 그것보단 "힘내세요" "조금만가면정상입니다" "좋은산행되세요"라고인사가적당하지않은가생각한다. 그리고단체로갈땐모든 사람이인사를하면안된다 여러명이줄지어서갈땐선두에 선사람이인사를하고 뒷사람은가볍게목례정도만 하면된다.</p>

<h4>추월을 해야할땐 먼저양해를구하자.</h4>

<p>좁은 등산로에서 예고없이추월을한다면 배낭같은것이부딪혀서로 중심이흐트러질경우가 많다. 약한사람은튕겨날경우도있다. 추월을 할땐미리 "먼저가겠습니다"라고하고비켜주면그때 "고맙습니다"라고인사를하고 추월을하자.</p>

<h4>올라오는 사람에게 양보를하자.</h4>

<p>산에서 많이경험을 하였을것이다. 내려오는 사람보단올라가는사람이 시간이촉박하다. 또페이스 유지도올라오는사람이유지하기가 어렵다. 단체일경우에는 소수인그룹이양보한다.</p>

</article></section>


직접 해보기(5)

5. css연결

<!DOCTYPE html><html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>산과벗하는산악회</title><link href="style1.css" rel="stylesheet" type="text/css">

</head>


Best HTML5 Sites

http://html5gallery.comhttp://101besthtml5sites.com

HTML5 Sites

일반문서 : http://www.w3.org/TR/html5/

웹퍼블리셔 : http://dev.w3.org/html5/spec-author-view/

Rich UI 개발자 : http://dev.w3.org/html5/2dcontext/

웹 어플리케이션및백엔드개발자 : http://dev.w3.org/html5/eventsource/

http://www.clearboth.org/html5/spec.html

http://html5gallery.com/

http://101besthtml5sites.com/


REFERENCE SITE 찾아오기- BEST 5

[ewd2014]class03

Documents