43
모바일 WEB 개발하기 WEB UI BASIC ADVANCED NHN NEXT 우재우 모바일 개발 기본 내용과 Grid System 써보기

[WEB UI ADVANCED] Mobile WEB 개발하기

Embed Size (px)

Citation preview

Page 1: [WEB UI ADVANCED] Mobile WEB 개발하기

모바일����������� ������������������  WEB����������� ������������������  개발하기

WEB UI BASIC ADVANCED

NHN����������� ������������������  NEXT����������� ������������������  우재우

모바일����������� ������������������  개발����������� ������������������  기본����������� ������������������  내용과����������� ������������������  Grid����������� ������������������  System����������� ������������������  써보기

Page 2: [WEB UI ADVANCED] Mobile WEB 개발하기

모바일����������� ������������������  WEB에����������� ������������������  대응하는����������� ������������������  방식은����������� ������������������  

크게����������� ������������������  두����������� ������������������  가지����������� ������������������  입니다.

Page 3: [WEB UI ADVANCED] Mobile WEB 개발하기

1.����������� ������������������  모바일����������� ������������������  웹페이지를����������� ������������������  따로����������� ������������������  만든다.

like����������� ������������������  m.naver.com

Page 4: [WEB UI ADVANCED] Mobile WEB 개발하기

2.����������� ������������������  웹페이지를����������� ������������������  반응형으로����������� ������������������  만든다.

like����������� ������������������  http://www.slideshare.net/

Page 5: [WEB UI ADVANCED] Mobile WEB 개발하기

따로����������� ������������������  모바일����������� ������������������  페이지를����������� ������������������  만들거면����������� ������������������  

굳이����������� ������������������  이렇게����������� ������������������  스터디하지����������� ������������������  않아도����������� ������������������  

괜찮았겠죠?����������� ������������������  ㅋㅋㅋ����������� ������������������  

우리는����������� ������������������  반응형으로����������� ������������������  만들겁니다!!!

Page 6: [WEB UI ADVANCED] Mobile WEB 개발하기

반응형����������� ������������������  모바일����������� ������������������  개발의����������� ������������������  시작은����������� ������������������  <meta>!!!����������� ������������������  

<meta>는����������� ������������������  <head>에����������� ������������������  넣어줍니다����������� ������������������  

대체����������� ������������������  <meta>는����������� ������������������  뭐하는����������� ������������������  녀석일까요?

Page 7: [WEB UI ADVANCED] Mobile WEB 개발하기

<meta>����������� ������������������  너는����������� ������������������  누구냐!!!

Metadata����������� ������������������  is����������� ������������������  data����������� ������������������  (information)����������� ������������������  about����������� ������������������  data.����������� ������������������  

The����������� ������������������  <meta>����������� ������������������  tag����������� ������������������  provides����������� ������������������  metadata����������� ������������������  about����������� ������������������  the����������� ������������������  HTML����������� ������������������  document.����������� ������������������  

Metadata����������� ������������������  will����������� ������������������  not����������� ������������������  be����������� ������������������  displayed����������� ������������������  on����������� ������������������  the����������� ������������������  page,����������� ������������������  

but����������� ������������������  will����������� ������������������  be����������� ������������������  machine����������� ������������������  parsable.����������� ������������������  

출처:����������� ������������������  http://www.w3schools.com/tags/tag_meta.asp

메타데이터는����������� ������������������  데이터에����������� ������������������  대한����������� ������������������  데이터����������� ������������������  입니다.

<meta>����������� ������������������  태그는����������� ������������������  HTML����������� ������������������  document에����������� ������������������  대한����������� ������������������  metadata를����������� ������������������  제공합니다.

Metadata는����������� ������������������  페이지에����������� ������������������  보이지는����������� ������������������  않아요,

그러나����������� ������������������  구문분석은����������� ������������������  가능합니다.

Page 8: [WEB UI ADVANCED] Mobile WEB 개발하기

<meta>����������� ������������������  태그의����������� ������������������  다른����������� ������������������  Attribute는����������� ������������������  따로����������� ������������������  공부하시고,����������� ������������������  

오늘은����������� ������������������  <meta>����������� ������������������  중에서도����������� ������������������  “viewport”!!!

Page 9: [WEB UI ADVANCED] Mobile WEB 개발하기

viewport는����������� ������������������  브라우저에서����������� ������������������  

웹����������� ������������������  페이지가����������� ������������������  표시되는����������� ������������������  영역입니다!����������� ������������������  

<meta����������� ������������������  name=“viewport”>

Page 10: [WEB UI ADVANCED] Mobile WEB 개발하기

안타깝게도����������� ������������������  viewport는����������� ������������������  

아직����������� ������������������  웹표준이����������� ������������������  아닌����������� ������������������  것����������� ������������������  같습니다����������� ������������������  

그리고����������� ������������������  PC����������� ������������������  브라우저에서는����������� ������������������  

무시되는����������� ������������������  속성입니다ㅠ

Page 11: [WEB UI ADVANCED] Mobile WEB 개발하기

<meta����������� ������������������  name=“viewport”����������� ������������������  content=“”>

이제����������� ������������������  여기서����������� ������������������  content를����������� ������������������  채우는����������� ������������������  것이����������� ������������������  중요합니다!!!����������� ������������������  

속성 내용 단위 기본값 허용범위 특이사항

width viewport의����������� ������������������  너비 px 980px 200����������� ������������������  ~����������� ������������������  10,000device-width����������� ������������������  지정가능

height viewport의����������� ������������������  높이 px가로화면����������� ������������������  비율에서����������� ������������������  

계산된����������� ������������������  값 200����������� ������������������  ~����������� ������������������  10,000device-height����������� ������������������  

지정가능

initial-scale 초기����������� ������������������  배율값 승수viewport에서����������� ������������������  계산된����������� ������������������  값 0����������� ������������������  ~����������� ������������������  10

minimum-scale 최소����������� ������������������  승수����������� ������������������  지정 승수 0.25 0����������� ������������������  ~����������� ������������������  10

maximum-scale 최대����������� ������������������  승수����������� ������������������  지정 승수 1.6 0����������� ������������������  ~����������� ������������������  10

user-scalable 확대,축소����������� ������������������  지원 yes,����������� ������������������  no yes

Page 12: [WEB UI ADVANCED] Mobile WEB 개발하기

한����������� ������������������  번����������� ������������������  써봅시다!

<meta����������� ������������������  name=“viewport”����������� ������������������  content=“initial-scale=2,����������� ������������������  width=490”>

width����������� ������������������  기본값은����������� ������������������  무조건����������� ������������������  pc화면����������� ������������������  980px이����������� ������������������  기준이기����������� ������������������  때문에����������� ������������������  

모바일����������� ������������������  기기의����������� ������������������  화면����������� ������������������  크기가����������� ������������������  490이면은����������� ������������������  화면의����������� ������������������  반만����������� ������������������  보이겠죠?����������� ������������������  

그래서����������� ������������������  width를����������� ������������������  490으로����������� ������������������  잡아주면����������� ������������������  화면에����������� ������������������  꽉차게����������� ������������������  보일거예요!!!

처음부터����������� ������������������  2배����������� ������������������  키워서����������� ������������������  보입니당!

Page 13: [WEB UI ADVANCED] Mobile WEB 개발하기

파...편...화

모바일����������� ������������������  기기의����������� ������������������  파...파...파편화����������� ������������������  문제는����������� ������������������  

우리가����������� ������������������  어찌할����������� ������������������  수����������� ������������������  있는����������� ������������������  

수준의����������� ������������������  것이����������� ������������������  아니죠

그래서����������� ������������������  width=device-width����������� ������������������  혹은����������� ������������������  height=device-height

Page 14: [WEB UI ADVANCED] Mobile WEB 개발하기

그래서����������� ������������������  이것저것����������� ������������������  써보면...

<meta����������� ������������������  name=“viewport”����������� ������������������  content=“initial-scale=1,����������� ������������������  

width=device-width,����������� ������������������  user-scalable=yes,����������� ������������������  ����������� ������������������  

minimum-scale=0.6,����������� ������������������  maximum-scale=1.4”>

단,����������� ������������������  user-scalable=no����������� ������������������  일����������� ������������������  경우����������� ������������������  minimum-scale과����������� ������������������  maximum-scale은����������� ������������������  무시됩니다.

m.naver.com����������� ������������������  의����������� ������������������  <meta����������� ������������������  name=“viewport”>����������� ������������������  태그를����������� ������������������  확인해봅시다.

Page 15: [WEB UI ADVANCED] Mobile WEB 개발하기

다음은����������� ������������������  media-query에����������� ������������������  관한����������� ������������������  내용입니다!

Page 16: [WEB UI ADVANCED] Mobile WEB 개발하기

Media����������� ������������������  Query??

The����������� ������������������  @media����������� ������������������  rule����������� ������������������  is����������� ������������������  used����������� ������������������  to����������� ������������������  define����������� ������������������  different����������� ������������������  style����������� ������������������  rules����������� ������������������  

for����������� ������������������  different����������� ������������������  media����������� ������������������  types/devices.

@media����������� ������������������  문법은����������� ������������������  다른����������� ������������������  미디어����������� ������������������  타입/기기에����������� ������������������  대해����������� ������������������  다른����������� ������������������  스타일����������� ������������������  규칙을����������� ������������������  정의할����������� ������������������  때����������� ������������������  쓰입니다.

출처:����������� ������������������  http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

상세한����������� ������������������  내용은����������� ������������������  W3C의����������� ������������������  문서를����������� ������������������  참고하시면����������� ������������������  예시와����������� ������������������  설명을����������� ������������������  볼����������� ������������������  수����������� ������������������  있어요!����������� ������������������  

http://www.w3.org/TR/css3-mediaqueries/#media0

Page 17: [WEB UI ADVANCED] Mobile WEB 개발하기

Media����������� ������������������  Query����������� ������������������  기본����������� ������������������  문법

@media����������� ������������������  [����������� ������������������  only����������� ������������������  |����������� ������������������  not����������� ������������������  ]����������� ������������������  미디어����������� ������������������  타입����������� ������������������  and����������� ������������������  (미디어����������� ������������������  속성����������� ������������������  :����������� ������������������  값)����������� ������������������  {����������� ������������������  

해당����������� ������������������  CSS스타일����������� ������������������  입력����������� ������������������  

}

[참고]����������� ������������������  HTML4에서는����������� ������������������  이렇게����������� ������������������  썼었어요~����������� ������������������  

<link����������� ������������������  rel="stylesheet"����������� ������������������  media="mediatype����������� ������������������  and|not|only����������� ������������������  (media����������� ������������������  feature)"����������� ������������������  href="mystylesheet.css">

Page 18: [WEB UI ADVANCED] Mobile WEB 개발하기

주의!����������� ������������������  

IE8에서는����������� ������������������  media����������� ������������������  query����������� ������������������  안����������� ������������������  먹습니다!!!����������� ������������������  

IE8,����������� ������������������  제발����������� ������������������  좀����������� ������������������  사라져버련ㅠ

Page 19: [WEB UI ADVANCED] Mobile WEB 개발하기

미디어����������� ������������������  타입:����������� ������������������  screen과����������� ������������������  print

screen은����������� ������������������  display가����������� ������������������  있는����������� ������������������  컴퓨터����������� ������������������  모바일����������� ������������������  기기에서����������� ������������������  보이는����������� ������������������  타입을����������� ������������������  말하고,����������� ������������������  

print는����������� ������������������  print����������� ������������������  style을����������� ������������������  정의할����������� ������������������  때����������� ������������������  쓴다고����������� ������������������  합니다...����������� ������������������  

일단은����������� ������������������  보이는����������� ������������������  화면을����������� ������������������  개발하니까...����������� ������������������  s..sc...screen?!?!����������� ������������������  

이외에도����������� ������������������  HTML4와����������� ������������������  CSS2까지는����������� ������������������  다양한����������� ������������������  미디어����������� ������������������  쿼리가����������� ������������������  제안되었습니다만����������� ������������������  

(all,����������� ������������������  aural(HTML4),����������� ������������������  braille,����������� ������������������  embossed(CSS2),����������� ������������������  speech(CSS2),����������� ������������������  handheld,����������� ������������������  print,����������� ������������������  projection,����������� ������������������  screen,����������� ������������������  tty,����������� ������������������  tv)

현재는����������� ������������������  all과����������� ������������������  screen,����������� ������������������  print����������� ������������������  정도로����������� ������������������  압축된����������� ������������������  것����������� ������������������  같습니다.

@media����������� ������������������  [����������� ������������������  only����������� ������������������  |����������� ������������������  not����������� ������������������  ]����������� ������������������  미디어����������� ������������������  타입����������� ������������������  and����������� ������������������  (미디어����������� ������������������  속성����������� ������������������  :����������� ������������������  값)

Page 20: [WEB UI ADVANCED] Mobile WEB 개발하기

미디어����������� ������������������  제한자:����������� ������������������  only����������� ������������������  or����������� ������������������  not

only와����������� ������������������  not은����������� ������������������  미디어����������� ������������������  타입을����������� ������������������  제한하는����������� ������������������  기능을����������� ������������������  합니다.����������� ������������������  

only는����������� ������������������  해당����������� ������������������  미디어����������� ������������������  타입에서만����������� ������������������  작동하는����������� ������������������  코드가����������� ������������������  되고,����������� ������������������  

not은����������� ������������������  해당����������� ������������������  미디어����������� ������������������  타입에서만����������� ������������������  작동하지����������� ������������������  않는����������� ������������������  코드가����������� ������������������  됩니다.����������� ������������������  

@media����������� ������������������  [����������� ������������������  only����������� ������������������  |����������� ������������������  not����������� ������������������  ]����������� ������������������  미디어����������� ������������������  타입����������� ������������������  and����������� ������������������  (미디어����������� ������������������  속성����������� ������������������  :����������� ������������������  값)

Page 21: [WEB UI ADVANCED] Mobile WEB 개발하기

미디어����������� ������������������  속성

width����������� ������������������  :����������� ������������������  웹페이지의����������� ������������������  가로����������� ������������������  길이를����������� ������������������  판단합니다.����������� ������������������  (max-나����������� ������������������  min-을����������� ������������������  붙여����������� ������������������  쓸����������� ������������������  수����������� ������������������  있습니다.)����������� ������������������  

height����������� ������������������  :����������� ������������������  웹페이지의����������� ������������������  세로����������� ������������������  길이를����������� ������������������  판단합니다.����������� ������������������  (max-나����������� ������������������  min-을����������� ������������������  붙여����������� ������������������  쓸����������� ������������������  수����������� ������������������  있습니다.)����������� ������������������  

device-width����������� ������������������  :����������� ������������������  기기의����������� ������������������  실제����������� ������������������  가로����������� ������������������  길이를����������� ������������������  판단합니다.����������� ������������������  

device-height����������� ������������������  :����������� ������������������  기기의����������� ������������������  실제����������� ������������������  세로����������� ������������������  길이를����������� ������������������  판단합니다.����������� ������������������  

orientation����������� ������������������  :����������� ������������������  ����������� ������������������  width와����������� ������������������  height을����������� ������������������  구하여����������� ������������������  width����������� ������������������  값이����������� ������������������  길면����������� ������������������  landscape로,����������� ������������������  

����������� ������������������  height����������� ������������������  값이����������� ������������������  길면����������� ������������������  portrait로����������� ������������������  판단합니다.����������� ������������������  

aspect-ratio����������� ������������������  :����������� ������������������  width/height����������� ������������������  비율을����������� ������������������  판단합니다.����������� ������������������  

device-aspect-ratio����������� ������������������  :����������� ������������������  단말기의����������� ������������������  물리적인����������� ������������������  화면����������� ������������������  비율을����������� ������������������  판단합니다.����������� ������������������  

color-index����������� ������������������  :����������� ������������������  단말기에서����������� ������������������  사용하는����������� ������������������  최대����������� ������������������  색상수를����������� ������������������  판단합니다.����������� ������������������  

monochrom����������� ������������������  :����������� ������������������  흑백����������� ������������������  컬러만을����������� ������������������  사용하는����������� ������������������  단말기에서����������� ������������������  흰색과����������� ������������������  검은색����������� ������������������  사이의����������� ������������������  단계를����������� ������������������  판단합니다.����������� ������������������  

resolution����������� ������������������  :����������� ������������������  지원하는����������� ������������������  해상도를����������� ������������������  판단합니다.����������� ������������������  

����������� ������������������  ����������� ������������������  값으로����������� ������������������  dip(인치당����������� ������������������  도트����������� ������������������  수)나����������� ������������������  dpcm(cm당����������� ������������������  도트����������� ������������������  수)를����������� ������������������  사용합니다.����������� ������������������  

color����������� ������������������  :����������� ������������������  단말기에서����������� ������������������  사용하는����������� ������������������  최대����������� ������������������  색상����������� ������������������  수의����������� ������������������  비트����������� ������������������  수를����������� ������������������  판단합니다.

@media����������� ������������������  [����������� ������������������  only����������� ������������������  |����������� ������������������  not����������� ������������������  ]����������� ������������������  미디어����������� ������������������  타입����������� ������������������  and����������� ������������������  (미디어����������� ������������������  속성����������� ������������������  :����������� ������������������  값)

Page 22: [WEB UI ADVANCED] Mobile WEB 개발하기

반응형����������� ������������������  삼대장

데스크탑/노트북����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  태블릿����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  모바일

3가지만����������� ������������������  

챙기자!

Page 23: [WEB UI ADVANCED] Mobile WEB 개발하기

CSS에����������� ������������������  넣어봅시다!

@media����������� ������������������  (max-width:����������� ������������������  400px)����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  html����������� ������������������  {����������� ������������������  background:����������� ������������������  red;����������� ������������������  }����������� ������������������  

}����������� ������������������  

@media����������� ������������������  (min-width:����������� ������������������  401px)����������� ������������������  and����������� ������������������  (max-width:����������� ������������������  800px)����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  html����������� ������������������  {����������� ������������������  background:����������� ������������������  green;����������� ������������������  }����������� ������������������  

}����������� ������������������  

@media����������� ������������������  (min-width:����������� ������������������  801px)����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  html����������� ������������������  {����������� ������������������  background:����������� ������������������  blue;����������� ������������������  }����������� ������������������  

}

Page 24: [WEB UI ADVANCED] Mobile WEB 개발하기

추천����������� ������������������  사이즈

구����������� ������������������  ����������� ������������������  분 사����������� ������������������  이����������� ������������������  즈

모����������� ������������������  바����������� ������������������  일 768px(600px)

태����������� ������������������  블����������� ������������������  릿 992px

PC 1200px

더����������� ������������������  큰����������� ������������������  화면

768px(600px)

1024px(992px)

1824px(1200px)

여기저기서����������� ������������������  추천되는����������� ������������������  사이즈입니다~����������� ������������������  절대적이진����������� ������������������  않아요!

Page 25: [WEB UI ADVANCED] Mobile WEB 개발하기

다음은����������� ������������������  position:����������� ������������������  absolute와����������� ������������������  float를����������� ������������������  적절히!!!

float는����������� ������������������  화면����������� ������������������  크기에����������� ������������������  따라����������� ������������������  아래로����������� ������������������  떨어지고����������� ������������������  흐르기����������� ������������������  때문에����������� ������������������  

화면����������� ������������������  크기����������� ������������������  조절(min-width,����������� ������������������  max-width)을����������� ������������������  잘����������� ������������������  해주셔야����������� ������������������  합니다.����������� ������������������  

어떤����������� ������������������  크기에도����������� ������������������  자연스럽고����������� ������������������  적절하게����������� ������������������  배치하는����������� ������������������  것이����������� ������������������  실력!!!

position:����������� ������������������  absolute로����������� ������������������  찍으면����������� ������������������  화면����������� ������������������  크기����������� ������������������  변화에����������� ������������������  반응하지����������� ������������������  않습니다!����������� ������������������  

그러므로����������� ������������������  고정형����������� ������������������  레이아웃과����������� ������������������  유동형����������� ������������������  레이아웃을����������� ������������������  잘����������� ������������������  구분해서����������� ������������������  

사용하는����������� ������������������  것이����������� ������������������  좋겠죠??

아직도����������� ������������������  CSS����������� ������������������  Layouting이����������� ������������������  어렵다면����������� ������������������  http://www.slideshare.net/jaewoow/web-ui-basic-css2

Page 26: [WEB UI ADVANCED] Mobile WEB 개발하기

글꼴����������� ������������������  사이즈도����������� ������������������  반응형!!!

글꼴����������� ������������������  사이즈로����������� ������������������  px과����������� ������������������  em을����������� ������������������  썼는데����������� ������������������  rem이란����������� ������������������  것도����������� ������������������  있습니다!!!����������� ������������������  

rem은����������� ������������������  해당����������� ������������������  <html>����������� ������������������  태그에����������� ������������������  지정한����������� ������������������  font-size(단위:����������� ������������������  px)에����������� ������������������  

비례한다고����������� ������������������  합니다!!!����������� ������������������  

여기����������� ������������������  포스팅����������� ������������������  참고하시길...����������� ������������������  

http://naradesign.net/wp/2014/11/06/2077/

Page 27: [WEB UI ADVANCED] Mobile WEB 개발하기

추가로����������� ������������������  ‘%’����������� ������������������  잘����������� ������������������  쓰면����������� ������������������  되는건����������� ������������������  아시죠?

Page 28: [WEB UI ADVANCED] Mobile WEB 개발하기

이제����������� ������������������  Grid����������� ������������������  System을����������� ������������������  써봅시다!����������� ������������������  

그����������� ������������������  유명한����������� ������������������  부트스트랩도����������� ������������������  

grid����������� ������������������  system으로����������� ������������������  움직인다네요;;;

Page 29: [WEB UI ADVANCED] Mobile WEB 개발하기

실습����������� ������������������  코드를����������� ������������������  여기서����������� ������������������  다운����������� ������������������  받으세염����������� ������������������  

https://github.com/WooJaeWoo/WEB_UI_BASIC/tree/master/%5BWeek6%5D%20Mobile_WEB

Page 30: [WEB UI ADVANCED] Mobile WEB 개발하기

12����������� ������������������  Grid����������� ������������������  System

Grid����������� ������������������  System은����������� ������������������  화면을����������� ������������������  12개의����������� ������������������  column으로����������� ������������������  자릅니다.

이미지출처:����������� ������������������  http://www.artcontext.org/edu/cuny/webdesign/gridSystems

Page 31: [WEB UI ADVANCED] Mobile WEB 개발하기

굳이����������� ������������������  Grid로����������� ������������������  나눈다면... 꼭����������� ������������������  이렇지는����������� ������������������  않겠지만;;;

Page 32: [WEB UI ADVANCED] Mobile WEB 개발하기

그래,����������� ������������������  일단����������� ������������������  잘랐는데����������� ������������������  

이게����������� ������������������  반응형이랑����������� ������������������  무슨����������� ������������������  상관?

Page 33: [WEB UI ADVANCED] Mobile WEB 개발하기

화면����������� ������������������  사이즈가����������� ������������������  바뀌어도����������� ������������������  

그����������� ������������������  화면을����������� ������������������  여전히����������� ������������������  12등분����������� ������������������  하거든!!!

이미지출처:����������� ������������������  http://www.nextree.co.kr/p8622/

grid.css����������� ������������������  파일을����������� ������������������  살짝����������� ������������������  열어서����������� ������������������  어떻게����������� ������������������  되어있는지����������� ������������������  확인해봅시다.

Page 34: [WEB UI ADVANCED] Mobile WEB 개발하기

Grid����������� ������������������  System����������� ������������������  사용법����������� ������������������  1단계

<div����������� ������������������  class=“row”>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m??����������� ������������������  l??></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m??����������� ������������������  l??></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m??����������� ������������������  l??></div>����������� ������������������  

</div>

그리드의����������� ������������������  기본틀은����������� ������������������  다음과����������� ������������������  같습니다.����������� ������������������  

디자인����������� ������������������  단위����������� ������������������  한����������� ������������������  줄을����������� ������������������  class=“row”로����������� ������������������  선언한����������� ������������������  뒤,����������� ������������������  

필요한����������� ������������������  column����������� ������������������  수만큼����������� ������������������  div를����������� ������������������  넣어줍니다.

굳이����������� ������������������  꼭����������� ������������������  div가����������� ������������������  아니어도����������� ������������������  block����������� ������������������  element면����������� ������������������  사용가능합니다!

Page 35: [WEB UI ADVANCED] Mobile WEB 개발하기

Grid����������� ������������������  System����������� ������������������  사용법����������� ������������������  2단계

<div����������� ������������������  class=“row”>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m??����������� ������������������  l2></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m??����������� ������������������  l4></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m??����������� ������������������  l6></div>����������� ������������������  

</div>

한����������� ������������������  row에����������� ������������������  l(큰����������� ������������������  화면)기준으로����������� ������������������  숫자의����������� ������������������  합이����������� ������������������  12가����������� ������������������  되게����������� ������������������  잡아줍니다.����������� ������������������  

이렇게����������� ������������������  되면����������� ������������������  전체����������� ������������������  화면에서의����������� ������������������  비율을����������� ������������������  잡을����������� ������������������  수����������� ������������������  있습니다.

큰����������� ������������������  사이즈����������� ������������������  화면에서����������� ������������������  한����������� ������������������  row에����������� ������������������  col����������� ������������������  div가����������� ������������������  차지하는����������� ������������������  비율이����������� ������������������  2:4:6이����������� ������������������  됩니다.

이거����������� ������������������  숫자����������� ������������������  일����������� ������������������  아니고����������� ������������������  영어����������� ������������������  엘입니다!

Page 36: [WEB UI ADVANCED] Mobile WEB 개발하기

Grid����������� ������������������  System����������� ������������������  사용법����������� ������������������  3단계

<div����������� ������������������  class=“row”>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m12����������� ������������������  l2></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m6����������� ������������������  l4></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s??����������� ������������������  m6����������� ������������������  l6></div>����������� ������������������  

</div>

한����������� ������������������  row에����������� ������������������  m(중간����������� ������������������  화면)기준으로����������� ������������������  배치하고����������� ������������������  싶은����������� ������������������  비율을����������� ������������������  정합니다.����������� ������������������  

꼭����������� ������������������  12를����������� ������������������  맞추지����������� ������������������  않아되����������� ������������������  괜찮아요,����������� ������������������  반응형으로����������� ������������������  움직일����������� ������������������  사이즈를����������� ������������������  만듭니다.

이렇게����������� ������������������  하면����������� ������������������  중간����������� ������������������  사이즈����������� ������������������  화면에서����������� ������������������  

첫번째����������� ������������������  col이����������� ������������������  한����������� ������������������  줄을����������� ������������������  다����������� ������������������  차지하고(m12),����������� ������������������  

나머지����������� ������������������  두����������� ������������������  개는����������� ������������������  화면의����������� ������������������  반씩(m6,����������� ������������������  m6)����������� ������������������  차지하게����������� ������������������  됩니다.

Page 37: [WEB UI ADVANCED] Mobile WEB 개발하기

Grid����������� ������������������  System����������� ������������������  사용법����������� ������������������  4단계

<div����������� ������������������  class=“row”>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s12����������� ������������������  m12����������� ������������������  l2></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s12����������� ������������������  m6����������� ������������������  l4></div>����������� ������������������  

<div����������� ������������������  class=“col����������� ������������������  s12����������� ������������������  m6����������� ������������������  l6></div>����������� ������������������  

</div>

같은����������� ������������������  방식으로����������� ������������������  s(작은����������� ������������������  화면)일����������� ������������������  경우에����������� ������������������  사용할����������� ������������������  비율을����������� ������������������  정합니다.

작은����������� ������������������  사이즈����������� ������������������  화면에서����������� ������������������  각각����������� ������������������  한����������� ������������������  줄씩(s12,����������� ������������������  s12,����������� ������������������  s12)����������� ������������������  다����������� ������������������  차지하게����������� ������������������  됩니다.

Page 38: [WEB UI ADVANCED] Mobile WEB 개발하기

Grid����������� ������������������  System����������� ������������������  사용법����������� ������������������  5단계

<div����������� ������������������  id=“a”����������� ������������������  class=“row”>����������� ������������������  

<div����������� ������������������  id=“b”����������� ������������������  class=“col����������� ������������������  s12����������� ������������������  m12����������� ������������������  l2></div>����������� ������������������  

<div����������� ������������������  id=“c”����������� ������������������  class=“col����������� ������������������  s12����������� ������������������  m6����������� ������������������  l4></div>����������� ������������������  

<div����������� ������������������  id=“d”����������� ������������������  class=“col����������� ������������������  s12����������� ������������������  m6����������� ������������������  l6></div>����������� ������������������  

</div>

id를����������� ������������������  정해서����������� ������������������  CSS����������� ������������������  스타일도����������� ������������������  먹일����������� ������������������  수����������� ������������������  있습니다.

클래스에����������� ������������������  이름을����������� ������������������  더����������� ������������������  추가해서����������� ������������������  스타일����������� ������������������  입히셔도����������� ������������������  무방하나����������� ������������������  

분리해서����������� ������������������  관리하는게����������� ������������������  편하므로����������� ������������������  id를����������� ������������������  쓰는����������� ������������������  것을����������� ������������������  추천합니다!

Page 39: [WEB UI ADVANCED] Mobile WEB 개발하기

Grid����������� ������������������  System����������� ������������������  사용법����������� ������������������  6단계

그리드����������� ������������������  안에����������� ������������������  있는����������� ������������������  세부����������� ������������������  태그����������� ������������������  요소들은����������� ������������������  

box-model(margin,����������� ������������������  border,����������� ������������������  padding)을����������� ������������������  

이용해����������� ������������������  원하는����������� ������������������  곳에����������� ������������������  배치합니다.����������� ������������������  

마치����������� ������������������  position:����������� ������������������  relative안에����������� ������������������  있는����������� ������������������  

position:absolute를����������� ������������������  다룬다는����������� ������������������  기분으로!

Page 40: [WEB UI ADVANCED] Mobile WEB 개발하기

Grid����������� ������������������  System의����������� ������������������  장단점

장점

단점

media쿼리를����������� ������������������  일일이����������� ������������������  작업할����������� ������������������  필요가����������� ������������������  없어서����������� ������������������  

웹페이지의����������� ������������������  기기����������� ������������������  대응이����������� ������������������  편해집니다.����������� ������������������  

또����������� ������������������  격자에����������� ������������������  맞는����������� ������������������  디자인����������� ������������������  덕분에����������� ������������������  정돈된����������� ������������������  느낌의����������� ������������������  페이지를����������� ������������������  만듭니다.

HTML����������� ������������������  코드에����������� ������������������  디자인����������� ������������������  요소가����������� ������������������  개입하게����������� ������������������  되기����������� ������������������  때문에����������� ������������������  

구조와����������� ������������������  디자인을����������� ������������������  완벽하게����������� ������������������  분리할����������� ������������������  수����������� ������������������  없습니다.

Page 41: [WEB UI ADVANCED] Mobile WEB 개발하기

그리드����������� ������������������  시스템을����������� ������������������  이용해서����������� ������������������  만들어����������� ������������������  봅시다!!!����������� ������������������  

grid.html,����������� ������������������  grid.css,����������� ������������������  grid_mission.css를����������� ������������������  다운����������� ������������������  받아서����������� ������������������  손봅시당~

미션!!!

Page 42: [WEB UI ADVANCED] Mobile WEB 개발하기

사실����������� ������������������  우리는����������� ������������������  아직����������� ������������������  

모바일����������� ������������������  대응����������� ������������������  JS를����������� ������������������  건들지도����������� ������������������  않았다!!!����������� ������������������  ㅠ_ㅠ����������� ������������������  

터치����������� ������������������  이벤트에����������� ������������������  대해����������� ������������������  또����������� ������������������  준비하겠습니다~

Page 43: [WEB UI ADVANCED] Mobile WEB 개발하기

결론

모바일����������� ������������������  WEB����������� ������������������  개발의����������� ������������������  가장����������� ������������������  불편한����������� ������������������  점은����������� ������������������  아마도����������� ������������������  기기의����������� ������������������  파편화����������� ������������������  아닐까요?����������� ������������������  

오늘����������� ������������������  스터디에서����������� ������������������  파편화에����������� ������������������  대응할����������� ������������������  수����������� ������������������  있는����������� ������������������  이런저런����������� ������������������  방법들을����������� ������������������  

보여드렸는데,����������� ������������������  결국����������� ������������������  서비스의����������� ������������������  성격에����������� ������������������  가장����������� ������������������  부합하는����������� ������������������  방식을����������� ������������������  잘����������� ������������������  선택해서����������� ������������������  

최선의����������� ������������������  UI가����������� ������������������  나올����������� ������������������  수����������� ������������������  있도록����������� ������������������  코딩하는����������� ������������������  것이����������� ������������������  우리의����������� ������������������  몫이겠죠.����������� ������������������  

‘정답은����������� ������������������  없다’라는����������� ������������������  결론이����������� ������������������  가장����������� ������������������  뻔하지만����������� ������������������  맞는����������� ������������������  얘기네요.����������� ������������������  

모바일����������� ������������������  WEB����������� ������������������  잘����������� ������������������  공부해두면����������� ������������������  웹앱도����������� ������������������  만들����������� ������������������  수����������� ������������������  있을����������� ������������������  것����������� ������������������  같군요����������� ������������������  후훗����������� ������������������  ㅋ����������� ������������������  

열심히����������� ������������������  공부합시다!!!����������� ������������������  고생하셨습니다����������� ������������������  :)