Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
익스프레시브 웹 응용 디자인
Expressive Web Application Design
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Second Class | 0320
Web Trend 2014(30m)
HTML5 Coding(20m)
CSS3 Bas...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://flatuicolors.com/
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Typography & Unique Web Copy
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Visual Effect Adobe Edge
CodePen
http://codepen.io/
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Fixed Navigation
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Responsive Design Must
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Personal Portraits
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Short presentation video
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
<div>
<div>
<div>
<header>
<nav>
<section>
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
<header>
<article>
<section>
<section>
<aside>
<footer>
<nav>
sect...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://grigorlawyers.com.au/
머리말 부분지정
메뉴삽입 | 검색창 등 <form>등을 통해 삽입 ...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://miniapps.co.uk/
제목과 부제목의 묶음
중요한 뼈대역할
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://zoocha.com/
네이게이션 링크 표현
<header><footer><aside>항목에 포함가능.
위치...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://www.projectfedena.org/
네이게이션 링크 표현
독립적인 형태 가능
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://www.andydev.co.uk/blog
웹상의 실제 내용
제목의 <h3><time><p>포함
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://www.areya.de
contents를 묶어주는 태그
웹에서 재배포 되어서는 안 되는 컨텐츠 지정가능
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
http://www.designc7.com
contents를 묶어주는 태그
다른 <section>또는 <article>...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
www.mmmri.com
제작자 정보나 저작권 정보
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
직접 해보기
<header>
<nav>
<section>
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
직접 해보기(1)
1. DOCTYPE 선언
<!DOCTYPE html>
<html>
<head>
<meta http-e...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
직접 해보기(2)
2. <header>태그 삽입
<body>
<header id="top">
<h1> 산과 벗하는 산악...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
직접 해보기(3)
3. <nav>태그 삽입
<nav id="mainNav">
<ul>
<li><a href="#">산행...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
직접 해보기(4)
4. <section>태그 삽입
<section id="content">
<header>
<h3> 산...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
직접 해보기(5)
5. css연결
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=...
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
Best HTML5 Sites
http://html5gallery.com
http://101besthtml5sites....
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
REFERENCE SITE 찾아오기
- BEST 5
Upcoming SlideShare
Loading in …5
×

[EWD2014]CLASS03

616 views

Published on

  • Be the first to comment

  • Be the first to like this

[EWD2014]CLASS03

  1. 1. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 익스프레시브 웹 응용 디자인 Expressive Web Application Design
  2. 2. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Second Class | 0320 Web Trend 2014(30m) HTML5 Coding(20m) CSS3 Basics(30m) Website : ewd.jylee6977.com/tc (next mon)
  3. 3. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  4. 4. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  5. 5. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  6. 6. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  7. 7. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  8. 8. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  9. 9. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  10. 10. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://flatuicolors.com/
  11. 11. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  12. 12. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Typography & Unique Web Copy
  13. 13. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Visual Effect Adobe Edge CodePen http://codepen.io/
  14. 14. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Fixed Navigation
  15. 15. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Responsive Design Must
  16. 16. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Personal Portraits
  17. 17. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Short presentation video
  18. 18. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  19. 19. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 <div> <div> <div> <header> <nav> <section>
  20. 20. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 <header> <article> <section> <section> <aside> <footer> <nav> section 일반적인 문서나 애플리케이션 영역 표시 섹션의 제목을 h1~h6까지 함께 사용 article 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠 표시 aside 문서의 주요 부분을 표시하고 남는 사이드바의 콘텐츠 hgroup 제목과 그의 부제목을 그루핑 header 헤더부분, 사이트 소개 또는 네베게이션 등 표시 내용중간에는 머리글 역할 footer 푸터 부분 사이트 저작관, 제작자 정보 nav 사이트안에서의 네비게이션 요소 표시
  21. 21. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://grigorlawyers.com.au/ 머리말 부분지정 메뉴삽입 | 검색창 등 <form>등을 통해 삽입 가능
  22. 22. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://miniapps.co.uk/ 제목과 부제목의 묶음 중요한 뼈대역할
  23. 23. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://zoocha.com/ 네이게이션 링크 표현 <header><footer><aside>항목에 포함가능. 위치에 영향을 받지 않음
  24. 24. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.projectfedena.org/ 네이게이션 링크 표현 독립적인 형태 가능
  25. 25. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.andydev.co.uk/blog 웹상의 실제 내용 제목의 <h3><time><p>포함
  26. 26. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.areya.de contents를 묶어주는 태그 웹에서 재배포 되어서는 안 되는 컨텐츠 지정가능
  27. 27. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.designc7.com contents를 묶어주는 태그 다른 <section>또는 <article>포함 가능
  28. 28. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 www.mmmri.com 제작자 정보나 저작권 정보
  29. 29. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기 <header> <nav> <section>
  30. 30. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기(1) 1. DOCTYPE 선언 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>산과 벗하는 산악회</title> </head>
  31. 31. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기(2) 2. <header>태그 삽입 <body> <header id="top"> <h1> 산과 벗하는 산악회 </h1> <h3> 주말 산행 뿐만 아니라 주중 산행, 무박 산행도 합니다</h3> </header>
  32. 32. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기(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>
  33. 33. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기(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>
  34. 34. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기(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>
  35. 35. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Best HTML5 Sites http://html5gallery.com http://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
  36. 36. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 REFERENCE SITE 찾아오기 - BEST 5

×