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

전진

· 13년 전 · 조회 1910 1910 · 댓글 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년 전

ㅇ늠

게시글 목록

번호	제목	글쓴이	조회	날짜
20097	PHP User Management 관련 입니다.	혀니천사	364	9년 전
20095	웹서버 LEMP(ubuntu14.04 + nginx + mysql + php-fpm + memcached) 스택 설치방법 소개 1	gilynh	539	9년 전
20093	PHP 관리자 및 회원의 페이지 접근 권한 간단구현 입니다. 1	혀니천사	476	9년 전
20092	PHP [서버운영] 아파치로그] sql로 바로 저장 입니다.	혀니천사	356	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 파일이름의 확장자로 파일 종류를 확인하는 함수 입니다.	혀니천사	329	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팁 (보안 등) 입니다.	혀니천사	476	9년 전
20071	PHP 문자열 자르는 함수 입니다.	혀니천사	424	9년 전
20070	PHP 게시판에서 컨텐츠중 이미지 사이즈를 조정 입니다.	혀니천사	272	9년 전
20069	PHP 파일 업로드 시 html에서 용량 제어하기 입니다.	혀니천사	331	9년 전
8148	저작권 폰트? 23	프로그래머7	1,297	10년 전
20057	정규표현식 파싱 예제입니다. 11	유창화	1,190	10년 전
8141	자바스크립트로 트위터 트윗을 따오고 싶어요! 6	zahir1312	728	10년 전
24669	예전에 봤던 PPT만들기 팁 공유하고싶어서요.	ABC디자인	1,335	10년 전
20056	웹서버 리눅스 특정 명령어 실행 권한 주기	컴프	388	10년 전
8138	PC로 스마트폰 터치제어하기가 가능한가요? 2	민일기	817	10년 전
28353	파이어폭스 본고딕 웹폰트 깨짐.. 4	이온디	1,029	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을 사용하지 못할 경우 해결법입니다.	혀니천사	476	10년 전
20042	PHP zend 설치하기 (php.ini) 에서 안보일때 해결법 입니다.	혀니천사	331	10년 전
20040	PHP 아파치 무단링크 막기 입니다. 1	혀니천사	486	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 함수 재정의	컴프	433	10년 전
20027	MySQL 1000만건 게시판에 도전합니다. 두번째 7	리자	837	10년 전
8107	제로보드에서 그누보드 변경방법? 3	심슨아	767	10년 전
31022	기타 ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. 1	바른통남	742	10년 전
20026	MySQL Join 을 이용한 delete	브이룩	299	10년 전
20025	PHP 정규식 (Regular Expression Functions) 입니다.	혀니천사	385	10년 전
20024	PHP Apache 설치후 httpd.conf 설정	혀니천사	388	10년 전
20023	PHP 미리 정의된 변수들 입니다.	혀니천사	324	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	자루스	605	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	김득신	453	10년 전
20009	웹서버 Could not reliably determine the server's fully qualified domain name	잘살아보자	312	10년 전
19998	PHP 텔레그램 푸쉬 봇 10	foxrain	1,383	10년 전
28348	SK 공시지원금 홈페이지 자동연동 API 1	Tosea	1,010	10년 전
28347	angularjs 수정작업 및 스크립트 작업 가능 하신분 계신가요?	페페오	608	10년 전
19997	OS 짧은 주소 만들기, htaccess RewriteRule 리다이렉션	잘살아보자	569	10년 전
19996	OS 파일분할 분할압축 해제	잘살아보자	382	10년 전
19995	웹서버 리눅스백그라운드실행	잘살아보자	498	10년 전
19993	PHP 로컬에서 자바스크립트 HTML 소스 가져오기 1	혀니천사	1,160	10년 전
8087	<초보분들을 위한 개념> CSS란 ? 2	ITBANK	1,203	10년 전
8065	오픈마켓, 개발 3년차에게 가능한 일인지? 21	승희아빠	1,883	10년 전
19990	jQuery JQuery 이미지 lazyload 플러그인입니다. 2	DMAN	962	10년 전
8063	g4->g5로 업데이트후 구글에서 검색노출 저조되는현상.. 1	레이파니	830	10년 전
8056	오픈마켓 오픈소스 구할수 있을까요? 6	승희아빠	1,329	10년 전
19989	기타 printf함수를 이용하여 문자 출력	잘살아보자	455	10년 전
19988	기타 printf함수를 이용하여 실수형 데이터 출력하기	잘살아보자	425	10년 전
19987	기타 printf함수를 이용하여 정수값 출력하기	잘살아보자	421	10년 전
19986	기타 정수값으로문자출력 putchar	잘살아보자	410	10년 전
19985	기타 c언어 기초강의 - 한문자 출력 명령어 putchar	잘살아보자	495	10년 전
19984	기타 C언어기초강의 - puts로 문자열 출력	잘살아보자	614	10년 전
19983	MySQL [MySQL] csv 파일을 직접 MySQL 테이블로 Import 하는 방법 (대용량 파일 import 팁)	잘살아보자	853	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	웹서버 리눅스 프로세스 검사, 조회	잘살아보자	436	10년 전
19975	웹서버 리눅스에서 네트워크 상태 보기	잘살아보자	459	10년 전
19974	웹서버 리눅스 80 포트 방화벽 열기	잘살아보자	792	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 팁)	잘살아보자	556	10년 전

이전 다음

3 4 5 6 7

전체 목록