이전
목록
다음
전

가변형 레이아웃 관련

전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-04-25 (수) 06:37:45 · 4889 · 3

링크

http://blog.gnuboard.org/2012/04/multi-device-layout/ (313)

제 블로그 글을 요약했습니다. :)

Multi-Device Layout Patterns - LukeW : mediaqueri.es 의 반응형 사이트들의 레이아웃 패턴을 5가지로 구분 (이미지 출처는 원글)

   1. Mostly Fluid: 가장 많이 사용되는 방법으로, 데스크탑 화면에서 (좌우 넓은 여백과 함께) 유동형 그리드 (fluid grid)들이 여러 컬럼으로 배치되고, 화면 폭이 특정 크기 이하가 되면 그리드들이 선형화 되는 구조.

   2. Column Drop: 스크린의 크기가 작아지면서, 여러 컬럼들 중 (주로 오른쪽 부터) 하나씩 아래로 이동하는 형태. 각 컬럼의 폭은, mostly fluid와는 달리, 유지되는 형태.

   3. Layout Shifter: 화면 크기에 따라서 레이아웃이 크게 변하는 형태. 화면별 레이아웃을 별도로 구성해야 하는, 반응형 웹의 실험적 시도.

   4. Tiny Tweaks: 대부분 하나의 컬럼을 사용하고, 화면 폭 변화에 아주 약간의 조정만 하는 형태. 주로 글 내용을 중시하는 블로그들에서 사용.

   5. Off Canvas: 가장 혁신적인 방법 중에 하나로써, 많은 native app에서 사용하는, 화면의 바깥에 다른 컬럼들을 배치하여 필요할때만 원하는 컬럼 (주로 네비게이션)을 접근하도록 하는 방법. Css만으로는 불가능하고, 모바일 터치 이벤트를 받아서 처리할 수 있는 방법(js)이 필요.

반응형 메뉴(navigation) 패턴 - Brad Frost : 7가지 패턴의 메뉴 처리 패턴.

  1. Top nav or “do nothing”: 주로 메뉴가 상단에 있는 경우, 아무런 처리를 하지 않거나 약간의 조정만 해주는 방법. 
  2. Footer anchor: 메뉴는 하단으로 보내고, 상단에는 하단 메뉴로 보내는 링크 하나만 남기는 방법.
  3. Select menu: 메뉴를 실렉트로 바꾸는 방법.
  4. Toggle: 드랍다운 메뉴를 토글로 보여주는 방법. Bootstrap
  5. Left nav flyout: 위 레이아웃 패턴중 off canvas에 해당하는 경우.
  6. Footer-only: Footer anchor와 다른 점은, 상단에 링크가 없다는 점.
  7. “Hide n’ Cry”: 많은 부분을 가려버리고 모바일 용 내용만 보여주는 방법.

그밖에 유용한 그리고 재밌는 리소스들로

#퍼블리셔팁 #퍼블리셔 #팁자료실 #html
글쓰기

댓글 3개

지운아빠
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-04-25 (수) 19:58:56
감사합니다. 공부할 게 점점 많아지니 기쁨의 눈물이 흐르네요. ㅎㅎㅎ
으허어어어헝헝엏어어어헝엉
전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-04-25 (수) 20:12:17
동감입니다. ^^*

그래도 이번것은, 기술적인 부분이 아니고, ui/ux 패턴이라서 그나마 나았어요..^^;
아마 당분간 더 찾아보지는 않고, 지금까지 조사한 것 중
맘에 드는 것 하나씩을 선택해서 프로토타입 만들어보는 것에 집중해볼까 봐요.. ^^
아이아라
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-05-28 (월) 05:28:32
음
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,202
12-08-07 조회 3,865
12-08-03 조회 3,671
12-07-31 조회 3,773
12-07-30 조회 3,721
12-07-16 조회 3,927
12-07-15 조회 3,760
12-07-07 조회 3,617
12-07-06 조회 3,817
12-07-03 조회 3,774
12-06-29 조회 3,405
12-06-22 조회 3,769
12-06-17 조회 4,035
12-05-21 조회 3,950
12-05-02 조회 3,470
12-05-02 조회 4,258
12-05-02 조회 3,381
12-04-30 조회 3,584
12-04-30 조회 3,263
12-03-17 조회 4,137
12-03-10 조회 3,460
12-03-08 조회 3,997
12-03-03 조회 3,700
12-02-27 조회 5,119
12-02-17 조회 4,416
12-02-16 조회 4,694
12-02-03 조회 3,353
12-01-31 조회 3,262
12-01-24 조회 3,261
12-01-17 조회 3,966
12-01-05 조회 3,512
11-12-30 조회 3,242
11-12-23 조회 4,793
11-12-08 조회 3,570
11-12-07 조회 4,523
11-11-27 조회 3,958
11-11-25 조회 4,283
11-11-23 조회 3,722
11-11-22 조회 3,580
11-11-09 조회 3,290
11-10-23 조회 3,229
11-10-19 조회 3,194
11-10-08 조회 2,869
11-10-04 조회 2,869
11-10-04 조회 5,328
11-09-01 조회 4,408
11-08-13 조회 2,582
11-08-06 조회 3,263
11-07-11 조회 3,658
11-06-27 조회 3,014
11-06-21 조회 2,684
11-06-13 조회 2,485
11-06-07 조회 2,499
11-05-26 조회 2,453
11-04-20 조회 2,784
11-03-21 조회 2,878
11-03-18 조회 2,576
11-03-11 조회 2,590
11-02-07 조회 2,425
11-01-18 조회 2,747
11-01-12 조회 2,466
11-01-06 조회 2,555
10-12-10 조회 2,815
10-12-09 조회 2,666
10-12-08 조회 5,095
10-11-29 조회 2,929
10-11-28 조회 2,836
10-11-28 조회 2,665
10-11-19 조회 2,865
10-11-04 조회 2,740
10-10-21 조회 2,462
10-10-19 조회 3,427
10-10-12 조회 2,745
10-10-07 조회 2,584
10-09-30 조회 3,544
10-09-17 조회 3,956
10-09-17 조회 3,892
10-05-31 조회 3,611
09-12-31 조회 3,743
09-07-23 조회 5,063
08-09-16 조회 3,266
08-09-06 조회 3,012
08-09-04 조회 3,435
08-08-16 조회 4,463
08-08-15 조회 3,329
08-08-14 조회 4,545
08-08-12 조회 4,010
08-07-23 조회 2,824
08-07-10 조회 3,781
08-07-04 조회 3,003
08-06-27 조회 7,640
08-06-19 조회 4,953
08-05-27 조회 5,565
08-05-25 조회 5,397
08-05-23 조회 3,472
08-05-23 조회 4,639
08-05-21 조회 4,988
08-05-20 조회 4,101
08-05-20 조회 3,326
08-04-18 조회 4,404
글쓰기