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

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

전진
프로필 보기이 회원 글보기
 · 13년 전 · 1271
(HTMLn/CSSn 게시판이 사라질 예정이어서, 여기로 옮깁니다. 12-09-06)
  • 원글정보:  작성일시 
  • 조회 558
  • 댓글 7

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

우선, 기존 사이트의 모바일이 너무 작아서, 데스크탑을 1200x800 이라고 했을때, 모바일 선택시 iPhone의 상대크기가 나오도록 수정했고, 중간크기인 iPad 세로보기 (Tablet Portrait) 크기도 추가했습니다. 
그리고 위아래로 쭈욱 나열할 필요가 없어서 float:left로 하는등 불필요한 부분은 지웠습니다.
내부적으로는, 폭과 높이 계산하는 부분이 좀 잘못된것 같아서 수정했고요..


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

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

게다가, 지금의 방법은, 왼쪽 사이드바를 아래로 보내는 등, 그리드의 순서를 바꿀 수는 없기에 좀더 유연한 프로토 타입을 생각해 봐야 할것 같습니다..
그래도 혹시 사용해 보실 의향이 있는 분은, less 를 이용하는 styles.css 를 수정하셔야 하는데, 그렇게 잘 짜여진 것 같지도 않고, 주석이 그렇게 많지 않아서.. 따로 알려드릴까 합니다.  그럼 ^^
   

댓글보기

             전진 2012.04.30 09:21:13       

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


             빌딩 2012.04.30 11:18:22       

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

        
            전진 2012.04.30 11:35:56       

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

        
            mindlelle 2012.05.05 11:02:57       

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


             전진 2012.05.05 11:10:08       

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

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


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
28403
반응형 웹 스타디 초안 4
28402
zurb의 foundation (반응형 프레임워크)과 off-canvas 방식 가변형 레이아웃
28401
반응형 레이아웃 와이어프레임 현재글
28398
가변형 레이아웃/네비게이션 패턴 2
28397
반응형 이미지 기법들
28394
반응형 웹 디자인 (Responsive Web Design) 2
4504
개발자 아이모듈 관리자페이지를 새로 만들고 있습니다. 11
26593
퍼블리셔 이경우 어떻게 해야할까요?? 6
4502
개발자 포인트 어떻게 올리나여 1
18132
정규표현식 정규식 테스트 가능한 사이트 추천해드립니다~~ 9
28388
구글 애드센스 배경색 설정 (로딩시 노란색으로 깜빡이는 문제 해결) 5
4496
개발자 모바일 기기 해상도와 웹브라우저 해상도 5
4491
개발자 국내/국외 접속국가에 따라서 국문/영문 홈페이지 보여짐은 어떻게?? 4
4486
개발자 도대체...포인트는요... 4
4483
개발자 옷.. 에스알소프트로 출범.. 2
4482
개발자 우와 멋져요~
4479
개발자 cakephp 고수님들께 여쭙니다. 2
18122
PHP 유튜브 API를 활용한 영상 업로드 및 활용 9
18120
JavaScript 흔한 트위터,페이스북 퍼가기 자바스크립트 1
26590
퍼블리셔 우왕..퍼블리셔도 생겼네요~ 2
18113
Linux 리눅스 FFMPEG 자동실행소스(자작임) 6
24419
기획자 리뉴얼 축하드립니다 1
4474
개발자 리자님 익스7로좀 봐주세용 4
4465
개발자 사이트 리뉴얼의 전말 8
4461
개발자 토크게시판과 자유게시판의 차이? 3
4460
개발자 상큼해졌요~
4451
개발자 새로 바뀐 검색 어떠세요? 8
26589
퍼블리셔 이뻐요^^
4450
개발자 새로 바뀐 홈피 넘 멋져요.^^
4448
개발자 아니 홈피가 바꼈네요. 1
24418
기획자 너무예쁘게 바뀌었네요.^^
31037
표준화 그누보드4 웹 표준화 강좌를 시작하며 37
26390
인터넷 쇼핑몰, 생존 노하우는? 6
4446
개발자 오늘 가입했습니다. 1
26585
퍼블리셔 저는 디자이너 이지만요.. 3
26581
퍼블리셔 퍼블리셔 게시판 생겼단 말 듣고 달려왔습니다! 3
26578
퍼블리셔 퍼블리셔라고 말하기는 참 미안하지만..... 2
18098
PHP 웹 소스 긁어오기 14
4443
트래픽 필드 오류로 1
18097
PHP 쇼핑몰과 프로그램 연동작업해주실분 구해요. 메뉴얼있음
26388
구글 크롬, 젤리빈 기본브라우저로…의미는? 1
18094
Mobile 스마트폰에서 영상소스는? 2
30596
HTML 레이아웃이 비뚤합니다. 3
26387
오비고, 스마트TV용 HTML5기반 웹앱 공개
18091
정규표현식 정규식으로 html 태그 지우기 2
4445
기타 염치불구하고 추천좀 부탁드리겠습니다.
18088
jQuery 이미지 슬라이더 만들어보았습니다. 2
18086
jQuery 순차애니메이션 질문좀 드리겠습니다. 1
18085
기타 드림위버 cs6 코딩 글깨집니다.
18082
Linux CentOS release 6.3 Starting httpd: Warning: DocumentRoot [/home/myhome/public_html/] does not exist [ OK ] 뜰 때 2
18081
PHP 접속시마다 랜덤한 페이지를 뿌려주려면
18078
Linux 리눅스용 웹에디터 Kompozer 입니다. 2
18076
PHP 에디터 홈페이지에 삽입하는 방법 1
18074
node.js node.js 0.8.2 번역 문서 1
18072
jQuery CSS3처럼 이미지 라운딩 기능의 제이쿼리 1
18070
jQuery 이 플래시메뉴처럼 바꿔 만들려면... 1
18069
기타 플래시 버전 좀 내려서 저장해주시겠나요-_-??
18066
Mobile 가로 폭 문제 2
18064
MySQL MySQL 테이블명 대소문자 구분안하기 1
18057
PHP 고수님들 도와주세요. 메일발송문제입니다. 6
18056
Flash 플래시 네비 관련
30588
HTML DIV의 justify 정렬 문제 7
18055
JavaScript ie 에서는 되는데 크롬에서는 왜 안될까요?
18054
PHP 질답코너에 문의를 올려도 반응이 없어 도움을 요청합니다.
30585
HTML CGF 사용 방법 (지운아빠님 보시면 참조되실 것 같아서. ㅎㅎ) 2
18051
기타 테이블깨짐 원인좀 알려주세요~~ 2
18050
jQuery 이미지 슬라이드 질문 드립니다.
18048
Mobile 모바일 페이지 확대 축소 도움부탁려요 1
18047
PHP HTTP 로그인 인증창에 대해 질문합니다 도와주세요ㅠㅠ
18044
JavaScript HTTP 로그인 인증창에 대해 질문합니다 도와주세요ㅠㅠ 2
26386
“웹개발자도 쉽게“…새 양방향 3D표준 눈길
18042
기타 플래쉬에 관련된 질문입니다. 1
30580
HTML 메뉴하나 따라 만들어보고 있는데.. Css질문 4
4425
커뮤니티 사이트의 미래와 그누보드 확장성 17
18039
JavaScript 자바에서... 2
18037
Linux 리눅스 특정확장자 하위디렉토리까지 일괄삭제하기 1
18031
JavaScript list.skin.php에서 자바스크립트 출력 문제 입니다. 5
18028
기타 홈페이지 하나 만드려고 하는데요. 호스팅? 2
18027
Mobile 모바일 사이트는 웹표준 코딩 할려면 어떻게 하나요
18022
JavaScript JScript.Encode 복호화 방법 4
18018
MySQL db 값이 가끔 안넘어가는경우가..... 3
18016
MySQL 게시판생성시 테이블을 별도로 생성할때의 장점은? 1
18009
기타 뻔뻔하게 대놓고 추천 부탁드립니다 꾸뻑~~ 6
4423
여기에도 장비 필요하신분들이 있나요 1
18003
jQuery 메인 탭 롤링 배너 입니다. 5
18000
JavaScript jQuery 쉽게 참고 할만한 사이트 없나요? 2
17999
node.js NodeJS 추천사이트
17996
JavaScript 팝업창 관련 질문드려요! 2
17993
JavaScript 고수님들 도와주세요. "웹 페이지 오류 세부 정보"에러가 뜨는데 2
17989
기타 구인 구직 사이트를 개발하고 싶은데 3
17987
jQuery www.hyundaiusa.com 메뉴를 좀 여쭤봅니다. 1
17986
Mobile 모바일 동영상게시판 그누보드스킨 중 무엇을 쓰면 좋을까요?
17985
jQuery jquery 드롭다운메뉴 질문입니다.
17984
jQuery JQuery 소스 해결 좀 부탁드립니다.
4411
모바일 브라우져에서 웹소켓(Websocket) 11
17979
PHP UNION ALL 문의 드립니다람쥐~ ★★★★☆ 4
30576
HTML ssl 웹페이지 적용 질문 드립니다. 3
26383
방문자 늘리기VS개발능력 간 교환이 가능한가요? 2
17975
PHP 공지사항이나 기타 메인페이지에 한줄씩 노출 3
30569
HTML ssl 웹페이지 적용 질문드립니다. 6
이전 다음
전체 목록