하루에 한글을 쓰기 위해서 고민하다가,
zurb 파운데이션의 반응형 웹 대응 컴포넌트인 interchange 를 살펴보기로 했습니다.
원 주소는 http://foundation.zurb.com/docs/components/interchange.html 입니다.
interchange는 화면 폭 (의 변화)에 따라서, 주어진 규칙에 따라서 적절한 요소들을 교체합니다.
이미지를 예를 들면, 모바일에서는 작은 이미지로 치환하게 되고,
html 전체를 바꿔치기 하기도 하고요.
아래는 화면 크기 (small, medium, large <- 미리 정의된 크기) 에 따라서 적절한 이미지로 교체하는 코드입니다.
[code]
<img data-interchange="[img/interchange/space-small.jpg, (small)],
[img/interchange/space-medium.jpg, (medium)],
[img/interchange/space-large.jpg, (large)]"
src="img/interchange/space-large.jpg">
[/code]
미리 정의된 화면 크기표는 다음과 같네요.
| Name | Media Query |
|---|---|
| default | only screen |
| small | only screen |
| small-only | only screen and (max-width: 40em) /* 0, 640px */ |
| medium | only screen and (min-width: 40.063em) /* 641px */ |
| medium-only | only screen and (min-width: 40.063em) and (max-width: 64em) /* 641px, 1024px */ |
| large | only screen and (min-width: 64.063em) /* 1025px */ |
| large-only | only screen and (min-width: 64.063em) and (max-width: 90em) /* 1025px, 1440px */ |
| xlarge | only screen and (min-width: 90.063em) /* 1441px */ |
| xlarge-only | only screen and (min-width: 90.063em) and (max-width: 120em) /* 1441px, 1920px */ |
| xxlarge | only screen and (min-width: 120.063em) /* 1921px */ |
| landscape | only screen and (orientation: landscape) |
| portrait | only screen and (orientation: portrait) |
| retina (4.2.1) | only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi),only screen and (min-resolution: 2dppx) |
작동되는 코드는 여기서 확인하세요: http://dev.gnuboard.org/tools/ish/?url=http%3A%2F%2Fdev.gnuboard.org%2Ffoundation%2Finterchange.html#hay
그리고, 만일 div 태그에 직접 data-interchange 를 적용하면 백그라운드 이미지로 사용한다고 하네요.
<div data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]"></div>
물론 적절한 크기의 이미지는 서버쪽에서 미리 준비해놔야 하겠죠..
댓글 4개
게시글 목록
| 번호 | 제목 |
|---|---|
| 301 | |
| 297 | |
| 292 | |
| 291 | |
| 290 | |
| 288 | |
| 284 | |
| 282 |
반응형화
부트스트랩 4 알파
1
|
| 281 |
반응형화
플레스박스_1
|
| 276 |
반응형화
테마 지원 후엔
4
|
| 264 |
반응형화
반응형 디자인
11
|
| 251 |
반응형화
여러분들은 반응형 작업하실 때!
12
|
| 239 | |
| 237 | |
| 234 |
반응형화
의무와 재미 사이
2
|
| 226 |
반응형화
부트스트랩 초보 질문~!
7
|
| 224 |
반응형화
플렉스박스 어렵네요..
1
|
| 223 |
반응형화
[하루한글] 반응형 이미지
|
| 220 |
반응형화
[하루한글] 엘리먼트 쿼리
2
|
| 216 |
반응형화
[하루한글] 웹 컴포넌트
3
|
| 211 | |
| 203 |
반응형화
Polymer에서의 반응형 웹
7
|
| 194 | |
| 190 | |
| 179 | |
| 168 | |
| 157 |
반응형화
부트스트랩 vs 파운데이션
10
|
| 154 |
반응형화
스타일 가이드, 패턴 라이브러리
2
|
| 148 |
반응형화
반응형 웹 in 2015
5
|
| 142 |
반응형화
안녕하세요
5
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기