20
대단한 기술없이, 반응형 웹 UI 만들기 윤지수 at NEXT

대단한 기술없이 반응형웹 UI 만들기

  • Upload
    -

  • View
    8.223

  • Download
    12

Embed Size (px)

DESCRIPTION

반응형웹 UI 를 적용할 수 있는 기초적인 방법들.

Citation preview

Page 1: 대단한 기술없이 반응형웹 UI 만들기

대단한����������� ������������������  기술없이,����������� ������������������  

반응형����������� ������������������  웹����������� ������������������  UI����������� ������������������  만들기����������� ������������������  !

윤지수����������� ������������������  at����������� ������������������  NEXT

Page 2: 대단한 기술없이 반응형웹 UI 만들기

반응형����������� ������������������  웹?����������� ������������������  ����������� ������������������  “오~����������� ������������������  자동으로����������� ������������������  막����������� ������������������  변화가����������� ������������������  되는����������� ������������������  UI����������� ������������������  !?”����������� ������������������  !그런데����������� ������������������  사실,����������� ������������������  모든����������� ������������������  device에서����������� ������������������  잘����������� ������������������  보이게����������� ������������������  하는����������� ������������������  UI를����������� ������������������  만드는����������� ������������������  건����������� ������������������  쉬운����������� ������������������  일은����������� ������������������  아니다.����������� ������������������  !심지어����������� ������������������  복잡한����������� ������������������  웹사이트는����������� ������������������  사이즈별����������� ������������������  다른����������� ������������������  웹UI����������� ������������������  페이지가����������� ������������������  존재…⋯����������� ������������������  당신이����������� ������������������  할����������� ������������������  수����������� ������������������  있다면����������� ������������������  그렇게����������� ������������������  하는����������� ������������������  것이����������� ������������������  사용자에게����������� ������������������  가장����������� ������������������  최적화된����������� ������������������  화면을����������� ������������������  제공할����������� ������������������  수����������� ������������������  있겠다.����������� ������������������  

!

Page 3: 대단한 기술없이 반응형웹 UI 만들기

!하지만����������� ������������������  복잡하지����������� ������������������  않은����������� ������������������  UI라면����������� ������������������  ?����������� ������������������  ����������� ������������������  

간단한����������� ������������������  설정만으로����������� ������������������  충분히����������� ������������������  반응형����������� ������������������  웹을����������� ������������������  만들����������� ������������������  수����������� ������������������  있다는����������� ������������������  사실!����������� ������������������  ����������� ������������������  !(신기루����������� ������������������  같은����������� ������������������  이야기는����������� ������������������  아니니까����������� ������������������  방심하지����������� ������������������  말자����������� ������������������  @.@����������� ������������������  )����������� ������������������  

Page 4: 대단한 기술없이 반응형웹 UI 만들기

%����������� ������������������  ,����������� ������������������  

conent=device-width����������� ������������������  ,����������� ������������������  

media-query����������� ������������������  

먼저����������� ������������������  결론,����������� ������������������  3가지만����������� ������������������  기억하기.

Page 5: 대단한 기술없이 반응형웹 UI 만들기

1.����������� ������������������  ‘%’

Page 6: 대단한 기술없이 반응형웹 UI 만들기

데탑����������� ������������������  브라우저에서의����������� ������������������  화면

Page 7: 대단한 기술없이 반응형웹 UI 만들기

적용하고자����������� ������������������  하는����������� ������������������  UI가����������� ������������������  ����������� ������������������  

고정형(px����������� ������������������  로����������� ������������������  규정한����������� ������������������  페이지)이����������� ������������������  아니라면����������� ������������������  ?����������� ������������������  ����������� ������������������  

다양하게����������� ������������������  반응하게����������� ������������������  하는����������� ������������������  건����������� ������������������  쉽다.

Page 8: 대단한 기술없이 반응형웹 UI 만들기

가로폭����������� ������������������  관련����������� ������������������  속성들을����������� ������������������  ����������� ������������������  %����������� ������������������  단위로����������� ������������������  조정만����������� ������������������  해도����������� ������������������  기기별로����������� ������������������  훌륭하게����������� ������������������  반응함.����������� ������������������  !(width,����������� ������������������  margin-left,����������� ������������������  margin-right,����������� ������������������  padding-left…⋯.)

header > div#title{! width : 90%;! margin-left: 5%;! margin-right:5%;! margin-top: 20px;! margin-bottom: 20px;! position: relative;! height : 250px;! border-radius: 0.8em;! border: 1px solid rgb(214, 214, 214);! box-shadow: 2px 2px 4px #ECECEC;! color : #1a1a1a;!}!

Page 9: 대단한 기술없이 반응형웹 UI 만들기

2.����������� ������������������  device-width

Page 10: 대단한 기술없이 반응형웹 UI 만들기

만약,����������� ������������������  ����������� ������������������  데탑����������� ������������������  웹����������� ������������������  페이지를����������� ������������������  만든����������� ������������������  후����������� ������������������  별다른����������� ������������������  설정����������� ������������������  안하고����������� ������������������  ����������� ������������������  모바일브라우저에서����������� ������������������  딱����������� ������������������  보면,����������� ������������������  

!어이없게����������� ������������������  나름����������� ������������������  볼만하다(?)����������� ������������������  !모바일브라우저가����������� ������������������  작은����������� ������������������  데탑이라고����������� ������������������  가정하고����������� ������������������  ����������� ������������������  알아서����������� ������������������  수정하여����������� ������������������  렌더링����������� ������������������  해준다.����������� ������������������  ����������� ������������������  PC버전을����������� ������������������  줌아웃����������� ������������������  한����������� ������������������  것����������� ������������������  같기도����������� ������������������  하고..����������� ������������������  마치����������� ������������������  작은����������� ������������������  모형PC에서����������� ������������������  보는����������� ������������������  것과����������� ������������������  같다.����������� ������������������  

모바일웹에서����������� ������������������  기본적으로����������� ������������������  이렇게����������� ������������������  보여지는����������� ������������������  이유는����������� ������������������  ?����������� ������������������  모바일����������� ������������������  사파리����������� ������������������  브라우저는����������� ������������������  

자동으로����������� ������������������  980픽셀����������� ������������������  크기에����������� ������������������  맞춰����������� ������������������  렌더링을����������� ������������������  한����������� ������������������  후����������� ������������������  

디바이스의����������� ������������������  뷰포트(보이는����������� ������������������  영역)에����������� ������������������  맞게����������� ������������������  줌아웃한다.

Page 11: 대단한 기술없이 반응형웹 UI 만들기

하지만,����������� ������������������  좀더����������� ������������������  모바일스럽게����������� ������������������  할����������� ������������������  수����������� ������������������  없을까?����������� ������������������  !!현재는����������� ������������������  그럭저럭����������� ������������������  보이긴����������� ������������������  하는데,,����������� ������������������  글자도����������� ������������������  좀����������� ������������������  작고����������� ������������������  가독성이����������� ������������������  떨어진다.����������� ������������������  

!

Page 12: 대단한 기술없이 반응형웹 UI 만들기

‘device-width’����������� ������������������  를����������� ������������������  적용해보자.����������� ������������������  

<meta name="viewport" content="width=device-width">

그런데,����������� ������������������  글자가����������� ������������������  지멋대로����������� ������������������  커지고����������� ������������������  레이아웃도����������� ������������������  좀����������� ������������������  엉망이다.����������� ������������������  ����������� ������������������  device가����������� ������������������  모바일에����������� ������������������  최적화되게����������� ������������������  조정하지����������� ������������������  않는����������� ������������������  거����������� ������������������  같다.����������� ������������������  !이제����������� ������������������  스타일����������� ������������������  조정을����������� ������������������  내가����������� ������������������  직접할����������� ������������������  수����������� ������������������  있다.(해야한다)

#����������� ������������������  @viewport����������� ������������������  사실����������� ������������������  viewport����������� ������������������  meta����������� ������������������  태그는����������� ������������������  정식표준으로����������� ������������������  인정받지����������� ������������������  못하고����������� ������������������  있으며,����������� ������������������  @viewport라는����������� ������������������  것이����������� ������������������  앞으로의����������� ������������������  표준으로����������� ������������������  자리����������� ������������������  잡을����������� ������������������  예정이다.����������� ������������������  

http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule

he

Page 13: 대단한 기술없이 반응형웹 UI 만들기

!

모바일에����������� ������������������  어울리게,����������� ������������������  어떻게����������� ������������������  스타일����������� ������������������  조정을����������� ������������������  해야����������� ������������������  할까?����������� ������������������  !!음..아..상식적으로다가����������� ������������������  쉽게����������� ������������������  생각해보면,,����������� ������������������  

‘특정����������� ������������������  해상도인����������� ������������������  경우에는����������� ������������������  다른����������� ������������������  스타일����������� ������������������  적용을����������� ������������������  할����������� ������������������  수����������� ������������������  있으면����������� ������������������  좋겠다’����������� ������������������  

!

Page 14: 대단한 기술없이 반응형웹 UI 만들기

3.����������� ������������������  media-query

Page 15: 대단한 기술없이 반응형웹 UI 만들기

media-query����������� ������������������  라는����������� ������������������  것을����������� ������������������  적용하면����������� ������������������  특정����������� ������������������  해상도����������� ������������������  조건인����������� ������������������  경우에만����������� ������������������  동작하는����������� ������������������  CSS����������� ������������������  를����������� ������������������  적용할����������� ������������������  수����������� ������������������  있다����������� ������������������  !����������� ������������������  

@media screen and (max-width:1100px) {!!

! div#wrap {!! ! font-size: 13px;!! }!!}

‘if’����������� ������������������  문과����������� ������������������  같다고����������� ������������������  생각하면����������� ������������������  되겠다����������� ������������������  

Page 16: 대단한 기술없이 반응형웹 UI 만들기

‘media-query’를����������� ������������������  적용

!@media screen and (max-width:401px) { div#wrap { width:100%; 1border :2px solid blue; } ! nav#top { height: 40px; } ! nav#top a { font-size: 1em; } ! header > div#title{ margin-top: 10px; margin-bottom: 10px; height : 100px; } ! #title h2 { font-size: 1.0em; } …… } !!@media screen and (min-width:402px) and (max-width:990px) { div#wrap { 1border :2px solid red; } ! #title h1 { font-size: 2.6em; } ! header > div#titlea { height : 150px; } }

특정����������� ������������������  해상도를����������� ������������������  기준으로����������� ������������������  ����������� ������������������  

font크기와����������� ������������������  ����������� ������������������  

높이값����������� ������������������  관련����������� ������������������  속성을����������� ������������������  변경했다

Page 17: 대단한 기술없이 반응형웹 UI 만들기

media-query는����������� ������������������  크게����������� ������������������  3가지만����������� ������������������  분기해도����������� ������������������  훌륭.

Mobile Tablet Desktop

Page 18: 대단한 기술없이 반응형웹 UI 만들기

android Samsung Galaxy-Nexus_4.0

android Samsung Galaxy-Note_2.3

win8.1_opera_12.16

win8_ie_10win7_ie_11

win XP chrome_25

iOS_iphone-4S iOS_iphone-5S-7.0

Page 19: 대단한 기술없이 반응형웹 UI 만들기

결론.

폭관련����������� ������������������  속성을����������� ������������������  ‘%’����������� ������������������  단위로����������� ������������������  적용해서����������� ������������������  유동적으로����������� ������������������  변경되게����������� ������������������  한다����������� ������������������  

device-width값을����������� ������������������  설정해서����������� ������������������  모바일����������� ������������������  스타일을����������� ������������������  컨트롤����������� ������������������  가능하게����������� ������������������  한다����������� ������������������  

media-query����������� ������������������  로����������� ������������������  원하는����������� ������������������  해상도별����������� ������������������  스타일����������� ������������������  조정을����������� ������������������  한다����������� ������������������  

Page 20: 대단한 기술없이 반응형웹 UI 만들기

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

참고했어요,����������� ������������������  

http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag