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

전진

프로필 보기 이 회원 글보기

· 13년 전 · 조회 2900 2900 · 댓글 12 12

링크

http://www.zurb.com/playground/off-canvas-layouts (261)

css와 javascript을 이용한 재밌는 플러그인/버튼들로 유명한 zurb에서 개발 배포하는,

트위터의 bootstrap 과 비슷한 (반응형) 템플릿/프레임워크 입니다.

http://foundation.zurb.com/

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

http://www.zurb.com/playground/off-canvas-layouts

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

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

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

트위터 bootstrap 이, 상단 메뉴를 모바일에서 간단히 드랍다운 버튼으로 바꾸는 방식밖에 없는 반면에,

zurb의 foundation 은 여러 가지 변형 방법을 기본 제공합니다.

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

댓글 작성

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

로그인하기

댓글 12개

지운아빠

프로필 보기 이 회원 글보기

13년 전

ㅊㅊ

전진

프로필 보기 이 회원 글보기

13년 전

ㅎㅎ
ㄱ ㅅ

지운아빠

프로필 보기 이 회원 글보기

13년 전

전진님이 올려주시는 자료들 때문에 이 게시판이 성지가 되는 날이 올꺼라 생각합니다. ㅎ

전진

프로필 보기 이 회원 글보기

13년 전

아니 이런 오바는.. ^^;
아.. 자게의 지운아빠님 사진때문에 삐진 저를 달래시는.. -_-

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

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

어쨋든 좀 적용해볼까 했는데, 에너지가 안생기네요.. ^^

전진

프로필 보기 이 회원 글보기

13년 전

혹시 아이폰이나 안드로이드폰 있으시면, 터치스와핑이 작동하는지 테스트 해주시겠어요? ^^;
사용한 jq 플러그인 페이지에는 아이폰 등에서는 된다고 하는데,
제가 가지고 있는 스맛폰(hp palm)으로는 테스트를 해볼 수가 없네요. ^^;

http://gnuboard.org/pages/offcanvas/

지운아빠

프로필 보기 이 회원 글보기

13년 전

동작은 되는데 터치스크롤?이 매끈하지 못하네요.
화면을 쫌 긁어야 스크롤이 되네요 ㅠ
갤레기2입니다.
그리고 전 입발린 소리는 안 합니다. ㅎ

전진

프로필 보기 이 회원 글보기

13년 전

역시 js 로 구현되는 touch 동작은 항상 한계가 있군요. ^^
테스트 해주셔서 고맙습니다. ^^

지운아빠

프로필 보기 이 회원 글보기

13년 전

굵직굵직한 부분에서 js framework 를 사용하는 건 아직까진 안정적이다고 느껴지는 건 없는 거 같아요. 정보부족, 테스트부족이긴 하지만 ^^;;
전 탭최신글 같은 작은 혹은 부분적인 단위에 swipe.js 같은 것을 활용해보는 정도에 그치고 있습니다.

전진

프로필 보기 이 회원 글보기

13년 전

swipe.js 좋은데요? ^^
이걸로 한번 적용해봐야 겠습니다. 알려주셔서 고맙습니다. ^^*

전진

프로필 보기 이 회원 글보기

13년 전

아이폰으로 테스트 해봤는데,
왼쪽 메뉴 보이게 하는 스타일(1,2,4)은 엄청 버벅거리네요..
그래도 탭의 슬라이드 방식(3)은 꽤 부드럽게 움직이네요..
탭 슬라이드에서 사용한 left 값 조정하는 방식으로 다시 구현해볼까봐요.. ^^

/ 2

1 2

게시글 목록

번호	제목	글쓴이	조회	날짜
20097	PHP User Management 관련 입니다.	혀니천사	364	9년 전
20095	웹서버 LEMP(ubuntu14.04 + nginx + mysql + php-fpm + memcached) 스택 설치방법 소개 1	gilynh	539	9년 전
20093	PHP 관리자 및 회원의 페이지 접근 권한 간단구현 입니다. 1	혀니천사	475	9년 전
20092	PHP [서버운영] 아파치로그] sql로 바로 저장 입니다.	혀니천사	355	9년 전
20091	PHP [서버운영] 아파치로그] 보기좋고 파싱하기 좋은 통합로그 입니다.	혀니천사	362	9년 전
20089	PHP (win) xdebug와 xampp 사용하기 입니다. 1	혀니천사	414	9년 전
20086	PHP 계정별 register_global 설정 입니다. 2	혀니천사	407	9년 전
20085	PHP apache log처리에 대해서 입니다.	혀니천사	305	9년 전
20084	PHP 이름기반 가상호스트 설정관련 입니다.	혀니천사	311	9년 전
20083	PHP exif 익스텐션 실행이 안되는 경우 입니다.	혀니천사	258	9년 전
20082	PHP 타겟(target) 쓰는 법 입니다.	혀니천사	311	9년 전
28358	input에 링크를 걸려고 하는데;; 2	ABC디자인	710	9년 전
20081	PHP 파일이름의 확장자로 파일 종류를 확인하는 함수 입니다.	혀니천사	328	9년 전
20079	PHP 이미지 없는 라운드테이블 만들기 입니다. 1	혀니천사	429	9년 전
20078	PHP 문자셋 인코딩 바꾸는 팁 입니다.	혀니천사	350	9년 전
20077	PHP 타도메인간 쿠키 공유하기 입니다	혀니천사	548	9년 전
20076	PHP apache mod_rewrite 설치시 팁 입니다	혀니천사	369	9년 전
20075	PHP 본문에 주민등록번호가 포함되면 경고 알려주기 입니다.	혀니천사	304	9년 전
20074	PHP 입력내용중의 일부만 보여주고 x 표시 할때 입니다.	혀니천사	332	9년 전
20073	PHP php환경 변수 출력 입니다.	혀니천사	353	9년 전
20072	PHP PHP팁 (보안 등) 입니다.	혀니천사	475	9년 전
20071	PHP 문자열 자르는 함수 입니다.	혀니천사	424	9년 전
20070	PHP 게시판에서 컨텐츠중 이미지 사이즈를 조정 입니다.	혀니천사	272	9년 전
20069	PHP 파일 업로드 시 html에서 용량 제어하기 입니다.	혀니천사	331	9년 전
8148	저작권 폰트? 23	프로그래머7	1,297	10년 전
20057	정규표현식 파싱 예제입니다. 11	유창화	1,188	10년 전
8141	자바스크립트로 트위터 트윗을 따오고 싶어요! 6	zahir1312	728	10년 전
24669	예전에 봤던 PPT만들기 팁 공유하고싶어서요.	ABC디자인	1,334	10년 전
20056	웹서버 리눅스 특정 명령어 실행 권한 주기	컴프	388	10년 전
8138	PC로 스마트폰 터치제어하기가 가능한가요? 2	민일기	816	10년 전
28353	파이어폭스 본고딕 웹폰트 깨짐.. 4	이온디	1,028	10년 전
20055	jQuery Simple Carousel (Sliding Banner)	자루스	490	10년 전
20054	jQuery CSS3 - transition, transform을 이용한 element effect!	자루스	439	10년 전
20053	PHP 비 전문가를 위한 XMLHttpRequest 활용 소개 입니다.	혀니천사	433	10년 전
20052	PHP 디렉토리내의 모든 원소의 소유권, 그룹, 퍼미션 정보 가져와서 저장하기 입니다.	혀니천사	287	10년 전
20051	PHP httpd.conf 파일 완벽 가이드 입니다.	혀니천사	440	10년 전
20050	JavaScript 지난 시간 경과시간 페이스북 sns 처럼 보여주기 javascript 버전	들불	461	10년 전
20047	PHP [Instagram] 해시태그 검색 이미지 얻어오는 방법 2	해피정	986	10년 전
20046	PHP php환경맞춤 부분 입니다.	혀니천사	392	10년 전
20045	PHP 프레임 새로고침할 때 페이지 유지하기 입니다.	혀니천사	463	10년 전
20044	PHP 접속자의 브라우져와 OS정보를 알려주는 함수 입니다.	혀니천사	443	10년 전
8111	구매대행 쇼핑몰 제작의뢰. 26	fbastore	1,370	10년 전
20043	PHP 웹호스팅해서 사용시 fopen을 사용하지 못할 경우 해결법입니다.	혀니천사	475	10년 전
20042	PHP zend 설치하기 (php.ini) 에서 안보일때 해결법 입니다.	혀니천사	331	10년 전
20040	PHP 아파치 무단링크 막기 입니다. 1	혀니천사	483	10년 전
20039	JavaScript 구글 맞춤검색 설정 방법, google custom search	위토즈	500	10년 전
20037	PHP php in_array 사용법 배열값 확인하기 1	컴프	573	10년 전
20036	PHP ob_start callback에 대한 설명	컴프	371	10년 전
20035	PHP call_user_func 함수 재정의	컴프	432	10년 전
20027	MySQL 1000만건 게시판에 도전합니다. 두번째 7	리자	837	10년 전
8107	제로보드에서 그누보드 변경방법? 3	심슨아	766	10년 전
31022	기타 ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. 1	바른통남	742	10년 전
20026	MySQL Join 을 이용한 delete	브이룩	299	10년 전
20025	PHP 정규식 (Regular Expression Functions) 입니다.	혀니천사	384	10년 전
20024	PHP Apache 설치후 httpd.conf 설정	혀니천사	388	10년 전
20023	PHP 미리 정의된 변수들 입니다.	혀니천사	323	10년 전
28350	파일다운 링크에관해 질문드립니다 ㅠ_ㅠ도와주세요 2	심슨아	594	10년 전
20022	PHP array_rand 관련 입니다.	혀니천사	312	10년 전
20018	MySQL 1000만건 게시판에 도전합니다. 첫번째 3	리자	653	10년 전
20017	MySQL select 해서 바로 insert하기	브이룩	314	10년 전
8099	사파리에서는 두개 이상의 같은 이름 radio는 안 먹네요. 7	자루스	604	10년 전
20016	MySQL 필드 내용에서 특정문자열을 기준으로 문자열 자르기	띠아블	312	10년 전
20013	PHP PHP최근메뉴얼(도움말)파일입니다 2	혀니천사	538	10년 전
8090	모바일사이트 앱등록 방법 8	도담도담	1,109	10년 전
20012	PHP 시스템 정보를 알아볼 수 있는 방법입니다.	혀니천사	434	10년 전
20010	PHP number_format 시 빈값 예외처리 1	김득신	452	10년 전
20009	웹서버 Could not reliably determine the server's fully qualified domain name	잘살아보자	310	10년 전
19998	PHP 텔레그램 푸쉬 봇 10	foxrain	1,382	10년 전
28348	SK 공시지원금 홈페이지 자동연동 API 1	Tosea	1,010	10년 전
28347	angularjs 수정작업 및 스크립트 작업 가능 하신분 계신가요?	페페오	608	10년 전
19997	OS 짧은 주소 만들기, htaccess RewriteRule 리다이렉션	잘살아보자	569	10년 전
19996	OS 파일분할 분할압축 해제	잘살아보자	381	10년 전
19995	웹서버 리눅스백그라운드실행	잘살아보자	497	10년 전
19993	PHP 로컬에서 자바스크립트 HTML 소스 가져오기 1	혀니천사	1,160	10년 전
8087	<초보분들을 위한 개념> CSS란 ? 2	ITBANK	1,202	10년 전
8065	오픈마켓, 개발 3년차에게 가능한 일인지? 21	승희아빠	1,882	10년 전
19990	jQuery JQuery 이미지 lazyload 플러그인입니다. 2	DMAN	961	10년 전
8063	g4->g5로 업데이트후 구글에서 검색노출 저조되는현상.. 1	레이파니	830	10년 전
8056	오픈마켓 오픈소스 구할수 있을까요? 6	승희아빠	1,328	10년 전
19989	기타 printf함수를 이용하여 문자 출력	잘살아보자	455	10년 전
19988	기타 printf함수를 이용하여 실수형 데이터 출력하기	잘살아보자	424	10년 전
19987	기타 printf함수를 이용하여 정수값 출력하기	잘살아보자	421	10년 전
19986	기타 정수값으로문자출력 putchar	잘살아보자	409	10년 전
19985	기타 c언어 기초강의 - 한문자 출력 명령어 putchar	잘살아보자	493	10년 전
19984	기타 C언어기초강의 - puts로 문자열 출력	잘살아보자	614	10년 전
19983	MySQL [MySQL] csv 파일을 직접 MySQL 테이블로 Import 하는 방법 (대용량 파일 import 팁)	잘살아보자	852	10년 전
19982	MySQL mysql에서 boolean 타입 사용하기	잘살아보자	383	10년 전
8054	답글, 댓글 로직 1	리자	908	10년 전
19981	jQuery jquery 플러그인: rolVideo.min.js 공개하였습니다.	starbros	779	10년 전
19980	웹서버 [리눅스] 사양 알아보기 (메모리, CPU, HDD, 비트, 네트워크)	잘살아보자	588	10년 전
19979	MySQL mysqladmin 상태 모니터링	잘살아보자	461	10년 전
19978	기타 리눅스 아파치 서버에 그누컨텐츠 설치하기	잘살아보자	426	10년 전
19977	웹서버 리눅스 프로세스 중단, 제거, 중지 - Kill	잘살아보자	478	10년 전
19976	웹서버 리눅스 프로세스 검사, 조회	잘살아보자	435	10년 전
19975	웹서버 리눅스에서 네트워크 상태 보기	잘살아보자	458	10년 전
19974	웹서버 리눅스 80 포트 방화벽 열기	잘살아보자	791	10년 전
19973	MySQL mysql 사용시 콘솔내에서 유용하게 사용할 수 있는 방법 몇가지	잘살아보자	380	10년 전
19972	MySQL Mysql Table 일괄 삭제 방법.	잘살아보자	476	10년 전
19971	MySQL Mysql 특정값 제외하고 Select 하기. Not IN	잘살아보자	635	10년 전
19970	MySQL mysql . update replace(치환) 방법 (mysql 팁)	잘살아보자	555	10년 전

이전 다음

3 4 5 6 7

전체 목록