[web ui advanced] mobile web 개발하기
TRANSCRIPT
모바일����������� ������������������ WEB����������� ������������������ 개발하기
WEB UI BASIC ADVANCED
NHN����������� ������������������ NEXT����������� ������������������ 우재우
모바일����������� ������������������ 개발����������� ������������������ 기본����������� ������������������ 내용과����������� ������������������ Grid����������� ������������������ System����������� ������������������ 써보기
모바일����������� ������������������ WEB에����������� ������������������ 대응하는����������� ������������������ 방식은����������� ������������������
크게����������� ������������������ 두����������� ������������������ 가지����������� ������������������ 입니다.
1.����������� ������������������ 모바일����������� ������������������ 웹페이지를����������� ������������������ 따로����������� ������������������ 만든다.
like����������� ������������������ m.naver.com
2.����������� ������������������ 웹페이지를����������� ������������������ 반응형으로����������� ������������������ 만든다.
like����������� ������������������ http://www.slideshare.net/
따로����������� ������������������ 모바일����������� ������������������ 페이지를����������� ������������������ 만들거면����������� ������������������
굳이����������� ������������������ 이렇게����������� ������������������ 스터디하지����������� ������������������ 않아도����������� ������������������
괜찮았겠죠?����������� ������������������ ㅋㅋㅋ����������� ������������������
우리는����������� ������������������ 반응형으로����������� ������������������ 만들겁니다!!!
반응형����������� ������������������ 모바일����������� ������������������ 개발의����������� ������������������ 시작은����������� ������������������ <meta>!!!����������� ������������������
<meta>는����������� ������������������ <head>에����������� ������������������ 넣어줍니다����������� ������������������
대체����������� ������������������ <meta>는����������� ������������������ 뭐하는����������� ������������������ 녀석일까요?
<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는����������� ������������������ 페이지에����������� ������������������ 보이지는����������� ������������������ 않아요,
그러나����������� ������������������ 구문분석은����������� ������������������ 가능합니다.
<meta>����������� ������������������ 태그의����������� ������������������ 다른����������� ������������������ Attribute는����������� ������������������ 따로����������� ������������������ 공부하시고,����������� ������������������
오늘은����������� ������������������ <meta>����������� ������������������ 중에서도����������� ������������������ “viewport”!!!
viewport는����������� ������������������ 브라우저에서����������� ������������������
웹����������� ������������������ 페이지가����������� ������������������ 표시되는����������� ������������������ 영역입니다!����������� ������������������
<meta����������� ������������������ name=“viewport”>
안타깝게도����������� ������������������ viewport는����������� ������������������
아직����������� ������������������ 웹표준이����������� ������������������ 아닌����������� ������������������ 것����������� ������������������ 같습니다����������� ������������������
그리고����������� ������������������ PC����������� ������������������ 브라우저에서는����������� ������������������
무시되는����������� ������������������ 속성입니다ㅠ
<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
한����������� ������������������ 번����������� ������������������ 써봅시다!
<meta����������� ������������������ name=“viewport”����������� ������������������ content=“initial-scale=2,����������� ������������������ width=490”>
width����������� ������������������ 기본값은����������� ������������������ 무조건����������� ������������������ pc화면����������� ������������������ 980px이����������� ������������������ 기준이기����������� ������������������ 때문에����������� ������������������
모바일����������� ������������������ 기기의����������� ������������������ 화면����������� ������������������ 크기가����������� ������������������ 490이면은����������� ������������������ 화면의����������� ������������������ 반만����������� ������������������ 보이겠죠?����������� ������������������
그래서����������� ������������������ width를����������� ������������������ 490으로����������� ������������������ 잡아주면����������� ������������������ 화면에����������� ������������������ 꽉차게����������� ������������������ 보일거예요!!!
처음부터����������� ������������������ 2배����������� ������������������ 키워서����������� ������������������ 보입니당!
파...편...화
모바일����������� ������������������ 기기의����������� ������������������ 파...파...파편화����������� ������������������ 문제는����������� ������������������
우리가����������� ������������������ 어찌할����������� ������������������ 수����������� ������������������ 있는����������� ������������������
수준의����������� ������������������ 것이����������� ������������������ 아니죠
그래서����������� ������������������ width=device-width����������� ������������������ 혹은����������� ������������������ height=device-height
그래서����������� ������������������ 이것저것����������� ������������������ 써보면...
<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”>����������� ������������������ 태그를����������� ������������������ 확인해봅시다.
다음은����������� ������������������ media-query에����������� ������������������ 관한����������� ������������������ 내용입니다!
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
Media����������� ������������������ Query����������� ������������������ 기본����������� ������������������ 문법
@media����������� ������������������ [����������� ������������������ only����������� ������������������ |����������� ������������������ not����������� ������������������ ]����������� ������������������ 미디어����������� ������������������ 타입����������� ������������������ and����������� ������������������ (미디어����������� ������������������ 속성����������� ������������������ :����������� ������������������ 값)����������� ������������������ {����������� ������������������
해당����������� ������������������ CSS스타일����������� ������������������ 입력����������� ������������������
}
[참고]����������� ������������������ HTML4에서는����������� ������������������ 이렇게����������� ������������������ 썼었어요~����������� ������������������
<link����������� ������������������ rel="stylesheet"����������� ������������������ media="mediatype����������� ������������������ and|not|only����������� ������������������ (media����������� ������������������ feature)"����������� ������������������ href="mystylesheet.css">
주의!����������� ������������������
IE8에서는����������� ������������������ media����������� ������������������ query����������� ������������������ 안����������� ������������������ 먹습니다!!!����������� ������������������
IE8,����������� ������������������ 제발����������� ������������������ 좀����������� ������������������ 사라져버련ㅠ
미디어����������� ������������������ 타입:����������� ������������������ 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����������� ������������������ (미디어����������� ������������������ 속성����������� ������������������ :����������� ������������������ 값)
미디어����������� ������������������ 제한자:����������� ������������������ only����������� ������������������ or����������� ������������������ not
only와����������� ������������������ not은����������� ������������������ 미디어����������� ������������������ 타입을����������� ������������������ 제한하는����������� ������������������ 기능을����������� ������������������ 합니다.����������� ������������������
only는����������� ������������������ 해당����������� ������������������ 미디어����������� ������������������ 타입에서만����������� ������������������ 작동하는����������� ������������������ 코드가����������� ������������������ 되고,����������� ������������������
not은����������� ������������������ 해당����������� ������������������ 미디어����������� ������������������ 타입에서만����������� ������������������ 작동하지����������� ������������������ 않는����������� ������������������ 코드가����������� ������������������ 됩니다.����������� ������������������
@media����������� ������������������ [����������� ������������������ only����������� ������������������ |����������� ������������������ not����������� ������������������ ]����������� ������������������ 미디어����������� ������������������ 타입����������� ������������������ and����������� ������������������ (미디어����������� ������������������ 속성����������� ������������������ :����������� ������������������ 값)
미디어����������� ������������������ 속성
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����������� ������������������ (미디어����������� ������������������ 속성����������� ������������������ :����������� ������������������ 값)
반응형����������� ������������������ 삼대장
데스크탑/노트북����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 태블릿����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 모바일
3가지만����������� ������������������
챙기자!
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;����������� ������������������ }����������� ������������������
}
추천����������� ������������������ 사이즈
구����������� ������������������ ����������� ������������������ 분 사����������� ������������������ 이����������� ������������������ 즈
모����������� ������������������ 바����������� ������������������ 일 768px(600px)
태����������� ������������������ 블����������� ������������������ 릿 992px
PC 1200px
더����������� ������������������ 큰����������� ������������������ 화면
768px(600px)
1024px(992px)
1824px(1200px)
여기저기서����������� ������������������ 추천되는����������� ������������������ 사이즈입니다~����������� ������������������ 절대적이진����������� ������������������ 않아요!
다음은����������� ������������������ position:����������� ������������������ absolute와����������� ������������������ float를����������� ������������������ 적절히!!!
float는����������� ������������������ 화면����������� ������������������ 크기에����������� ������������������ 따라����������� ������������������ 아래로����������� ������������������ 떨어지고����������� ������������������ 흐르기����������� ������������������ 때문에����������� ������������������
화면����������� ������������������ 크기����������� ������������������ 조절(min-width,����������� ������������������ max-width)을����������� ������������������ 잘����������� ������������������ 해주셔야����������� ������������������ 합니다.����������� ������������������
어떤����������� ������������������ 크기에도����������� ������������������ 자연스럽고����������� ������������������ 적절하게����������� ������������������ 배치하는����������� ������������������ 것이����������� ������������������ 실력!!!
position:����������� ������������������ absolute로����������� ������������������ 찍으면����������� ������������������ 화면����������� ������������������ 크기����������� ������������������ 변화에����������� ������������������ 반응하지����������� ������������������ 않습니다!����������� ������������������
그러므로����������� ������������������ 고정형����������� ������������������ 레이아웃과����������� ������������������ 유동형����������� ������������������ 레이아웃을����������� ������������������ 잘����������� ������������������ 구분해서����������� ������������������
사용하는����������� ������������������ 것이����������� ������������������ 좋겠죠??
아직도����������� ������������������ CSS����������� ������������������ Layouting이����������� ������������������ 어렵다면����������� ������������������ http://www.slideshare.net/jaewoow/web-ui-basic-css2
글꼴����������� ������������������ 사이즈도����������� ������������������ 반응형!!!
글꼴����������� ������������������ 사이즈로����������� ������������������ px과����������� ������������������ em을����������� ������������������ 썼는데����������� ������������������ rem이란����������� ������������������ 것도����������� ������������������ 있습니다!!!����������� ������������������
rem은����������� ������������������ 해당����������� ������������������ <html>����������� ������������������ 태그에����������� ������������������ 지정한����������� ������������������ font-size(단위:����������� ������������������ px)에����������� ������������������
비례한다고����������� ������������������ 합니다!!!����������� ������������������
여기����������� ������������������ 포스팅����������� ������������������ 참고하시길...����������� ������������������
http://naradesign.net/wp/2014/11/06/2077/
추가로����������� ������������������ ‘%’����������� ������������������ 잘����������� ������������������ 쓰면����������� ������������������ 되는건����������� ������������������ 아시죠?
이제����������� ������������������ Grid����������� ������������������ System을����������� ������������������ 써봅시다!����������� ������������������
그����������� ������������������ 유명한����������� ������������������ 부트스트랩도����������� ������������������
grid����������� ������������������ system으로����������� ������������������ 움직인다네요;;;
실습����������� ������������������ 코드를����������� ������������������ 여기서����������� ������������������ 다운����������� ������������������ 받으세염����������� ������������������
https://github.com/WooJaeWoo/WEB_UI_BASIC/tree/master/%5BWeek6%5D%20Mobile_WEB
12����������� ������������������ Grid����������� ������������������ System
Grid����������� ������������������ System은����������� ������������������ 화면을����������� ������������������ 12개의����������� ������������������ column으로����������� ������������������ 자릅니다.
이미지출처:����������� ������������������ http://www.artcontext.org/edu/cuny/webdesign/gridSystems
굳이����������� ������������������ Grid로����������� ������������������ 나눈다면... 꼭����������� ������������������ 이렇지는����������� ������������������ 않겠지만;;;
그래,����������� ������������������ 일단����������� ������������������ 잘랐는데����������� ������������������
이게����������� ������������������ 반응형이랑����������� ������������������ 무슨����������� ������������������ 상관?
화면����������� ������������������ 사이즈가����������� ������������������ 바뀌어도����������� ������������������
그����������� ������������������ 화면을����������� ������������������ 여전히����������� ������������������ 12등분����������� ������������������ 하거든!!!
이미지출처:����������� ������������������ http://www.nextree.co.kr/p8622/
grid.css����������� ������������������ 파일을����������� ������������������ 살짝����������� ������������������ 열어서����������� ������������������ 어떻게����������� ������������������ 되어있는지����������� ������������������ 확인해봅시다.
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면����������� ������������������ 사용가능합니다!
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이����������� ������������������ 됩니다.
이거����������� ������������������ 숫자����������� ������������������ 일����������� ������������������ 아니고����������� ������������������ 영어����������� ������������������ 엘입니다!
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)����������� ������������������ 차지하게����������� ������������������ 됩니다.
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)����������� ������������������ 다����������� ������������������ 차지하게����������� ������������������ 됩니다.
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를����������� ������������������ 쓰는����������� ������������������ 것을����������� ������������������ 추천합니다!
Grid����������� ������������������ System����������� ������������������ 사용법����������� ������������������ 6단계
그리드����������� ������������������ 안에����������� ������������������ 있는����������� ������������������ 세부����������� ������������������ 태그����������� ������������������ 요소들은����������� ������������������
box-model(margin,����������� ������������������ border,����������� ������������������ padding)을����������� ������������������
이용해����������� ������������������ 원하는����������� ������������������ 곳에����������� ������������������ 배치합니다.����������� ������������������
마치����������� ������������������ position:����������� ������������������ relative안에����������� ������������������ 있는����������� ������������������
position:absolute를����������� ������������������ 다룬다는����������� ������������������ 기분으로!
Grid����������� ������������������ System의����������� ������������������ 장단점
장점
단점
media쿼리를����������� ������������������ 일일이����������� ������������������ 작업할����������� ������������������ 필요가����������� ������������������ 없어서����������� ������������������
웹페이지의����������� ������������������ 기기����������� ������������������ 대응이����������� ������������������ 편해집니다.����������� ������������������
또����������� ������������������ 격자에����������� ������������������ 맞는����������� ������������������ 디자인����������� ������������������ 덕분에����������� ������������������ 정돈된����������� ������������������ 느낌의����������� ������������������ 페이지를����������� ������������������ 만듭니다.
HTML����������� ������������������ 코드에����������� ������������������ 디자인����������� ������������������ 요소가����������� ������������������ 개입하게����������� ������������������ 되기����������� ������������������ 때문에����������� ������������������
구조와����������� ������������������ 디자인을����������� ������������������ 완벽하게����������� ������������������ 분리할����������� ������������������ 수����������� ������������������ 없습니다.
그리드����������� ������������������ 시스템을����������� ������������������ 이용해서����������� ������������������ 만들어����������� ������������������ 봅시다!!!����������� ������������������
grid.html,����������� ������������������ grid.css,����������� ������������������ grid_mission.css를����������� ������������������ 다운����������� ������������������ 받아서����������� ������������������ 손봅시당~
미션!!!
사실����������� ������������������ 우리는����������� ������������������ 아직����������� ������������������
모바일����������� ������������������ 대응����������� ������������������ JS를����������� ������������������ 건들지도����������� ������������������ 않았다!!!����������� ������������������ ㅠ_ㅠ����������� ������������������
터치����������� ������������������ 이벤트에����������� ������������������ 대해����������� ������������������ 또����������� ������������������ 준비하겠습니다~
결론
모바일����������� ������������������ WEB����������� ������������������ 개발의����������� ������������������ 가장����������� ������������������ 불편한����������� ������������������ 점은����������� ������������������ 아마도����������� ������������������ 기기의����������� ������������������ 파편화����������� ������������������ 아닐까요?����������� ������������������
오늘����������� ������������������ 스터디에서����������� ������������������ 파편화에����������� ������������������ 대응할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 이런저런����������� ������������������ 방법들을����������� ������������������
보여드렸는데,����������� ������������������ 결국����������� ������������������ 서비스의����������� ������������������ 성격에����������� ������������������ 가장����������� ������������������ 부합하는����������� ������������������ 방식을����������� ������������������ 잘����������� ������������������ 선택해서����������� ������������������
최선의����������� ������������������ UI가����������� ������������������ 나올����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 코딩하는����������� ������������������ 것이����������� ������������������ 우리의����������� ������������������ 몫이겠죠.����������� ������������������
‘정답은����������� ������������������ 없다’라는����������� ������������������ 결론이����������� ������������������ 가장����������� ������������������ 뻔하지만����������� ������������������ 맞는����������� ������������������ 얘기네요.����������� ������������������
모바일����������� ������������������ WEB����������� ������������������ 잘����������� ������������������ 공부해두면����������� ������������������ 웹앱도����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있을����������� ������������������ 것����������� ������������������ 같군요����������� ������������������ 후훗����������� ������������������ ㅋ����������� ������������������
열심히����������� ������������������ 공부합시다!!!����������� ������������������ 고생하셨습니다����������� ������������������ :)