SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
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 Basics(30m)
Website : ewd.jylee6977.com/tc (next mon)
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>
section
일반적인 문서나 애플리케이션 영역 표시
섹션의 제목을 h1~h6까지 함께 사용
article 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠 표시
aside 문서의 주요 부분을 표시하고 남는 사이드바의 콘텐츠
hgroup 제목과 그의 부제목을 그루핑
header
헤더부분, 사이트 소개 또는 네베게이션 등 표시
내용중간에는 머리글 역할
footer
푸터 부분
사이트 저작관, 제작자 정보
nav 사이트안에서의 네비게이션 요소 표시
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-equiv="Content-Type" content="text/html; charset=utf-8">
<title>산과 벗하는 산악회</title>
</head>
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
직접 해보기(2)
2. <header>태그 삽입
<body>
<header id="top">
<h1> 산과 벗하는 산악회 </h1>
<h3> 주말 산행 뿐만 아니라 주중 산행, 무박 산행도 합니다</h3>
</header>
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>
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>
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>
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
Expressive Web Application Design | WEEK 2 : FLEX.HTML5
REFERENCE SITE 찾아오기
- BEST 5

Contenu connexe

Similaire à [EWD2014]CLASS03

Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그은심 강
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그은심 강
 
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발JongKwang Kim
 
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발JongKwang Kim
 
안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기flashscope
 
[Ewd]class02 0313
[Ewd]class02 0313[Ewd]class02 0313
[Ewd]class02 0313JY LEE
 
[EWD2014]CLASS02
[EWD2014]CLASS02[EWD2014]CLASS02
[EWD2014]CLASS02JY LEE
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
[EWD2014]CLASS10
[EWD2014]CLASS10[EWD2014]CLASS10
[EWD2014]CLASS10JY LEE
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개Toby Yun
 
2015 블로그코디 회사소개서
2015 블로그코디 회사소개서2015 블로그코디 회사소개서
2015 블로그코디 회사소개서블로그코디
 
2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드Tai Hoon KIM
 

Similaire à [EWD2014]CLASS03 (20)

Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 
2. html5 시맨틱태그
2. html5 시맨틱태그2. html5 시맨틱태그
2. html5 시맨틱태그
 
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
 
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
 
안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기
 
[Ewd]class02 0313
[Ewd]class02 0313[Ewd]class02 0313
[Ewd]class02 0313
 
[EWD2014]CLASS02
[EWD2014]CLASS02[EWD2014]CLASS02
[EWD2014]CLASS02
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
2-2. html5
2-2. html52-2. html5
2-2. html5
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
[EWD2014]CLASS10
[EWD2014]CLASS10[EWD2014]CLASS10
[EWD2014]CLASS10
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
Jinyweb
JinywebJinyweb
Jinyweb
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개
 
Portfolio
PortfolioPortfolio
Portfolio
 
2015 블로그코디 회사소개서
2015 블로그코디 회사소개서2015 블로그코디 회사소개서
2015 블로그코디 회사소개서
 
2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드
 

Plus de JY LEE

[Trends]14 trend researchiv
[Trends]14 trend researchiv[Trends]14 trend researchiv
[Trends]14 trend researchivJY LEE
 
[Info14] information design iii
[Info14] information design iii[Info14] information design iii
[Info14] information design iiiJY LEE
 
[Trends]13 trend researchiii_
[Trends]13 trend researchiii_[Trends]13 trend researchiii_
[Trends]13 trend researchiii_JY LEE
 
[Info13] information design
[Info13] information design[Info13] information design
[Info13] information designJY LEE
 
[Trends]12 trend researchii_
[Trends]12 trend researchii_[Trends]12 trend researchii_
[Trends]12 trend researchii_JY LEE
 
[Info12] information design
[Info12] information design[Info12] information design
[Info12] information designJY LEE
 
[Trends]10 trend research__
[Trends]10 trend research__[Trends]10 trend research__
[Trends]10 trend research__JY LEE
 
[Trends]09 consumer trends
[Trends]09 consumer trends[Trends]09 consumer trends
[Trends]09 consumer trendsJY LEE
 
[Info10]visual leaderii
[Info10]visual leaderii[Info10]visual leaderii
[Info10]visual leaderiiJY LEE
 
[Info09]visual leaderi 은유와모델
[Info09]visual leaderi 은유와모델[Info09]visual leaderi 은유와모델
[Info09]visual leaderi 은유와모델JY LEE
 
[Trends]06 tech trends
[Trends]06 tech trends[Trends]06 tech trends
[Trends]06 tech trendsJY LEE
 
[Info06]graphical thinking
[Info06]graphical thinking[Info06]graphical thinking
[Info06]graphical thinkingJY LEE
 
[Info05]visual thinking iv
[Info05]visual thinking iv[Info05]visual thinking iv
[Info05]visual thinking ivJY LEE
 
[Trends]05 macro trends 01
[Trends]05 macro trends 01[Trends]05 macro trends 01
[Trends]05 macro trends 01JY LEE
 
[Trends]04 mega trendsii
[Trends]04 mega trendsii[Trends]04 mega trendsii
[Trends]04 mega trendsiiJY LEE
 
[Info04]visual thinkingiii
[Info04]visual thinkingiii[Info04]visual thinkingiii
[Info04]visual thinkingiiiJY LEE
 
[Trends]03 mega trends
[Trends]03 mega trends[Trends]03 mega trends
[Trends]03 mega trendsJY LEE
 
[Info03]visual thinkingii
[Info03]visual thinkingii[Info03]visual thinkingii
[Info03]visual thinkingiiJY LEE
 
[Trends]02 terms
[Trends]02 terms[Trends]02 terms
[Trends]02 termsJY LEE
 
[Info02]visual thinking
[Info02]visual thinking[Info02]visual thinking
[Info02]visual thinkingJY LEE
 

Plus de JY LEE (20)

[Trends]14 trend researchiv
[Trends]14 trend researchiv[Trends]14 trend researchiv
[Trends]14 trend researchiv
 
[Info14] information design iii
[Info14] information design iii[Info14] information design iii
[Info14] information design iii
 
[Trends]13 trend researchiii_
[Trends]13 trend researchiii_[Trends]13 trend researchiii_
[Trends]13 trend researchiii_
 
[Info13] information design
[Info13] information design[Info13] information design
[Info13] information design
 
[Trends]12 trend researchii_
[Trends]12 trend researchii_[Trends]12 trend researchii_
[Trends]12 trend researchii_
 
[Info12] information design
[Info12] information design[Info12] information design
[Info12] information design
 
[Trends]10 trend research__
[Trends]10 trend research__[Trends]10 trend research__
[Trends]10 trend research__
 
[Trends]09 consumer trends
[Trends]09 consumer trends[Trends]09 consumer trends
[Trends]09 consumer trends
 
[Info10]visual leaderii
[Info10]visual leaderii[Info10]visual leaderii
[Info10]visual leaderii
 
[Info09]visual leaderi 은유와모델
[Info09]visual leaderi 은유와모델[Info09]visual leaderi 은유와모델
[Info09]visual leaderi 은유와모델
 
[Trends]06 tech trends
[Trends]06 tech trends[Trends]06 tech trends
[Trends]06 tech trends
 
[Info06]graphical thinking
[Info06]graphical thinking[Info06]graphical thinking
[Info06]graphical thinking
 
[Info05]visual thinking iv
[Info05]visual thinking iv[Info05]visual thinking iv
[Info05]visual thinking iv
 
[Trends]05 macro trends 01
[Trends]05 macro trends 01[Trends]05 macro trends 01
[Trends]05 macro trends 01
 
[Trends]04 mega trendsii
[Trends]04 mega trendsii[Trends]04 mega trendsii
[Trends]04 mega trendsii
 
[Info04]visual thinkingiii
[Info04]visual thinkingiii[Info04]visual thinkingiii
[Info04]visual thinkingiii
 
[Trends]03 mega trends
[Trends]03 mega trends[Trends]03 mega trends
[Trends]03 mega trends
 
[Info03]visual thinkingii
[Info03]visual thinkingii[Info03]visual thinkingii
[Info03]visual thinkingii
 
[Trends]02 terms
[Trends]02 terms[Trends]02 terms
[Trends]02 terms
 
[Info02]visual thinking
[Info02]visual thinking[Info02]visual thinking
[Info02]visual thinking
 

[EWD2014]CLASS03

  • 1. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 익스프레시브 웹 응용 디자인 Expressive Web Application Design
  • 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. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 4. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 5. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 6. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 7. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 8. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 9. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 10. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://flatuicolors.com/
  • 11. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 12. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Typography & Unique Web Copy
  • 13. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Visual Effect Adobe Edge CodePen http://codepen.io/
  • 14. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Fixed Navigation
  • 15. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Responsive Design Must
  • 16. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Personal Portraits
  • 17. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 Short presentation video
  • 18. Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  • 19. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 <div> <div> <div> <header> <nav> <section>
  • 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. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://grigorlawyers.com.au/ 머리말 부분지정 메뉴삽입 | 검색창 등 <form>등을 통해 삽입 가능
  • 22. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://miniapps.co.uk/ 제목과 부제목의 묶음 중요한 뼈대역할
  • 23. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://zoocha.com/ 네이게이션 링크 표현 <header><footer><aside>항목에 포함가능. 위치에 영향을 받지 않음
  • 24. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.projectfedena.org/ 네이게이션 링크 표현 독립적인 형태 가능
  • 25. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.andydev.co.uk/blog 웹상의 실제 내용 제목의 <h3><time><p>포함
  • 26. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.areya.de contents를 묶어주는 태그 웹에서 재배포 되어서는 안 되는 컨텐츠 지정가능
  • 27. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 http://www.designc7.com contents를 묶어주는 태그 다른 <section>또는 <article>포함 가능
  • 28. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 www.mmmri.com 제작자 정보나 저작권 정보
  • 29. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기 <header> <nav> <section>
  • 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. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 직접 해보기(2) 2. <header>태그 삽입 <body> <header id="top"> <h1> 산과 벗하는 산악회 </h1> <h3> 주말 산행 뿐만 아니라 주중 산행, 무박 산행도 합니다</h3> </header>
  • 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. 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. 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. 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. Expressive Web Application Design | WEEK 2 : FLEX.HTML5 REFERENCE SITE 찾아오기 - BEST 5