Upload
-
View
8.223
Download
12
Embed Size (px)
DESCRIPTION
반응형웹 UI 를 적용할 수 있는 기초적인 방법들.
Citation preview
대단한����������� ������������������ 기술없이,����������� ������������������
반응형����������� ������������������ 웹����������� ������������������ UI����������� ������������������ 만들기����������� ������������������ !
윤지수����������� ������������������ at����������� ������������������ NEXT
반응형����������� ������������������ 웹?����������� ������������������ ����������� ������������������ “오~����������� ������������������ 자동으로����������� ������������������ 막����������� ������������������ 변화가����������� ������������������ 되는����������� ������������������ UI����������� ������������������ !?”����������� ������������������ !그런데����������� ������������������ 사실,����������� ������������������ 모든����������� ������������������ device에서����������� ������������������ 잘����������� ������������������ 보이게����������� ������������������ 하는����������� ������������������ UI를����������� ������������������ 만드는����������� ������������������ 건����������� ������������������ 쉬운����������� ������������������ 일은����������� ������������������ 아니다.����������� ������������������ !심지어����������� ������������������ 복잡한����������� ������������������ 웹사이트는����������� ������������������ 사이즈별����������� ������������������ 다른����������� ������������������ 웹UI����������� ������������������ 페이지가����������� ������������������ 존재…⋯����������� ������������������ 당신이����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있다면����������� ������������������ 그렇게����������� ������������������ 하는����������� ������������������ 것이����������� ������������������ 사용자에게����������� ������������������ 가장����������� ������������������ 최적화된����������� ������������������ 화면을����������� ������������������ 제공할����������� ������������������ 수����������� ������������������ 있겠다.����������� ������������������
!
!하지만����������� ������������������ 복잡하지����������� ������������������ 않은����������� ������������������ UI라면����������� ������������������ ?����������� ������������������ ����������� ������������������
간단한����������� ������������������ 설정만으로����������� ������������������ 충분히����������� ������������������ 반응형����������� ������������������ 웹을����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있다는����������� ������������������ 사실!����������� ������������������ ����������� ������������������ !(신기루����������� ������������������ 같은����������� ������������������ 이야기는����������� ������������������ 아니니까����������� ������������������ 방심하지����������� ������������������ 말자����������� ������������������ @.@����������� ������������������ )����������� ������������������
%����������� ������������������ ,����������� ������������������
conent=device-width����������� ������������������ ,����������� ������������������
media-query����������� ������������������
먼저����������� ������������������ 결론,����������� ������������������ 3가지만����������� ������������������ 기억하기.
1.����������� ������������������ ‘%’
데탑����������� ������������������ 브라우저에서의����������� ������������������ 화면
적용하고자����������� ������������������ 하는����������� ������������������ UI가����������� ������������������ ����������� ������������������
고정형(px����������� ������������������ 로����������� ������������������ 규정한����������� ������������������ 페이지)이����������� ������������������ 아니라면����������� ������������������ ?����������� ������������������ ����������� ������������������
다양하게����������� ������������������ 반응하게����������� ������������������ 하는����������� ������������������ 건����������� ������������������ 쉽다.
가로폭����������� ������������������ 관련����������� ������������������ 속성들을����������� ������������������ ����������� ������������������ %����������� ������������������ 단위로����������� ������������������ 조정만����������� ������������������ 해도����������� ������������������ 기기별로����������� ������������������ 훌륭하게����������� ������������������ 반응함.����������� ������������������ !(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;!}!
2.����������� ������������������ device-width
만약,����������� ������������������ ����������� ������������������ 데탑����������� ������������������ 웹����������� ������������������ 페이지를����������� ������������������ 만든����������� ������������������ 후����������� ������������������ 별다른����������� ������������������ 설정����������� ������������������ 안하고����������� ������������������ ����������� ������������������ 모바일브라우저에서����������� ������������������ 딱����������� ������������������ 보면,����������� ������������������
!어이없게����������� ������������������ 나름����������� ������������������ 볼만하다(?)����������� ������������������ !모바일브라우저가����������� ������������������ 작은����������� ������������������ 데탑이라고����������� ������������������ 가정하고����������� ������������������ ����������� ������������������ 알아서����������� ������������������ 수정하여����������� ������������������ 렌더링����������� ������������������ 해준다.����������� ������������������ ����������� ������������������ PC버전을����������� ������������������ 줌아웃����������� ������������������ 한����������� ������������������ 것����������� ������������������ 같기도����������� ������������������ 하고..����������� ������������������ 마치����������� ������������������ 작은����������� ������������������ 모형PC에서����������� ������������������ 보는����������� ������������������ 것과����������� ������������������ 같다.����������� ������������������
모바일웹에서����������� ������������������ 기본적으로����������� ������������������ 이렇게����������� ������������������ 보여지는����������� ������������������ 이유는����������� ������������������ ?����������� ������������������ 모바일����������� ������������������ 사파리����������� ������������������ 브라우저는����������� ������������������
자동으로����������� ������������������ 980픽셀����������� ������������������ 크기에����������� ������������������ 맞춰����������� ������������������ 렌더링을����������� ������������������ 한����������� ������������������ 후����������� ������������������
디바이스의����������� ������������������ 뷰포트(보이는����������� ������������������ 영역)에����������� ������������������ 맞게����������� ������������������ 줌아웃한다.
하지만,����������� ������������������ 좀더����������� ������������������ 모바일스럽게����������� ������������������ 할����������� ������������������ 수����������� ������������������ 없을까?����������� ������������������ !!현재는����������� ������������������ 그럭저럭����������� ������������������ 보이긴����������� ������������������ 하는데,,����������� ������������������ 글자도����������� ������������������ 좀����������� ������������������ 작고����������� ������������������ 가독성이����������� ������������������ 떨어진다.����������� ������������������
!
‘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
!
모바일에����������� ������������������ 어울리게,����������� ������������������ 어떻게����������� ������������������ 스타일����������� ������������������ 조정을����������� ������������������ 해야����������� ������������������ 할까?����������� ������������������ !!음..아..상식적으로다가����������� ������������������ 쉽게����������� ������������������ 생각해보면,,����������� ������������������
‘특정����������� ������������������ 해상도인����������� ������������������ 경우에는����������� ������������������ 다른����������� ������������������ 스타일����������� ������������������ 적용을����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있으면����������� ������������������ 좋겠다’����������� ������������������
!
3.����������� ������������������ media-query
media-query����������� ������������������ 라는����������� ������������������ 것을����������� ������������������ 적용하면����������� ������������������ 특정����������� ������������������ 해상도����������� ������������������ 조건인����������� ������������������ 경우에만����������� ������������������ 동작하는����������� ������������������ CSS����������� ������������������ 를����������� ������������������ 적용할����������� ������������������ 수����������� ������������������ 있다����������� ������������������ !����������� ������������������
@media screen and (max-width:1100px) {!!
! div#wrap {!! ! font-size: 13px;!! }!!}
‘if’����������� ������������������ 문과����������� ������������������ 같다고����������� ������������������ 생각하면����������� ������������������ 되겠다����������� ������������������
‘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크기와����������� ������������������ ����������� ������������������
높이값����������� ������������������ 관련����������� ������������������ 속성을����������� ������������������ 변경했다
media-query는����������� ������������������ 크게����������� ������������������ 3가지만����������� ������������������ 분기해도����������� ������������������ 훌륭.
Mobile Tablet Desktop
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
결론.
폭관련����������� ������������������ 속성을����������� ������������������ ‘%’����������� ������������������ 단위로����������� ������������������ 적용해서����������� ������������������ 유동적으로����������� ������������������ 변경되게����������� ������������������ 한다����������� ������������������
device-width값을����������� ������������������ 설정해서����������� ������������������ 모바일����������� ������������������ 스타일을����������� ������������������ 컨트롤����������� ������������������ 가능하게����������� ������������������ 한다����������� ������������������
media-query����������� ������������������ 로����������� ������������������ 원하는����������� ������������������ 해상도별����������� ������������������ 스타일����������� ������������������ 조정을����������� ������������������ 한다����������� ������������������
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