반응형 웹 디자인 (Responsive Web Design)
(제목+내용으로만 검색해보고 없는것 같아서 올립니다. 내용상 중복되는 부분은.. ^^;)


모바일 웹이 활성화되면서, 하나의 코드로 여러 크기의 화면에 맞게 화면을 구성해주는 기법이 많이 도입되고 있습니다. 시하님도 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개
13년 전
제가 한편으로는 추가적인 js 등의 사용을 극도로 꺼리는 편이라 위와 같은 생각을 하게 된 것일지도 모르겠습니다.
예를 들면, 'IE6~8 등에서 CSS media query를 처리할 수 있게 하는 Respond.js, CSS3-Mediaqueries.js' 같이 유용한 방법이 있더라도 가능한 한 추가적인 js 를 사용하지 않고 해결하는 방법을 선호하는 거지요... 쥐뿔 실력도 없는게 ㅠㅠ
예를 들면, 'IE6~8 등에서 CSS media query를 처리할 수 있게 하는 Respond.js, CSS3-Mediaqueries.js' 같이 유용한 방법이 있더라도 가능한 한 추가적인 js 를 사용하지 않고 해결하는 방법을 선호하는 거지요... 쥐뿔 실력도 없는게 ㅠㅠ
13년 전
네.. 제 고민도, 반응형 디자인이 재밌기는 한데,
실제로는 데스크탑용과 모바일용을 따로 만드는 것이 낫지 않을 까해서 남겼던 글입니다.
그런데, 중간에 테블릿이 끼니까, 데스크탑+테블릿나, 테블릿+스마트폰을 묶어서 처리하면 그래도 장점이 있지 않을까 했던것입니다.
가장 처음 생각했던 것은, 제가 시험했던 대상이기도 한, 그누보드 모바일을 따로 만들필요가 있나 하는 생각이었고요..
지적하신 이미지 부분은.. 스마트폰위에서는 어짜피 어떤 방식이든 그림을 작게 만들어야 할테니 서버든 css3 어디선가는 처리해야 할테고요..
실제로는 데스크탑용과 모바일용을 따로 만드는 것이 낫지 않을 까해서 남겼던 글입니다.
그런데, 중간에 테블릿이 끼니까, 데스크탑+테블릿나, 테블릿+스마트폰을 묶어서 처리하면 그래도 장점이 있지 않을까 했던것입니다.
가장 처음 생각했던 것은, 제가 시험했던 대상이기도 한, 그누보드 모바일을 따로 만들필요가 있나 하는 생각이었고요..
지적하신 이미지 부분은.. 스마트폰위에서는 어짜피 어떤 방식이든 그림을 작게 만들어야 할테니 서버든 css3 어디선가는 처리해야 할테고요..
13년 전
나중에라도 개선된 정보나 방법을 얻게 되시면 알려주세요. ^^
지금 얼핏 든 생각인데 스크립트로 이미지의 alt 내용을 이미지 바로 하단에 뿌려주는 방법도 한 대안이 될 수 있을 거 같습니다. (특히 쇼핑몰에서)
이미지야 크기가 줄어들어도 크게 인식률이 낮아지진 않지만 글자 같은 경우가 걱정인데 이렇게 하면 대체텍스트가 제공되니 접근성이 어느 정도 보장되지 않을까요?
지금 얼핏 든 생각인데 스크립트로 이미지의 alt 내용을 이미지 바로 하단에 뿌려주는 방법도 한 대안이 될 수 있을 거 같습니다. (특히 쇼핑몰에서)
이미지야 크기가 줄어들어도 크게 인식률이 낮아지진 않지만 글자 같은 경우가 걱정인데 이렇게 하면 대체텍스트가 제공되니 접근성이 어느 정도 보장되지 않을까요?
13년 전
오.. alt 보여주는 것, 딱이네요. ^^
자동으로 alt를 워터마크로 그림에 넣어주는 것도 괜찮겠네요..
아마, 반응형을 사용하려면, 이미지에 글을 넣지 말라는 가이드라인이 필요할듯..
자동으로 alt를 워터마크로 그림에 넣어주는 것도 괜찮겠네요..
아마, 반응형을 사용하려면, 이미지에 글을 넣지 말라는 가이드라인이 필요할듯..
13년 전
음
게시글 목록
| 번호 | 제목 |
|---|---|
| 4132 | |
| 17083 |
jQuery
hover 이미지 효과를 쓰고 싶습니다!
1
|
| 17082 |
Linux
[python]버클리 DB 사용 해 보기
|
| 17081 | |
| 17080 | |
| 17079 | |
| 17078 | |
| 17077 |
Linux
csv file 에 대해
|
| 4127 | |
| 17074 | |
| 17073 | |
| 17072 |
Linux
프로그램 실행중 환경변수를 확인하기
|
| 17071 |
Linux
터미널에서 쉽게 로그아웃하기
|
| 17070 |
Linux
arp 명령 이용하여 아이피,맥 셋팅하기
|
| 17069 |
Linux
프로그램 정지 상태 조사(strace 이용)
|
| 17068 |
jQuery
도전해BoA요~ 1탄
|
| 17063 | |
| 17059 |
jQuery
마우스 오버시 나오게 할려면 어떻게하나요?
3
|
| 17057 |
PHP
질문.
1
|
| 4119 | |
| 17053 | |
| 17050 |
Linux
mysql replication 깨졌을때
2
|
| 17049 |
Linux
라이브 시디 받을 수 있는곳
|
| 17048 | |
| 17047 |
Linux
1번 cd 이용하여 grub 복구하기
|
| 17046 | |
| 17045 |
Linux
디렉토리의 사이즈 출력해주는 쉘
|
| 17036 |
JavaScript
3개의 배너를 돌리는 스크립트
8
|
| 17035 |
Linux
경로에서 파일명만 추출하기
|
| 17034 |
Linux
텍스트 계산기
|
| 17033 |
Linux
패치 파일 만들어 보기
|
| 17032 | |
| 17031 |
Linux
절대경로,상대경로 확실히 이해하기
|
| 17030 |
Linux
최신 커널 버전 간단히 확인하기
|
| 17029 |
Linux
심볼릭 링크와 하드 링크
|
| 17028 |
Linux
umask
|
| 17027 |
Linux
iptables 관련
|
| 17026 |
Linux
xferlog 분석
|
| 17025 |
Linux
iperf 로 통신속도 측정하기
|
| 17024 |
Linux
프로세스 빨리 종료하기
|
| 17023 |
Linux
utf8 mrtg 실행되지 않을때
|
| 17022 | |
| 17021 |
Linux
커널 모듈 수정하기
|
| 17019 | |
| 30314 | |
| 17016 | |
| 17014 | |
| 17010 |
JavaScript
제이쿼리 슬라이드 질문입니다!
3
|
| 17009 | |
| 17008 |
Linux
debian 3.1 업데이트가 되지 않을때?
|
| 17007 | |
| 17006 | |
| 17005 |
Linux
php 확장 모듈 설치하기
|
| 17003 | |
| 17000 | |
| 30311 | |
| 16992 | |
| 16990 | |
| 16983 |
MySQL
mysql 기본 명령어들이에요.
6
|
| 16982 | |
| 16976 |
PHP
문자열 자르는 소스입니다.
5
|
| 16971 | |
| 16969 | |
| 16965 |
MySQL
[Q] 테이블 합치는법은 ?
3
|
| 4110 | |
| 16957 |
JavaScript
도와주세요ㅜㅜ
7
|
| 16955 |
PHP
php Snoopy..
1
|
| 16954 | |
| 16948 | |
| 16947 | |
| 16946 |
Linux
history 명령에 대해
|
| 16944 | |
| 16941 |
node.js
웹호스팅과 Node.js 호스팅의 연동이 가능할까요?
2
|
| 16940 |
JavaScript
스크립트로 프린트 출력설정하기
|
| 16939 |
Linux
arp 스푸핑한 서버 어떻게 찾나?
|
| 16938 | |
| 16937 |
Flash
채팅방 스크룰바
|
| 16935 |
Flash
DB연동 로그인
1
|
| 16934 |
Flash
플래시 mp3
|
| 16932 |
JavaScript
“ 플래시보고 만든 글자 타이핑 소스입니다. ”
1
|
| 16931 |
JavaScript
즐겨찾기 모두 지원
|
| 16929 |
JavaScript
홈페이지에 항상있는 오른쪽 퀵
1
|
| 30304 | |
| 16926 |
Linux
ls 했을때 디렉토리 색깔이 어둡다면?
2
|
| 4098 | |
| 30297 | |
| 16923 | |
| 4097 | |
| 30296 | |
| 16921 | |
| 16916 | |
| 16914 | |
| 30288 |
HTML
반응형 레이아웃 와이어프레임
7
|
| 16912 | |
| 16908 |
jQuery
jQuery 시리즈 동영상 강좌 리스트
3
|
| 16907 |
Linux
tcpdump 간단 사용
|
| 16906 | |
| 16905 |
Linux
ssh 접속 지연이 발생할때
|
| 16904 |
Linux
swap 생성
|
| 16903 |
Linux
dmesg 클리어 하고 싶을 때
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기