(제목+내용으로만 검색해보고 없는것 같아서 올립니다. 내용상 중복되는 부분은.. ^^;)
모바일 웹이 활성화되면서, 하나의 코드로 여러 크기의 화면에 맞게 화면을 구성해주는 기법이 많이 도입되고 있습니다. 시하님도 v4 홈페이지에서 responsive layout을 구현하시면서 관심을 가지고 계시고, 아래 지운아빠님의 css를 이용한 레이아웃 컨트롤 도, 화면크기에 의한 조정은 아니지만, CSS를 이용해서 여러 layout으로 쉽게 바꾸는 것을 보여주셨습니다. 아마 여러 sir 회원분들도 비슷한 내용에 관심이 있거나, 이미 구현을 하셨으리라 생각됩니다.
"모바일 웹페이지를 따로 만드는 것이 더 낫지 않나?"
입니다. 비슷한 관심을 가지신 분들의 의견이 궁금하네요. ^^
어쨋든, 관련 링크를 남겨볼까 합니다. (원래 내용은 제 블로그 글로 ^^;)
(대부분의 링크는, 21가지 RWD 관련 툴 이라는 .net 글 에서 발췌했습니다.)
- Ethan MARCOTTE 의
Responsive Web Design 글: 최초로 responsive web design 이라는 단어를 사용하고, CSS3 media query를 이용한 화면 조정 예를 보임
- James Pears의 RWD에 대한 비판? 글 : 1. CSS3 media query는 모든 내용이 다 다운된 후에야 적용된다. 2. 데스크탑과 모바일 웹은, 보여주는 내용 자체가 다르다.
- 클라이언트 (css, js)에서 가능한 부분과 서버 (user agent를 기반으로 다른 내용 생성)에서 해야할 내용으로 나누어 접근: RESS: Responsive Design + Server Side Components
- 브라우저에 크기에 따라서 해당 css를 선택적으로 로딩하는 adapt.js
- 모든 모바일 환경에 대응하는 media query 템플릿: Andy Clark’s template
댓글 15개
반응형 웹디자인에서 가장 궁금한 것이 min-width 가 300 인데 본문에 나오는 이미지의 넓이가 300을 초과하면 이 이미지를 어떻게 처리해주는가에요.
img {max-width:300px} 로 처리하는 방법도 있겠지만 예컨데 900px 짜리가 300px 로 나오면 1/3 로 줄어드는 것인데, 이 때 이미지 내 설명문구 같은 것은 가독성 부분을 완전히 포기해야 하는 걸까요?
이미지 크기를 반응형 레이아웃에 따라 조절할 경우 CPU 점유율? 사용량?이 올라간다는 단점이 있다는 얘기도 들어본 것 같습니다.
일반 웹페이지에서는 문제가 덜 할 수 있지만 만약 쇼핑몰이라든지... 그런 경우는 어찌하는 것이 좋을까요?
img {max-width:300px} 로 처리하는 방법도 있겠지만 예컨데 900px 짜리가 300px 로 나오면 1/3 로 줄어드는 것인데, 이 때 이미지 내 설명문구 같은 것은 가독성 부분을 완전히 포기해야 하는 걸까요?
이미지 크기를 반응형 레이아웃에 따라 조절할 경우 CPU 점유율? 사용량?이 올라간다는 단점이 있다는 얘기도 들어본 것 같습니다.
일반 웹페이지에서는 문제가 덜 할 수 있지만 만약 쇼핑몰이라든지... 그런 경우는 어찌하는 것이 좋을까요?
반응형 웹디자인을 할 때는 모바일에서부터 시작해서 확장해나가는 것이 이상적이라고 하더군요.
처음 디자인 할 때부터 이러한 상황에 대해 인지를 하고 디자인을 하는 것이, 단순히 반응형으로만 퍼블리싱하는 것보다 나을 것 같습니다.
한편으로 이런 생각도 해봤는데 피씨는 xhtml/css2.1↑/px base로, 모바일은 html5/css3/% base 로 CSS를 작성하여 서버사이드에서 브라우저에 따라 알맞는 CSS를 내보내주는 방법으로 출력을 하면 어떨까도 싶습니다. 물론 디자인 혹은 기획 단계에서 이 상황을 충분히 인지하고 진행을 시켜야겠지요.
모바일 페이지를 따로 만들지 않고, 미디어쿼리를 이용하지 않아도 원하는 결과를 얻을 수 있는 또 다른 대안이 되지 않을까 싶습니다.
처음 디자인 할 때부터 이러한 상황에 대해 인지를 하고 디자인을 하는 것이, 단순히 반응형으로만 퍼블리싱하는 것보다 나을 것 같습니다.
한편으로 이런 생각도 해봤는데 피씨는 xhtml/css2.1↑/px base로, 모바일은 html5/css3/% base 로 CSS를 작성하여 서버사이드에서 브라우저에 따라 알맞는 CSS를 내보내주는 방법으로 출력을 하면 어떨까도 싶습니다. 물론 디자인 혹은 기획 단계에서 이 상황을 충분히 인지하고 진행을 시켜야겠지요.
모바일 페이지를 따로 만들지 않고, 미디어쿼리를 이용하지 않아도 원하는 결과를 얻을 수 있는 또 다른 대안이 되지 않을까 싶습니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12281 |
JavaScript
팝업창을 브라우저 해상도 구분없이 항상 중앙에 띄우기 입니다.
1
|
| 20386 | |
| 12280 |
jQuery
간단한 셀렉트 드롭다운 제이쿼리
|
| 12279 |
JavaScript
우클릭해제 소스 보기 자바스크립트 입니다.
|
| 12278 |
JavaScript
미리보기 소스 입니다.
|
| 12277 |
JavaScript
움직임이 자연스러운 자바시계 입니다.
|
| 12276 |
JavaScript
특정사람에게 메일 보내기 입니다.
|
| 12275 |
JavaScript
DirectX의 와이프 기능을 사용한 이미지 스와핑 효과 내기 입니다.
|
| 12274 |
JavaScript
iframe 써서 노 프레임 효과 내기 입니다.
|
| 12273 |
jQuery
이미지 없이 구현하는 간단한 별점 기능 제이쿼리
|
| 12272 | |
| 12260 |
node.js
Node.js - 실시간 위치 추적 (1)
11
|
| 360 | |
| 12258 | |
| 12257 | |
| 12256 | |
| 12255 | |
| 12253 | |
| 12252 | |
| 12251 | |
| 12250 | |
| 12249 | |
| 12248 | |
| 12247 | |
| 12246 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기