62
css WEB UI Basic | 4주차

4주 CSS Layout

  • Upload
    -

  • View
    305

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 4주 CSS Layout

cssWEB����������� ������������������  UI����������� ������������������  Basic����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  4주차

Page 2: 4주 CSS Layout

목표

CSS를����������� ������������������  통해서����������� ������������������  Layout을����������� ������������������  구성하고����������� ������������������  중요한����������� ������������������  style을����������� ������������������  적용할����������� ������������������  수����������� ������������������  있다

Page 3: 4주 CSS Layout

QUIZ가����������� ������������������  없습니다.

Page 4: 4주 CSS Layout

질.답

Page 5: 4주 CSS Layout

body에만����������� ������������������  적용하는����������� ������������������  것이����������� ������������������  좋을����������� ������������������  듯

* {!! background-color: #e5e5e5!}

Page 6: 4주 CSS Layout

순서가����������� ������������������  계속����������� ������������������  고정일까?

!#gnb > ul:nth-child(1) > li > a{

Page 7: 4주 CSS Layout

기본색

color : black

Page 8: 4주 CSS Layout

높이는����������� ������������������  자식에����������� ������������������  의해서����������� ������������������  자동으로����������� ������������������  늘어남����������� ������������������  너비는����������� ������������������  ����������� ������������������  100%

height: 2000px;

Page 9: 4주 CSS Layout

일관성을����������� ������������������  위해����������� ������������������  16진수표기법을����������� ������������������  사용

color: gray;

Page 10: 4주 CSS Layout

#a1����������� ������������������  앞에����������� ������������������  header는����������� ������������������  불필요.

header > #a1> form{!! position: relative;!! display: inline;!! left: 50px;!}

Page 11: 4주 CSS Layout

공통����������� ������������������  적용인����������� ������������������  코드는����������� ������������������  맨����������� ������������������  앞으로����������� ������������������  이동

ul {!! list-style: none;!}

Page 12: 4주 CSS Layout

중앙정렬����������� ������������������  !����������� ������������������  height����������� ������������������  값과����������� ������������������  line-height를����������� ������������������  같게

line-height : 80px

Page 13: 4주 CSS Layout

바깥쪽����������� ������������������  영역����������� ������������������  감싸주기����������� ������������������  width����������� ������������������  또는����������� ������������������  min-width

https://cdn.rawgit.com/byjo/1402_Web_UI_Basic/week3/googleplay.html

Page 14: 4주 CSS Layout

width,����������� ������������������  height를����������� ������������������  차지하면서����������� ������������������  옆으로����������� ������������������  배치하려면����������� ������������������  display����������� ������������������  :����������� ������������������  inline-block����������� ������������������  

footer li{!! display: inline;!}

Page 15: 4주 CSS Layout

#참고����������� ������������������  image����������� ������������������  sprite

https://cdn.rawgit.com/luvgaram/webUI/week3/apple.html#

Page 16: 4주 CSS Layout

footer {! font-size : 32px;!}!!footer > div {! font-size : 2em;!}

footer {! font-size : 16px;!}!!footer > div {! font-size : 32px;!}

Page 17: 4주 CSS Layout

postion����������� ������������������  :����������� ������������������  static����������� ������������������  인����������� ������������������  상태라면����������� ������������������  무����������� ������������������  의미

top: 0px;!left :0;

Page 18: 4주 CSS Layout

hover����������� ������������������  한����������� ������������������  상태에서의����������� ������������������  스타일.

#fixedmenu li:hover{!! ! background-color:rgba(243,243,243,1);!!! }

Page 19: 4주 CSS Layout

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

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

중복코드����������� ������������������  정리

Page 20: 4주 CSS Layout

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

Page 21: 4주 CSS Layout

#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;!}!!….

Page 22: 4주 CSS Layout

code review

https://cdn.rawgit.com/unitimes/webui_basic/week3/week3/index.html

Page 23: 4주 CSS Layout

p o s i t i o n

Page 24: 4주 CSS Layout

CSS����������� ������������������  -����������� ������������������  position����������� ������������������  ����������� ������������������  position은����������� ������������������  element를����������� ������������������  어떻게����������� ������������������  배치할����������� ������������������  것인가를����������� ������������������  결정.����������� ������������������  

!

static

absolute

relative

fixed

Page 25: 4주 CSS Layout

static����������� ������������������  ����������� ������������������  !모든����������� ������������������  element����������� ������������������  의����������� ������������������  default����������� ������������������  값이다.����������� ������������������  ����������� ������������������  

문서의����������� ������������������  흐름대로����������� ������������������  위치가����������� ������������������  결정된다.

Page 26: 4주 CSS Layout

relative����������� ������������������  ����������� ������������������  !원래����������� ������������������  위치에����������� ������������������  상대적인����������� ������������������  위치.

div:nth-child(2) {! position : relative;! top: 30px;! left: 30px;!}

30px

30px

Page 27: 4주 CSS Layout

absolute����������� ������������������  ����������� ������������������  !절대적인����������� ������������������  위치이며����������� ������������������  문서의����������� ������������������  흐름에서����������� ������������������  제외.����������� ������������������  

기준점은����������� ������������������  상위element����������� ������������������  중����������� ������������������  static����������� ������������������  속성이����������� ������������������  아닌����������� ������������������  element����������� ������������������  

위치설정은����������� ������������������  top,����������� ������������������  bottom����������� ������������������  중����������� ������������������  한����������� ������������������  개와����������� ������������������  left,����������� ������������������  right����������� ������������������  중����������� ������������������  한개를����������� ������������������  선택해서����������� ������������������  설정����������� ������������������  

30px

30px

Page 28: 4주 CSS Layout

fixed����������� ������������������  ����������� ������������������  !진정한����������� ������������������  절대적인����������� ������������������  위치를����������� ������������������  차지����������� ������������������  

문서의����������� ������������������  흐름에서����������� ������������������  제외.����������� ������������������  

viewport(보이는����������� ������������������  화면)를����������� ������������������  기준으로����������� ������������������  위치값을����������� ������������������  가짐����������� ������������������  

http://www.nhnent.com/

Page 29: 4주 CSS Layout

relative����������� ������������������  속성의����������� ������������������  실제����������� ������������������  사용은,����������� ������������������  absolute속성을����������� ������������������  가진����������� ������������������  자식의����������� ������������������  기준점으로����������� ������������������  더����������� ������������������  많이����������� ������������������  활용됨.����������� ������������������  

absolute absolute

absolute

relative

Page 30: 4주 CSS Layout

각각의����������� ������������������  속성은����������� ������������������  무엇인가?����������� ������������������  

position ?

position ?

Page 31: 4주 CSS Layout

����������� ������������������   L a y o u t

Page 32: 4주 CSS Layout

layout은����������� ������������������  ����������� ������������������  float����������� ������������������  ,����������� ������������������  position����������� ������������������  속성을����������� ������������������  중심으로����������� ������������������  만들����������� ������������������  수����������� ������������������  있다����������� ������������������  

Page 33: 4주 CSS Layout

f l o a t

Page 34: 4주 CSS Layout

float����������� ������������������  :����������� ������������������  left;����������� ������������������  float����������� ������������������  속성을����������� ������������������  가진����������� ������������������  element는����������� ������������������  문서의����������� ������������������  흐름에서����������� ������������������  제외되고����������� ������������������  떠����������� ������������������  있는����������� ������������������  형태로����������� ������������������  되어����������� ������������������  있게����������� ������������������  됨.����������� ������������������  

출처 : http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Page 35: 4주 CSS Layout

2

1����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  float����������� ������������������  :����������� ������������������  left����������� ������������������  

}

1

2

3

1

3

Page 36: 4주 CSS Layout

1����������� ������������������  ,2����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  float����������� ������������������  :����������� ������������������  left����������� ������������������  

}

1

2

3

13 2

Page 37: 4주 CSS Layout

2����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  float����������� ������������������  :����������� ������������������  right����������� ������������������  

}

1

2

3

1

23

Page 38: 4주 CSS Layout

float는����������� ������������������  어디다가����������� ������������������  쓰나요?

Page 39: 4주 CSS Layout

float : left float:right

Page 40: 4주 CSS Layout

float : left float:right

Page 41: 4주 CSS Layout

결국����������� ������������������  요런����������� ������������������  배치가����������� ������������������  되야����������� ������������������  할텐데..

Page 42: 4주 CSS Layout

이놈은 float속성의 영향을 받지 말아야 한다

float����������� ������������������  속성에����������� ������������������  영향을����������� ������������������  받지����������� ������������������  않도록����������� ������������������  설정해야����������� ������������������  한다.

Page 43: 4주 CSS Layout

clear:both

clear:both

Page 44: 4주 CSS Layout

float속성의����������� ������������������  영향을����������� ������������������  받고����������� ������������������  싶지����������� ������������������  않는����������� ������������������  element는?����������� ������������������  

clear����������� ������������������  :����������� ������������������  left;����������� ������������������  ����������� ������������������  /*����������� ������������������  right����������� ������������������  ,both로����������� ������������������  설정����������� ������������������  */

sectionaside

footer

header

sectionaside

header

footer

Page 45: 4주 CSS Layout

그런데,,����������� ������������������  float를����������� ������������������  적용한����������� ������������������  부분은����������� ������������������  height����������� ������������������  영역에서����������� ������������������  제외되는����������� ������������������  거����������� ������������������  같다..����������� ������������������  !

float된����������� ������������������  영역도����������� ������������������  높이����������� ������������������  값을����������� ������������������  가질����������� ������������������  수����������� ������������������  있도록����������� ������������������  하려면?����������� ������������������  

overflow����������� ������������������  :����������� ������������������  auto;

Page 46: 4주 CSS Layout

fixed����������� ������������������  layout����������� ������������������  ����������� ������������������  

지금까지����������� ������������������  한����������� ������������������  것.����������� ������������������  

바깥����������� ������������������  영역을����������� ������������������  고정(fixed)한����������� ������������������  형태의����������� ������������������  

layout을����������� ������������������  설정한����������� ������������������  것임

1 2

1 2

1 2

Page 47: 4주 CSS Layout

fluid����������� ������������������  layout����������� ������������������  

화면의����������� ������������������  크기에����������� ������������������  따라서����������� ������������������  유동적으

로����������� ������������������  변경된다.

1 2

1 2

1 2

Page 48: 4주 CSS Layout

content.... aside

60����������� ������������������  %

20����������� ������������������  %

5%

5%

100%

10����������� ������������������  %

HOWTO����������� ������������������  fluid����������� ������������������  layout����������� ������������������  ?����������� ������������������  

:����������� ������������������  %����������� ������������������  

Page 49: 4주 CSS Layout

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

(margin����������� ������������������  을����������� ������������������  이용해보자)

70 20 44 2

Page 50: 4주 CSS Layout

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

70 20 44 2

Page 51: 4주 CSS Layout

미션����������� ������������������  3����������� ������������������  Three����������� ������������������  columns,����������� ������������������  fluid����������� ������������������  layout(%����������� ������������������  기반)

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

Page 52: 4주 CSS Layout

z - i n d e x

Page 53: 4주 CSS Layout

����������� ������������������  z-index

Image : http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Page 54: 4주 CSS Layout

����������� ������������������  z-index����������� ������������������  

position이����������� ������������������  static����������� ������������������  이����������� ������������������  아닌����������� ������������������  경우����������� ������������������  중첩����������� ������������������  될����������� ������������������  수����������� ������������������  있으며,����������� ������������������  

어떤����������� ������������������  것이����������� ������������������  위에����������� ������������������  있어야����������� ������������������  할지����������� ������������������  결정되야����������� ������������������  한다.����������� ������������������  

!

z-index����������� ������������������  값으로����������� ������������������  조정(숫자값)����������� ������������������  

ex)����������� ������������������  ����������� ������������������  

z-index����������� ������������������  =����������� ������������������  -10;����������� ������������������  

z-index����������� ������������������  =����������� ������������������  -1;����������� ������������������  

z-index����������� ������������������  =����������� ������������������  1;

Page 55: 4주 CSS Layout

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>

Page 56: 4주 CSS Layout

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>

Page 57: 4주 CSS Layout

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>

Page 58: 4주 CSS Layout

1 2

3

4

z-index 값이 순서대로 1,2,3,4 인경우

<div> 1 <div>3</div> <div>4</div> </div> !<div> 2 </div>

Page 59: 4주 CSS Layout

12

3

4

?

Page 60: 4주 CSS Layout

<div> 1 <div>3</div> <div>4</div> </div> !

<div> 2 </div>

z-index����������� ������������������  값을����������� ������������������  각각����������� ������������������  다르게����������� ������������������  주면서����������� ������������������  ����������� ������������������  테스트해보세요.

Page 61: 4주 CSS Layout

1

3

4 2

stacking context

Page 62: 4주 CSS Layout

End ;-D