�ݺ�ߣ

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://flatuicolors.com/

Typography & Unique Web Copy

Visual Effect Adobe Edge
CodePen
http://codepen.io/

Fixed Navigation

Responsive Design Must

Personal Portraits

Short presentation video

<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://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.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

REFERENCE SITE 찾아오기
- BEST 5

�ݺ�ߣ

[EWD2014]CLASS03

Recommended

More Related Content

Similar to [EWD2014]CLASS03 (20)

More from JY LEE (20)

[EWD2014]CLASS03