View
305
Download
0
Category
Preview:
Citation preview
cssWEB����������� ������������������ UI����������� ������������������ Basic����������� ������������������ ����������� ������������������ |����������� ������������������ ����������� ������������������ ����������� ������������������ 4주차
목표
CSS를����������� ������������������ 통해서����������� ������������������ Layout을����������� ������������������ 구성하고����������� ������������������ 중요한����������� ������������������ style을����������� ������������������ 적용할����������� ������������������ 수����������� ������������������ 있다
QUIZ가����������� ������������������ 없습니다.
질.답
body에만����������� ������������������ 적용하는����������� ������������������ 것이����������� ������������������ 좋을����������� ������������������ 듯
* {!! background-color: #e5e5e5!}
순서가����������� ������������������ 계속����������� ������������������ 고정일까?
!#gnb > ul:nth-child(1) > li > a{
기본색
color : black
높이는����������� ������������������ 자식에����������� ������������������ 의해서����������� ������������������ 자동으로����������� ������������������ 늘어남����������� ������������������ 너비는����������� ������������������ ����������� ������������������ 100%
height: 2000px;
일관성을����������� ������������������ 위해����������� ������������������ 16진수표기법을����������� ������������������ 사용
color: gray;
#a1����������� ������������������ 앞에����������� ������������������ header는����������� ������������������ 불필요.
header > #a1> form{!! position: relative;!! display: inline;!! left: 50px;!}
공통����������� ������������������ 적용인����������� ������������������ 코드는����������� ������������������ 맨����������� ������������������ 앞으로����������� ������������������ 이동
ul {!! list-style: none;!}
중앙정렬����������� ������������������ !����������� ������������������ height����������� ������������������ 값과����������� ������������������ line-height를����������� ������������������ 같게
line-height : 80px
바깥쪽����������� ������������������ 영역����������� ������������������ 감싸주기����������� ������������������ width����������� ������������������ 또는����������� ������������������ min-width
https://cdn.rawgit.com/byjo/1402_Web_UI_Basic/week3/googleplay.html
width,����������� ������������������ height를����������� ������������������ 차지하면서����������� ������������������ 옆으로����������� ������������������ 배치하려면����������� ������������������ display����������� ������������������ :����������� ������������������ inline-block����������� ������������������
footer li{!! display: inline;!}
#참고����������� ������������������ image����������� ������������������ sprite
https://cdn.rawgit.com/luvgaram/webUI/week3/apple.html#
footer {! font-size : 32px;!}!!footer > div {! font-size : 2em;!}
footer {! font-size : 16px;!}!!footer > div {! font-size : 32px;!}
postion����������� ������������������ :����������� ������������������ static����������� ������������������ 인����������� ������������������ 상태라면����������� ������������������ 무����������� ������������������ 의미
top: 0px;!left :0;
hover����������� ������������������ 한����������� ������������������ 상태에서의����������� ������������������ 스타일.
#fixedmenu li:hover{!! ! background-color:rgba(243,243,243,1);!!! }
#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;!}!!….
#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;!}!!….
code review
https://cdn.rawgit.com/unitimes/webui_basic/week3/week3/index.html
p o s i t i o n
CSS����������� ������������������ -����������� ������������������ position����������� ������������������ ����������� ������������������ position은����������� ������������������ element를����������� ������������������ 어떻게����������� ������������������ 배치할����������� ������������������ 것인가를����������� ������������������ 결정.����������� ������������������
!
static
absolute
relative
fixed
static����������� ������������������ ����������� ������������������ !모든����������� ������������������ element����������� ������������������ 의����������� ������������������ default����������� ������������������ 값이다.����������� ������������������ ����������� ������������������
문서의����������� ������������������ 흐름대로����������� ������������������ 위치가����������� ������������������ 결정된다.
relative����������� ������������������ ����������� ������������������ !원래����������� ������������������ 위치에����������� ������������������ 상대적인����������� ������������������ 위치.
div:nth-child(2) {! position : relative;! top: 30px;! left: 30px;!}
30px
30px
absolute����������� ������������������ ����������� ������������������ !절대적인����������� ������������������ 위치이며����������� ������������������ 문서의����������� ������������������ 흐름에서����������� ������������������ 제외.����������� ������������������
기준점은����������� ������������������ 상위element����������� ������������������ 중����������� ������������������ static����������� ������������������ 속성이����������� ������������������ 아닌����������� ������������������ element����������� ������������������
위치설정은����������� ������������������ top,����������� ������������������ bottom����������� ������������������ 중����������� ������������������ 한����������� ������������������ 개와����������� ������������������ left,����������� ������������������ right����������� ������������������ 중����������� ������������������ 한개를����������� ������������������ 선택해서����������� ������������������ 설정����������� ������������������
30px
30px
fixed����������� ������������������ ����������� ������������������ !진정한����������� ������������������ 절대적인����������� ������������������ 위치를����������� ������������������ 차지����������� ������������������
문서의����������� ������������������ 흐름에서����������� ������������������ 제외.����������� ������������������
viewport(보이는����������� ������������������ 화면)를����������� ������������������ 기준으로����������� ������������������ 위치값을����������� ������������������ 가짐����������� ������������������
http://www.nhnent.com/
relative����������� ������������������ 속성의����������� ������������������ 실제����������� ������������������ 사용은,����������� ������������������ absolute속성을����������� ������������������ 가진����������� ������������������ 자식의����������� ������������������ 기준점으로����������� ������������������ 더����������� ������������������ 많이����������� ������������������ 활용됨.����������� ������������������
absolute absolute
absolute
relative
각각의����������� ������������������ 속성은����������� ������������������ 무엇인가?����������� ������������������
position ?
position ?
����������� ������������������ L a y o u t
layout은����������� ������������������ ����������� ������������������ float����������� ������������������ ,����������� ������������������ position����������� ������������������ 속성을����������� ������������������ 중심으로����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있다����������� ������������������
f l o a t
float����������� ������������������ :����������� ������������������ left;����������� ������������������ float����������� ������������������ 속성을����������� ������������������ 가진����������� ������������������ element는����������� ������������������ 문서의����������� ������������������ 흐름에서����������� ������������������ 제외되고����������� ������������������ 떠����������� ������������������ 있는����������� ������������������ 형태로����������� ������������������ 되어����������� ������������������ 있게����������� ������������������ 됨.����������� ������������������
출처 : http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
2
1����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ float����������� ������������������ :����������� ������������������ left����������� ������������������
}
1
2
3
1
3
1����������� ������������������ ,2����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ float����������� ������������������ :����������� ������������������ left����������� ������������������
}
1
2
3
13 2
2����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ float����������� ������������������ :����������� ������������������ right����������� ������������������
}
1
2
3
1
23
float는����������� ������������������ 어디다가����������� ������������������ 쓰나요?
float : left float:right
float : left float:right
결국����������� ������������������ 요런����������� ������������������ 배치가����������� ������������������ 되야����������� ������������������ 할텐데..
이놈은 float속성의 영향을 받지 말아야 한다
float����������� ������������������ 속성에����������� ������������������ 영향을����������� ������������������ 받지����������� ������������������ 않도록����������� ������������������ 설정해야����������� ������������������ 한다.
clear:both
clear:both
float속성의����������� ������������������ 영향을����������� ������������������ 받고����������� ������������������ 싶지����������� ������������������ 않는����������� ������������������ element는?����������� ������������������
clear����������� ������������������ :����������� ������������������ left;����������� ������������������ ����������� ������������������ /*����������� ������������������ right����������� ������������������ ,both로����������� ������������������ 설정����������� ������������������ */
sectionaside
footer
header
sectionaside
header
footer
그런데,,����������� ������������������ float를����������� ������������������ 적용한����������� ������������������ 부분은����������� ������������������ height����������� ������������������ 영역에서����������� ������������������ 제외되는����������� ������������������ 거����������� ������������������ 같다..����������� ������������������ !
float된����������� ������������������ 영역도����������� ������������������ 높이����������� ������������������ 값을����������� ������������������ 가질����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 하려면?����������� ������������������
overflow����������� ������������������ :����������� ������������������ auto;
fixed����������� ������������������ layout����������� ������������������ ����������� ������������������
지금까지����������� ������������������ 한����������� ������������������ 것.����������� ������������������
바깥����������� ������������������ 영역을����������� ������������������ 고정(fixed)한����������� ������������������ 형태의����������� ������������������
layout을����������� ������������������ 설정한����������� ������������������ 것임
1 2
1 2
1 2
fluid����������� ������������������ layout����������� ������������������
화면의����������� ������������������ 크기에����������� ������������������ 따라서����������� ������������������ 유동적으
로����������� ������������������ 변경된다.
1 2
1 2
1 2
content.... aside
60����������� ������������������ %
20����������� ������������������ %
5%
5%
100%
10����������� ������������������ %
HOWTO����������� ������������������ fluid����������� ������������������ layout����������� ������������������ ?����������� ������������������
:����������� ������������������ %����������� ������������������
미션����������� ������������������ 1����������� ������������������ position으로����������� ������������������ 아래����������� ������������������ 비율을����������� ������������������ 갖는����������� ������������������ layout����������� ������������������ 만들기����������� ������������������
(margin����������� ������������������ 을����������� ������������������ 이용해보자)
70 20 44 2
미션����������� ������������������ 2����������� ������������������ ����������� ������������������ float로����������� ������������������ 아래����������� ������������������ 비율을����������� ������������������ 갖는����������� ������������������ layout����������� ������������������ 만들기
70 20 44 2
미션����������� ������������������ 3����������� ������������������ Three����������� ������������������ columns,����������� ������������������ fluid����������� ������������������ layout(%����������� ������������������ 기반)
비율 맘대로 간격 칼 같이 맞추기
z - i n d e x
����������� ������������������ z-index
Image : http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
����������� ������������������ z-index����������� ������������������
position이����������� ������������������ static����������� ������������������ 이����������� ������������������ 아닌����������� ������������������ 경우����������� ������������������ 중첩����������� ������������������ 될����������� ������������������ 수����������� ������������������ 있으며,����������� ������������������
어떤����������� ������������������ 것이����������� ������������������ 위에����������� ������������������ 있어야����������� ������������������ 할지����������� ������������������ 결정되야����������� ������������������ 한다.����������� ������������������
!
z-index����������� ������������������ 값으로����������� ������������������ 조정(숫자값)����������� ������������������
ex)����������� ������������������ ����������� ������������������
z-index����������� ������������������ =����������� ������������������ -10;����������� ������������������
z-index����������� ������������������ =����������� ������������������ -1;����������� ������������������
z-index����������� ������������������ =����������� ������������������ 1;
div { width : 100px; height : 100px; position: absolute; } !#top { background-color : gold; top : 10px; left : 10px; } !#middle { background-color : silver; top : 30px; left : 30px; } !#bottom { background-color : coral; top : 50px; left : 50px; }
<div id="top"></div> <div id="middle"></div> <div id="bottom"></div>
div { width : 100px; height : 100px; position: absolute; } !#top { background-color : gold; top : 10px; left : 10px; z-index : 0; } !#middle { background-color : silver; top : 30px; left : 30px; z-index : 0; } !#bottom { background-color : coral; top : 50px; left : 50px; z-index : 0; }
<div id="top"></div> <div id="middle"></div> <div id="bottom"></div>
div { width : 100px; height : 100px; position: absolute; } !#top { background-color : gold; top : 10px; left : 10px; z-index : 1; } !#middle { background-color : silver; top : 30px; left : 30px; z-index : 0; } !#bottom { background-color : coral; top : 50px; left : 50px; z-index : -1; }
<div id="top"></div> <div id="middle"></div> <div id="bottom"></div>
1 2
3
4
z-index 값이 순서대로 1,2,3,4 인경우
<div> 1 <div>3</div> <div>4</div> </div> !<div> 2 </div>
12
3
4
?
<div> 1 <div>3</div> <div>4</div> </div> !
<div> 2 </div>
z-index����������� ������������������ 값을����������� ������������������ 각각����������� ������������������ 다르게����������� ������������������ 주면서����������� ������������������ ����������� ������������������ 테스트해보세요.
1
3
4 2
stacking context
End ;-D
Recommended