css layout

32
css layout, 효율적인 css코딩 WEBUI Advanced | 1주차

Upload: -

Post on 14-Jul-2015

733 views

Category:

Software


0 download

TRANSCRIPT

css����������� ������������������  ����������� ������������������  layout,����������� ������������������  효율적인����������� ������������������  ����������� ������������������  css코딩

WEBUI����������� ������������������  Advanced����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  1주차

css����������� ������������������  ����������� ������������������  layout,����������� ������������������  효율적인����������� ������������������  ����������� ������������������  css코딩

WEBUI����������� ������������������  Advanced����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  1주차

81

95

목표

Advanced����������� ������������������  를����������� ������������������  통해서����������� ������������������  내가����������� ������������������  무엇을����������� ������������������  잘����������� ������������������  하게����������� ������������������  될지����������� ������������������  안다.����������� ������������������  

2단,3단����������� ������������������  레이아웃을����������� ������������������  고정/유동형태로����������� ������������������  만들����������� ������������������  수����������� ������������������  있다.����������� ������������������  ����������� ������������������  

CSS코드의����������� ������������������  중복요소를����������� ������������������  없애면서����������� ������������������  코딩할����������� ������������������  수����������� ������������������  있다

먼저����������� ������������������  강의����������� ������������������  설명

WEB����������� ������������������  UI����������� ������������������  개발자

Desktop����������� ������������������  환경 Mobile����������� ������������������  Web����������� ������������������  환경

필요한����������� ������������������  WEB����������� ������������������  UI����������� ������������������  개발자

기기에����������� ������������������  상관없이����������� ������������������  잘����������� ������������������  동작하는����������� ������������������  웹UI����������� ������������������  만들����������� ������������������  수����������� ������������������  있어야해요.����������� ������������������  

UI����������� ������������������  중심의����������� ������������������  웹사이트를����������� ������������������  만들����������� ������������������  수����������� ������������������  있어야해요.����������� ������������������  

때로는����������� ������������������  휘리릭����������� ������������������  쓰으윽,����������� ������������������  화려한����������� ������������������  움직임도����������� ������������������  필요해요

HTML_JavaScriptBasic

HTML_JavaScriptAdvanced

HTML5

Mobile Web

Data Visualization

HTML_JavaScript����������� ������������������  Advanced를����������� ������������������  이해한����������� ������������������  사람����������� ������������������  ?����������� ������������������  

HTML_JavaScript����������� ������������������  Advanced를����������� ������������������  이해한����������� ������������������  사람����������� ������������������  ?����������� ������������������  

WEB����������� ������������������  UI����������� ������������������  개발을����������� ������������������  ����������� ������������������  동작가능한����������� ������������������  것����������� ������������������  이상으로,����������� ������������������  효율적이고,����������� ������������������  

품질을����������� ������������������  보장할����������� ������������������  수����������� ������������������  있고,����������� ������������������  

유지보수����������� ������������������  가능한����������� ������������������  코드로����������� ������������������  

구현할����������� ������������������  수����������� ������������������  있는����������� ������������������  사람

당신이����������� ������������������  진짜����������� ������������������  WEB����������� ������������������  UI����������� ������������������  의����������� ������������������  고수가����������� ������������������  되면����������� ������������������  좋겠음

H T M L

C S S

J a v a S c r i p t

H T M L 5

C S S 3

D O M

Object Oriented

Javascript

J a v a s c r i p t

패턴웹최적화

반응형 레이아웃

E C M A S c r i pt

W E B G r a p h i c s

S V G , C A N V A S

D A T A Visualization

E v e n t

J a v a s c r i p tM V C

n o d e J S

web socket web storage

M o b i l e W e b

J a v a s c r i p t l i b r a r y

w e b components

W E B G L

U I T e s t

b u i l d & C I

A j a x

Web����������� ������������������  UI����������� ������������������  개발에서����������� ������������������  알아야����������� ������������������  할����������� ������������������  것들Hybrid

Web App

H T M L

C S S

J a v a S c r i p t

H T M L 5

C S S 3

D O M

Object Oriented

Javascript

J a v a s c r i p t

패턴웹최적화

반응형 레이아웃

E C M A S c r i pt

W E B G r a p h i c s

S V G , C A N V A S

D A T A Visualization

E v e n t

J a v a s c r i p tM V C

n o d e J S

web socket web storage

M o b i l e W e b

J a v a s c r i p t l i b r a r y

w e b components

W E B G L

U I T e s t

b u i l d & C I

A j a x

BasicHybrid

Web App

H T M L

C S S

J a v a S c r i p t

H T M L 5

C S S 3

D O M

Object Oriented

Javascript

J a v a s c r i p t

패턴웹최적화

반응형 레이아웃

E C M A S c r i pt

W E B G r a p h i c s

S V G , C A N V A S

D A T A Visualization

E v e n t

J a v a s c r i p tM V C

n o d e J S

web socket web storage

M o b i l e W e b

J a v a s c r i p t l i b r a r y

w e b

W E B G L

U I T e s t

b u i l d & C I

A j a x

AdvancedHybrid

Web App

CSS����������� ������������������  Layout

오늘����������� ������������������  최종적으로����������� ������������������  만들����������� ������������������  것

Review

Q1)����������� ������������������  position����������� ������������������  :����������� ������������������  absolute����������� ������������������  ����������� ������������������  의����������� ������������������  기준점이����������� ������������������  될����������� ������������������  수����������� ������������������  있는����������� ������������������  position은����������� ������������������  ?

Q2)����������� ������������������  position����������� ������������������  :����������� ������������������  absolute����������� ������������������  로����������� ������������������  ����������� ������������������  이렇게����������� ������������������  할����������� ������������������  수����������� ������������������  있나요?

Q3)����������� ������������������  float����������� ������������������  로����������� ������������������  이렇게����������� ������������������  할����������� ������������������  수����������� ������������������  있나요?

미션����������� ������������������  1����������� ������������������  position으로����������� ������������������  아래����������� ������������������  비율을����������� ������������������  갖는����������� ������������������  layout����������� ������������������  만들기

70 20 44 2

미션����������� ������������������  2����������� ������������������  ����������� ������������������  float로����������� ������������������  아래����������� ������������������  비율을����������� ������������������  갖는����������� ������������������  layout����������� ������������������  만들기

70 20 44 2

미션����������� ������������������  3����������� ������������������  Three����������� ������������������  columns,����������� ������������������  fluid����������� ������������������  layout

비율 맘대로 간격 칼 같이 맞추기

미션����������� ������������������  3����������� ������������������  글자좀����������� ������������������  넣고,����������� ������������������  ����������� ������������������  

내용을����������� ������������������  채워보자~

미션����������� ������������������  4����������� ������������������  중복코드����������� ������������������  없애보자!

#a {! width : 100px;!}!!#b {! width : 100px;!}!!#c {! width : 100px;!}

#a,#b,#c {! width : 100px;!}

#a,#b,#c {! width : 100px;!}!!#a,#c,#d {! height : 300px;!}!!#a,#e {! background-color : red;!}!!….

미션����������� ������������������  4����������� ������������������  중복코드����������� ������������������  없애보자!

#a,#b,#c {! width : 100px;!}!!#a,#c,#d {! height : 300px;!}!!#a,#e {! background-color : red;!}!!….

#WIDTH_100,!#a,#b,#c {! width : 100px;!}!!#BOX_HEIGHT,!a,#c,#d {! height : 300px;!}!!#BGCOLOR_RED,!a,#e {! background-color : red;!}!!….

미션����������� ������������������  4����������� ������������������  중복코드����������� ������������������  없애보자!

����������� ������������������   1.����������� ������������������  ����������� ������������������  960.gs����������� ������������������  또는����������� ������������������  bootstrap����������� ������������������  으로����������� ������������������  간단한����������� ������������������  레이아웃을����������� ������������������  만들고����������� ������������������  github에����������� ������������������  올린다.����������� ������������������  

!����������� ������������������   2.����������� ������������������  내가����������� ������������������  자주����������� ������������������  가는����������� ������������������  웹사이트의����������� ������������������  레이아웃을����������� ������������������  어떻게����������� ������������������  구성됐는지����������� ������������������  살펴보고����������� ������������������  그����������� ������������������  방법을����������� ������������������  정리해본다����������� ������������������  

!����������� ������������������   위����������� ������������������  두����������� ������������������  가지����������� ������������������  항목을����������� ������������������  A4����������� ������������������  한장을����������� ������������������  넘지����������� ������������������  않게����������� ������������������  작성하고����������� ������������������  github에����������� ������������������  올린다.����������� ������������������  

����������� ������������������   github에는����������� ������������������  별도����������� ������������������  hw1����������� ������������������  이라는����������� ������������������  브랜치를����������� ������������������  만들어서����������� ������������������  올린다.����������� ������������������  

과제

피드백����������� ������������������  ����������� ������������������  :-)

이번주����������� ������������������  학습목표들에����������� ������������������  대해서����������� ������������������  ����������� ������������������  

수업을����������� ������������������  통해서����������� ������������������  알게����������� ������������������  된����������� ������������������  것을����������� ������������������  점수를����������� ������������������  쓰고,����������� ������������������  

왜����������� ������������������  자신이����������� ������������������  그����������� ������������������  점수인지����������� ������������������  의견달기.

피드백

1.����������� ������������������  Advanced����������� ������������������  를����������� ������������������  통해서����������� ������������������  내가����������� ������������������  무엇을����������� ������������������  잘����������� ������������������  하게����������� ������������������  될지����������� ������������������  안다.����������� ������������������  

!2.����������� ������������������  2단,3단����������� ������������������  레이아웃을����������� ������������������  고정/유동형태로����������� ������������������  만들����������� ������������������  수����������� ������������������  있다.����������� ������������������  ����������� ������������������  

!3.����������� ������������������  CSS코드의����������� ������������������  중복요소를����������� ������������������  없애면서����������� ������������������  코딩할����������� ������������������  수����������� ������������������  있다

End ;-D