이전
목록
다음
전

zurb의 foundation (반응형 프레임워크)

전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-07-07 (토) 19:07:00 · 5390 · 12

링크

http://www.zurb.com/playground/off-canvas-layouts (301)
css와 javascript을 이용한 재밌는 플러그인/버튼들로 유명한 zurb에서 개발 배포하는,
트위터의 bootstrap 과 비슷한 (반응형) 템플릿/프레임워크 입니다.


트위터 bootstrap하고 다른 점은, 이전에 가변형 레이아웃 펌글에서 언급되었던 off-canvas 방식 (모바일에서 화면 일부를 좌우측으로 감추고 원할때만 보여주는 방식) 을 실제로 구현해서 포함한 것입니다.

총 네가지 방식의 off-canvas 방식을 지원하는데요. 아래가 여러 내용을 슬라이딩 탭 방식으로 좌우측 화면 밖으로 배치하는 것 (paneled)이고 ( 테스트 링크 )

아래 방식은 상단 메뉴를 좌측 감춰진 사이드바로 이동하는 방식입니다. ( 테스트 링크 )

그 밖에 데스크탑의 좌측 사이드바를 모바일에서는 좌측으로 감추는 방식 두가지 (상단 메뉴를 그대로 두거나, 아래로 내리는 방식)이 더 있습니다.
offcanvas-1.jpgoffcanvas-2.jpg



트위터 bootstrap 이, 상단 메뉴를 모바일에서 간단히 드랍다운 버튼으로 바꾸는 방식밖에 없는 반면에,
zurb의 foundation 은 여러 가지 변형 방법을 기본 제공합니다.

반응형 웹사이트를 생각하시는 분들 중 트위터 bootstrap의 기본 모양이 지겨우시다면 한번쯤 고려해보실만 하다고 생각합니다. ^^

#퍼블리셔팁 #퍼블리셔 #팁자료실 #html
|

댓글 12개

지지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-07 (토) 22:48:22
ㅊㅊ
전전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-08 (일) 00:19:15
ㅎㅎ
ㄱ ㅅ
지지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-08 (일) 22:19:03
전진님이 올려주시는 자료들 때문에 이 게시판이 성지가 되는 날이 올꺼라 생각합니다. ㅎ
전전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 01:23:09
아니 이런 오바는.. ^^;
아.. 자게의 지운아빠님 사진때문에 삐진 저를 달래시는.. -_-

오늘 몇시간 foundation 들여다봤는데 그다지 별로인것 같네요..
off-canvas 도 스와핑 방식도 아니고..
사실 터치스와핑 방식이 아니면, 그냥 슬라이딩 효과밖에 없는것이고..

다른 jquery 스와핑 방식을 적용할 수 있을까 찾아봤는데,
나오는 소스들도, 실제로는 스와핑 방식으로 작동하지 않는것 같고..

어쨋든 좀 적용해볼까 했는데, 에너지가 안생기네요.. ^^
전전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 04:05:36
혹시 아이폰이나 안드로이드폰 있으시면, 터치스와핑이 작동하는지 테스트 해주시겠어요? ^^;
사용한 jq 플러그인 페이지에는 아이폰 등에서는 된다고 하는데,
제가 가지고 있는 스맛폰(hp palm)으로는 테스트를 해볼 수가 없네요. ^^;

http://gnuboard.org/pages/offcanvas/
지지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 08:21:56
동작은 되는데 터치스크롤?이 매끈하지 못하네요.
화면을 쫌 긁어야 스크롤이 되네요 ㅠ
갤레기2입니다.
그리고 전 입발린 소리는 안 합니다. ㅎ
전전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 11:16:55
역시 js 로 구현되는 touch 동작은 항상 한계가 있군요. ^^
테스트 해주셔서 고맙습니다. ^^
지지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 12:56:56
굵직굵직한 부분에서 js framework 를 사용하는 건 아직까진 안정적이다고 느껴지는 건 없는 거 같아요. 정보부족, 테스트부족이긴 하지만 ^^;;
전 탭최신글 같은 작은 혹은 부분적인 단위에 swipe.js 같은 것을 활용해보는 정도에 그치고 있습니다.
전전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 16:18:38
swipe.js 좋은데요? ^^
이걸로 한번 적용해봐야 겠습니다. 알려주셔서 고맙습니다. ^^*
전전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 21:58:35
아이폰으로 테스트 해봤는데,
왼쪽 메뉴 보이게 하는 스타일(1,2,4)은 엄청 버벅거리네요..
그래도 탭의 슬라이드 방식(3)은 꽤 부드럽게 움직이네요..
탭 슬라이드에서 사용한 left 값 조정하는 방식으로 다시 구현해볼까봐요.. ^^
지지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-09 (월) 23:25:57
foundation 이요?
전전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-07-10 (화) 02:15:15
네, 제가 사용한 WipeTouch jq플러그인이 문제인건지
http://wipetouch.codeplex.com/
foundation 의 off-canvas 예제 1,2,4 번 방식 자체가 문제인지
스와핑도 느리지만, 버튼 클릭시 슬라이딩 인/아웃도 버벅거리더라구요..
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,045
12-08-07 조회 3,723
12-08-03 조회 3,539
12-07-31 조회 3,642
12-07-30 조회 3,600
12-07-16 조회 3,819
12-07-15 조회 3,604
12-07-07 조회 3,508
12-07-06 조회 3,698
12-07-03 조회 3,672
12-06-29 조회 3,249
12-06-22 조회 3,628
12-06-17 조회 3,837
12-05-21 조회 3,799
12-05-02 조회 3,377
12-05-02 조회 4,173
12-05-02 조회 3,290
12-04-30 조회 3,462
12-04-30 조회 3,161
12-03-17 조회 4,006
12-03-10 조회 3,362
12-03-08 조회 3,877
12-03-03 조회 3,551
12-02-27 조회 4,975
12-02-17 조회 4,312
12-02-16 조회 4,556
12-02-03 조회 3,277
12-01-31 조회 3,114
12-01-24 조회 3,118
12-01-17 조회 3,859
12-01-05 조회 3,413
11-12-30 조회 3,091
11-12-23 조회 4,701
11-12-08 조회 3,424
11-12-07 조회 4,401
11-11-27 조회 3,800
11-11-25 조회 4,153
11-11-23 조회 3,596
11-11-22 조회 3,474
11-11-09 조회 3,198
11-10-23 조회 3,105
11-10-19 조회 3,078
11-10-08 조회 2,781
11-10-04 조회 2,786
11-10-04 조회 5,232
11-09-01 조회 4,296
11-08-13 조회 2,465
11-08-06 조회 3,158
11-07-11 조회 3,559
11-06-27 조회 2,933
11-06-21 조회 2,608
11-06-13 조회 2,384
11-06-07 조회 2,390
11-05-26 조회 2,389
11-04-20 조회 2,696
11-03-21 조회 2,786
11-03-18 조회 2,482
11-03-11 조회 2,520
11-02-07 조회 2,338
11-01-18 조회 2,655
11-01-12 조회 2,388
11-01-06 조회 2,490
10-12-10 조회 2,757
10-12-09 조회 2,513
10-12-08 조회 5,008
10-11-29 조회 2,610
10-11-28 조회 2,776
10-11-28 조회 2,615
10-11-19 조회 2,794
10-11-04 조회 2,687
10-10-21 조회 2,400
10-10-19 조회 3,350
10-10-12 조회 2,674
10-10-07 조회 2,503
10-09-30 조회 3,462
10-09-17 조회 3,855
10-09-17 조회 3,828
10-05-31 조회 3,498
09-12-31 조회 3,645
09-07-23 조회 4,964
08-09-16 조회 3,190
08-09-06 조회 2,923
08-09-04 조회 3,351
08-08-16 조회 4,399
08-08-15 조회 3,267
08-08-14 조회 4,479
08-08-12 조회 3,916
08-07-23 조회 2,775
08-07-10 조회 3,710
08-07-04 조회 2,937
08-06-27 조회 7,580
08-06-19 조회 4,872
08-05-27 조회 5,490
08-05-25 조회 5,320
08-05-23 조회 3,388
08-05-23 조회 4,527
08-05-21 조회 4,907
08-05-20 조회 4,028
08-05-20 조회 3,269
08-04-18 조회 4,309
글쓰기