css����������� ������������������ ����������� ������������������ layout,����������� ������������������ 효율적인����������� ������������������ ����������� ������������������ css코딩
WEBUI����������� ������������������ Advanced����������� ������������������ ����������� ������������������ |����������� ������������������ ����������� ������������������ ����������� ������������������ 1주차
css����������� ������������������ ����������� ������������������ layout,����������� ������������������ 효율적인����������� ������������������ ����������� ������������������ css코딩
WEBUI����������� ������������������ Advanced����������� ������������������ ����������� ������������������ |����������� ������������������ ����������� ������������������ ����������� ������������������ 1주차
목표
Advanced����������� ������������������ 를����������� ������������������ 통해서����������� ������������������ 내가����������� ������������������ 무엇을����������� ������������������ 잘����������� ������������������ 하게����������� ������������������ 될지����������� ������������������ 안다.����������� ������������������
2단,3단����������� ������������������ 레이아웃을����������� ������������������ 고정/유동형태로����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있다.����������� ������������������ ����������� ������������������
CSS코드의����������� ������������������ 중복요소를����������� ������������������ 없애면서����������� ������������������ 코딩할����������� ������������������ 수����������� ������������������ 있다
WEB����������� ������������������ UI����������� ������������������ 개발자
Desktop����������� ������������������ 환경 Mobile����������� ������������������ Web����������� ������������������ 환경
필요한����������� ������������������ WEB����������� ������������������ UI����������� ������������������ 개발자
기기에����������� ������������������ 상관없이����������� ������������������ 잘����������� ������������������ 동작하는����������� ������������������ 웹UI����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있어야해요.����������� ������������������
UI����������� ������������������ 중심의����������� ������������������ 웹사이트를����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있어야해요.����������� ������������������
때로는����������� ������������������ 휘리릭����������� ������������������ 쓰으윽,����������� ������������������ 화려한����������� ������������������ 움직임도����������� ������������������ 필요해요
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
오늘����������� ������������������ 최종적으로����������� ������������������ 만들����������� ������������������ 것
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코드의����������� ������������������ 중복요소를����������� ������������������ 없애면서����������� ������������������ 코딩할����������� ������������������ 수����������� ������������������ 있다