테스트 사이트 - 개발 중인 베타 버전입니다

가변형 레이아웃/네비게이션 패턴

· 13년 전 · 1646 · 2
(HTMLn/CSSn 게시판이 사라질 예정이어서, 여기로 옮깁니다. 12-09-06)

  • 원글정보:    작성일시 
  • 조회 529
  • 댓글 3


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

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”: 많은 부분을 가려버리고 모바일 용 내용만 보여주는 방법.

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


   

댓글보기

             지운아빠 2012.04.25 19:58:56       

                                    감사합니다. 공부할 게 점점 많아지니 기쁨의 눈물이 흐르네요. ㅎㅎㅎ
으허어어어헝헝엏어어어헝엉
                   

        
            전진 2012.04.25 20:12:17       

                                    동감입니다. ^^*

그래도 이번것은, 기술적인 부분이 아니고, ui/ux 패턴이라서 그나마 나았어요..^^;
아마 당분간 더 찾아보지는 않고, 지금까지 조사한 것 중
맘에 드는 것 하나씩을 선택해서 프로토타입 만들어보는 것에 집중해볼까 봐요.. ^^
                   


댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

좋은 정보감사합니다.
위 글은 반응형웹 강좌로 다시 정리되었습니다.
레이아웃: http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=205
네비게이션/메뉴: http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=220

게시글 목록

번호 제목
17764
17761
17753
17750
26370
4334
4332
17749
17747
26369
17746
17743
17742
17740
17738
17736
17734
17732
30517
17729
17728
17725
24409
17722
30513
17720
17719
4331
17716
26368
17715
17713
17712
17709
30511
30507
30503
30500
17706
17704
17701
17697
17691
17685
30474
17674
30467
17670
17667
17664
17660
17658
17656
4325
30459
4318
17653
30452
17649
30450
30437
17647
4315
4310
30435
30413
17646
30411
17642
17638
17636
30407
17634
17632
17627
17624
17620
17619
17616
17614
17613
17609
17606
17605
17601
24408
17597
4299
17594
17587
17586
4295
17582
17577
17569
17568
17565
30399
30394
24400