반응형 레이아웃 와이어프레임

전진

· 13년 전 · 조회 1914 1914 · 댓글 7 7

링크

http://gnuboard.org/pages/rwd-wireframes/ (217)

얼마전에 링크를 올렸던 반응형 레이아웃 와이어프레임 ( http://www.thismanslife.co.uk/projects/lab/responsivewireframes/ )을 조금 수정해봤습니다.

우선, 기존 사이트의 모바일이 너무 작아서, 데스크탑을 1200x800 이라고 했을때, 모바일 선택시 iPhone의 상대크기가 나오도록 수정했고, 중간크기인 iPad 세로보기 (Tablet Portrait) 크기도 추가했습니다.

그리고 위아래로 쭈욱 나열할 필요가 없어서 float:left로 하는등 불필요한 부분은 지웠습니다.

내부적으로는, 폭과 높이 계산하는 부분이 좀 잘못된것 같아서 수정했고요..

음.. 사실 활용방도가 그렇게 많지는 않는데요.. 그래도 자신만의 반응형 레이아웃을 몇가지 실험해볼 용도로 괜찮을것 같아서 올립니다. 저도 그런 용도로 코드를 수정했고요.

원래있던 5가지 레이아웃 이외에, 그누보드 초기화면 같은 레이아웃 (#6 Gnuboard)와 게시판이 있는 레이아웃 (#7 Gnuboard board) 두가지를 시험해 봤는데, 뭐 지난번에 했던 것에 비해서 크게 달라지는 게 없네요.. 생각이 더이상 발전하지는 않는듯..

게다가, 지금의 방법은, 왼쪽 사이드바를 아래로 보내는 등, 그리드의 순서를 바꿀 수는 없기에 좀더 유연한 프로토 타입을 생각해 봐야 할것 같습니다..

그래도 혹시 사용해 보실 의향이 있는 분은, less 를 이용하는 styles.css 를 수정하셔야 하는데, 그렇게 잘 짜여진 것 같지도 않고, 주석이 그렇게 많지 않아서.. 따로 알려드릴까 합니다. 그럼 ^^

첨부파일

rwd.zip (18.5 KB, 80회)

댓글 작성

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

로그인하기

댓글 7개

전진

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

그리드 순서 바꾸는 것은, css3 flexbox를 이용해서 구현해봤습니다. (#8 Transpose)
IE에서는 안되지만, 크롬, ff 되고, 특히 iOS나 안드로이드에서 지원한다니,
'데스크탑 퍼스트'를 따른다면 ^^; 괜찮을것 같네요.

빌딩

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

어떻게 쓰는 건가요? ㅡ_- 좀 자세히...

전진

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

아.. 사용한다기 보다는, 이를 바탕으로 자신이 원하는 반응형 레이아웃을 테스트 해볼 수 있는 템플릿이라고 보시면 됩니다.
데스크탑-태블릿-모바일 세가지 화면 크기에서 어떻게 레이아웃을 할지
less 기반 css 를 직접 고쳐서 ^^; 구성해보는 거죠..
위 파일은, 그런 작업을 조금 쉽게, 이미 만들어놓은 템플릿을 조금씩 고쳐서 해본다는 장점'밖'에 없습니다.
아, 그리고 웹서버에 올려야 합니다. 로컬이든 아니든..
less.js가 웹서버를 거쳐서 작동하는 것 같습니다.

전진

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

설명을 조금더 넣어서 블로그에 올렸습니다.
http://blog.gnuboard.org/2012/04/responsive-layout-wireframes/

mindlelle

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

오아... 멋져요. 며칠전 가입해서 요리조리 보고 있는데, 정말 신기합니다 *_*

전진

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

우선, 전 원본을 조금 수정한 것 뿐이고요. .^^;
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/

css, less 조금 아시거나 배우시면, 그다지 어려운 것은 아닙니다. ^^

아이아라

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

ㅇ늠

게시글 목록

번호	제목	글쓴이	조회	날짜
4132	10 년 이상된 사이트들.... 9	벤지	750	13년 전
17083	jQuery hover 이미지 효과를 쓰고 싶습니다! 1	김우너석	1,758	13년 전
17082	Linux [python]버클리 DB 사용 해 보기	빅뱅1	926	13년 전
17081	Linux [python] os.path.getsize()	빅뱅1	502	13년 전
17080	Linux Can't set position pointer in file 메세지에 대해	빅뱅1	742	13년 전
17079	Linux [python]os.path.exists() 파일 존재 체크하기	빅뱅1	1,345	13년 전
17078	Linux parted 사용하여 2TB 이상 되는 하드 공간 파티션 나누기	빅뱅1	815	13년 전
17077	Linux csv file 에 대해	빅뱅1	449	13년 전
4127	VB로 회원관리프로그램을 개발할 경우... 4	항상감사	990	13년 전
17074	jQuery prettyphoto를 잘 다루시는 분께 질문드립니다~ 2	다이어리펜션	1,379	13년 전
17073	Linux 실행파일이 필요로 하는 공유라이브러리 확인하기	빅뱅1	495	13년 전
17072	Linux 프로그램 실행중 환경변수를 확인하기	빅뱅1	472	13년 전
17071	Linux 터미널에서 쉽게 로그아웃하기	빅뱅1	400	13년 전
17070	Linux arp 명령 이용하여 아이피,맥 셋팅하기	빅뱅1	712	13년 전
17069	Linux 프로그램 정지 상태 조사(strace 이용)	빅뱅1	447	13년 전
17068	jQuery 도전해BoA요~ 1탄	지운아빠	904	13년 전
17063	기타 웹호스팅 웹하드 용량 질문 4	처리딘	937	13년 전
17059	jQuery 마우스 오버시 나오게 할려면 어떻게하나요? 3	cookieyou	1,345	13년 전
17057	PHP 질문. 1	후닝	528	13년 전
4119	여러분의 직장연봉은? 7	Tnx2	817	13년 전
17053	jQuery [질문] jQuery Mobile 에서 안드로이드 Scroll 문제 3	벤지	4,438	13년 전
17050	Linux mysql replication 깨졌을때 2	빅뱅1	1,061	13년 전
17049	Linux 라이브 시디 받을 수 있는곳	빅뱅1	402	13년 전
17048	Linux cgi-bin 을 이용하여 서버에 루트권한으로 실행	빅뱅1	471	13년 전
17047	Linux 1번 cd 이용하여 grub 복구하기	빅뱅1	628	13년 전
17046	Linux 리눅스에서 한번에 열수 있는 socket 수 늘리기	빅뱅1	1,095	13년 전
17045	Linux 디렉토리의 사이즈 출력해주는 쉘	빅뱅1	410	13년 전
17036	JavaScript 3개의 배너를 돌리는 스크립트 8	프로프리랜서	1,337	13년 전
17035	Linux 경로에서 파일명만 추출하기	빅뱅1	1,582	13년 전
17034	Linux 텍스트 계산기	빅뱅1	456	13년 전
17033	Linux 패치 파일 만들어 보기	빅뱅1	365	13년 전
17032	Linux libc.so.6 링크 건드리면...심각한 문제 발생됩니다.	빅뱅1	517	13년 전
17031	Linux 절대경로,상대경로 확실히 이해하기	빅뱅1	2,126	13년 전
17030	Linux 최신 커널 버전 간단히 확인하기	빅뱅1	373	13년 전
17029	Linux 심볼릭 링크와 하드 링크	빅뱅1	519	13년 전
17028	Linux umask	빅뱅1	381	13년 전
17027	Linux iptables 관련	빅뱅1	387	13년 전
17026	Linux xferlog 분석	빅뱅1	869	13년 전
17025	Linux iperf 로 통신속도 측정하기	빅뱅1	1,050	13년 전
17024	Linux 프로세스 빨리 종료하기	빅뱅1	399	13년 전
17023	Linux utf8 mrtg 실행되지 않을때	빅뱅1	505	13년 전
17022	Linux 리눅스 서버의 BIOS 및 시스템 정보 확인하기	빅뱅1	948	13년 전
17021	Linux 커널 모듈 수정하기	빅뱅1	400	13년 전
17019	MySQL 모든회원의 mb_open (정보공개) 궁금합니다. ㅠㅠ 1	개터리	1,151	13년 전
30314	HTML CSS Font-Size Comparative Table 4	지운아빠	1,476	13년 전
17016	기타 피망고스톱같은 게임 판매하는곳이나 관련업체 아시는분 있으신가요? 2	불편한진실	3,919	13년 전
17014	기타 meta tag refresh 여러개 설정 질문입니다. 1	alexseo	906	13년 전
17010	JavaScript 제이쿼리 슬라이드 질문입니다! 3	김우너석	1,120	13년 전
17009	Linux critical_create(): semget() failed: No space left on device 로그를 봤을때	빅뱅1	596	13년 전
17008	Linux debian 3.1 업데이트가 되지 않을때?	빅뱅1	519	13년 전
17007	Linux mysql 3 버전에서 export 하여 mysql5 버전에 import 하기.	빅뱅1	591	13년 전
17006	Linux MySQL server has gone away 에러	빅뱅1	960	13년 전
17005	Linux php 확장 모듈 설치하기	빅뱅1	2,171	13년 전
17003	PHP N 카페 글쓰기 가능하신분있나요? 1	사슴이	660	13년 전
17000	기타 사무실 인터넷 대역폭 1G 정도 되는데 있을까요? 2	몰보는거야	1,683	13년 전
30311	HTML IE 5,6,7,8 대응해주는 .js 2	cshop	1,763	13년 전
16992	jQuery 줌인(Zoom-in) 기능의 jquery 플러그인 7	port	2,005	13년 전
16990	기타 로고 때문에 그러는데.... 디자이너분을 찾습니다. 1	cshop	763	13년 전
16983	MySQL mysql 기본 명령어들이에요. 6	프로프리랜서	1,032	13년 전
16982	기타 무료 강의 들을 수 있는 곳이에요.	프로프리랜서	757	13년 전
16976	PHP 문자열 자르는 소스입니다. 5	프로프리랜서	871	13년 전
16971	PHP 체크값은 mysql에 어떻게 저장되나요?? 4	뭐먹고살지ㅠ	781	13년 전
16969	PHP 도와주세요~홈페이지 만드는데 뭐가 문제인지 모르겠어요....-_- 1	danielle	642	13년 전
16965	MySQL [Q] 테이블 합치는법은 ? 3	html	758	13년 전
4110	대구 PHP 개발자 계시나요? 8	여행지기	833	13년 전
16957	JavaScript 도와주세요ㅜㅜ 7	마스터킴	902	13년 전
16955	PHP php Snoopy.. 1	세율	1,714	13년 전
16954	Linux / 파티션이 97% (8G사용) 인데 실제 du 체크하면 4G 정도 무엇이 문제인가?	빅뱅1	429	13년 전
16948	기타 나스 추천 부탁드립니다~~ 5	한솥방	800	13년 전
16947	Linux Apache failed to start with the "No space left on device" error.	빅뱅1	575	13년 전
16946	Linux history 명령에 대해	빅뱅1	377	13년 전
16944	PHP 회원 인증 로그인 시스템 보안 1	senseme	833	13년 전
16941	node.js 웹호스팅과 Node.js 호스팅의 연동이 가능할까요? 2	철마신	2,842	13년 전
16940	JavaScript 스크립트로 프린트 출력설정하기	비혼	1,908	13년 전
16939	Linux arp 스푸핑한 서버 어떻게 찾나?	빅뱅1	1,478	13년 전
16938	Linux htpasswd 암호 8자리 까지입력했는데 들어가진다면?	빅뱅1	437	13년 전
16937	Flash 채팅방 스크룰바	senseme	1,059	13년 전
16935	Flash DB연동 로그인 1	senseme	1,903	13년 전
16934	Flash 플래시 mp3	senseme	1,035	13년 전
16932	JavaScript “ 플래시보고 만든 글자 타이핑 소스입니다. ” 1	senseme	1,057	13년 전
16931	JavaScript 즐겨찾기 모두 지원	senseme	796	13년 전
16929	JavaScript 홈페이지에 항상있는 오른쪽 퀵 1	senseme	971	13년 전
30304	HTML 하단에 딱붙어있는 레이어는 어떻게 만들어야 할지? 6	클럽매냐	1,978	13년 전
16926	Linux ls 했을때 디렉토리 색깔이 어둡다면? 2	빅뱅1	485	13년 전
4098	홈페이지 정말 처음만드는대 간단히라도 답변달아주시면감사드립니다 ㅠ 11	우렁찬우렁이	848	13년 전
30297	HTML (소스)마우스오버시 힌트창 css만으로 작동 6	크라이스트	2,143	13년 전
16923	기타 도와주세요. 서브닷 카페24설치 해보신분? 2	천사사랑	955	13년 전
4097	도메인 등록 시스템???	홈픽스	519	13년 전
30296	HTML 드림위버에서 특정 파일들의 코드 검색이 안됩니다.ㅜㅜ	오십원	962	13년 전
16921	PHP xml 파싱할때 포트를 따로쓰나요? 1	HARUNET	802	13년 전
16916	기타 그누보드로 홈페이지 제작 하는게 좋을까요? 4	스마일라니	865	13년 전
16914	Flash 플래쉬 메뉴 펼쳐보임을 하고 싶으면 어떻게 해야 할까요? 1	불량춤꾼	1,126	13년 전
30288	HTML 반응형 레이아웃 와이어프레임 7 현재글	전진	1,915	13년 전
16912	Flash 플래시 전체크기로 중간을 만들려고 하는데..ㅠㅠ 도와주세요 1	진풍백	1,041	13년 전
16908	jQuery jQuery 시리즈 동영상 강좌 리스트 3	cookieyou	1,395	13년 전
16907	Linux tcpdump 간단 사용	빅뱅1	490	13년 전
16906	Linux 환경변수 path 를 확인하여 스크립트 속도향상하기	빅뱅1	553	13년 전
16905	Linux ssh 접속 지연이 발생할때	빅뱅1	481	13년 전
16904	Linux swap 생성	빅뱅1	429	13년 전
16903	Linux dmesg 클리어 하고 싶을 때	빅뱅1	727	13년 전

이전 다음

30 31 32 33 34

전체 목록