[하루한글] 파운데이션 interchange 정보
반응형화 [하루한글] 파운데이션 interchange
본문
하루에 한글을 쓰기 위해서 고민하다가,
zurb 파운데이션의 반응형 웹 대응 컴포넌트인 interchange 를 살펴보기로 했습니다.
원 주소는 http://foundation.zurb.com/docs/components/interchange.html 입니다.
interchange는 화면 폭 (의 변화)에 따라서, 주어진 규칙에 따라서 적절한 요소들을 교체합니다.
이미지를 예를 들면, 모바일에서는 작은 이미지로 치환하게 되고,
html 전체를 바꿔치기 하기도 하고요.
아래는 화면 크기 (small, medium, large <- 미리 정의된 크기) 에 따라서 적절한 이미지로 교체하는 코드입니다.
<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">
미리 정의된 화면 크기표는 다음과 같네요.
| 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>
물론 적절한 크기의 이미지는 서버쪽에서 미리 준비해놔야 하겠죠..
추천
5
5
댓글 4개
감사합니다^^
말로만 듣던 파운데이션이군요~
아직 전진님의 글 밖에는 못봤지만 interchange는 상당히 매력적이네요~~
이미지 처리하는거요ㅎ
근데 이게 익스 하위버전은 어디까지 지원할까나요?
(이놈의 익스 걱정ㅜㅜ)
---
http://gnuboard.org/ 는 처음 봤어요~그누보드도 위키가 있었네용?
말로만 듣던 파운데이션이군요~
아직 전진님의 글 밖에는 못봤지만 interchange는 상당히 매력적이네요~~
이미지 처리하는거요ㅎ
근데 이게 익스 하위버전은 어디까지 지원할까나요?
(이놈의 익스 걱정ㅜㅜ)
---
http://gnuboard.org/ 는 처음 봤어요~그누보드도 위키가 있었네용?
파운데이션 자체가 IE9+이지만, interchange는 javascript라서 다 될줄 알았는데
사이트에 따르면 JS 컴포넌트들도 IE9+ 이라네요..
http://foundation.zurb.com/docs/compatibility.html
그누보드 위키는, 첫 시작은 거창한 목표가 있었는데,
지금은 그냥 심심풀이로 하고 있죠.. ^^;
사이트에 따르면 JS 컴포넌트들도 IE9+ 이라네요..
http://foundation.zurb.com/docs/compatibility.html
그누보드 위키는, 첫 시작은 거창한 목표가 있었는데,
지금은 그냥 심심풀이로 하고 있죠.. ^^;
저도 위키는 한 번 도전해보고 싶은데...
아는게 별로 없어서ㅎㅎㅎ
파운데이션은 뭐 익스에선 안되더라도 개인적으로 한 번 살펴봐야겠어요^^;
아는게 별로 없어서ㅎㅎㅎ
파운데이션은 뭐 익스에선 안되더라도 개인적으로 한 번 살펴봐야겠어요^^;
위키는, 그냥 메모장 수준으로 사용하고 있습니다..
동하아빠님이 만드신 나린위키가 너무 강력해서, 확장하기도 편하고요.. ^^
동하아빠님이 만드신 나린위키가 너무 강력해서, 확장하기도 편하고요.. ^^
