(제목+내용으로만 검색해보고 없는것 같아서 올립니다. 내용상 중복되는 부분은.. ^^;)
모바일 웹이 활성화되면서, 하나의 코드로 여러 크기의 화면에 맞게 화면을 구성해주는 기법이 많이 도입되고 있습니다. 시하님도 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를 내보내주는 방법으로 출력을 하면 어떨까도 싶습니다. 물론 디자인 혹은 기획 단계에서 이 상황을 충분히 인지하고 진행을 시켜야겠지요.
모바일 페이지를 따로 만들지 않고, 미디어쿼리를 이용하지 않아도 원하는 결과를 얻을 수 있는 또 다른 대안이 되지 않을까 싶습니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12438 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 12437 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 12436 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 12435 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 12434 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 12433 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 12432 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 12431 |
MySQL
대소문자 데이터 조회하기
|
| 12430 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 12429 | |
| 12428 |
PHP
신문 기사를 긁어오기 입니다.
|
| 12427 |
JavaScript
시도, 구군, 동 주소 select
|
| 12426 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 12425 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 12424 |
PHP
rss 읽어오기 입니다.
|
| 12423 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
| 12422 | |
| 12421 |
JavaScript
키보드,마우스 등 불펌방지 입니다.
|
| 12420 |
JavaScript
해상도에 따라 서로 다른 페이지로 접속 하기 입니다.
|
| 12419 |
JavaScript
특정페이지에서 자동으로 새로고침 하기 입니다.
|
| 12418 |
JavaScript
마우스 오버시 이미지 안쪽에 테두리주기
|
| 12417 |
node.js
git 사용메뉴얼 보면 깝깝 하네요
|
| 12416 | |
| 12415 | |
| 12414 |
JavaScript
간결한 레이어 메뉴 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기