N스크린 대응을 위한 해상도별 이미지 썸네일 및 IE6용 리사이징 js, css 정보
스타일 N스크린 대응을 위한 해상도별 이미지 썸네일 및 IE6용 리사이징 js, css본문
2013년 5월 14일 추가
다음 내용 중 img_fix 관련 내용은 IE6 에 한해 유효합니다. IE7 이상 및 이외 브라우저는 max-width 만으로 대응이 가능합니다.
목차
- 들어가기
-
소스위치- css/default.css img_fix 클래스
- css/mobile.css img_fix 클래스
- skin/board/basic/view.skin.php // 이미지 등비율 리사이징
-
소스 해석
들어가기
그누보드4s 에서 웹 접근성만큼 큰 화두는 바로 'PC와 Mobile 분리' 그리고 '원소스 멀티유즈(반응형)' 중 한가지를 택하는 것이었습니다.
SIR 자유게시판 이용자시라면 연초에 있었던 모바일vs반응형, 반응형vs모바일 설문조사를 기억하실 것입니다.
설문조사 결과보기
이 설문조사에서는 모바일vs반응형이 38 vs 38로 동률을 이루어 결론이 나지 않았었습니다.
이러한 상황 속에서, 우리 개발진은 그누보드4s 를 국내에서도 큰 이슈가 만들어지고 있는 반응형으로 진행하기로 결심했으나, bbs 솔루션을 반응형으로 구현하기에는 아직 시장이 무르익지 않았다는 잠정적 결론을 내리기에 이르렀습니다.
그 후 우리는 그누보드4s 를 PC와 Mobile 을 분리하기로 결정했고, 최소한의 수정만으로 둘을 분리하도록 작업했습니다. 어쩌면 최소한의 수정보다는 사용자가 PC와 Mobile 간 수정에 있어 가장 편리하도록 작업되었다는 표현이 더 적절할 것입니다.
소스 위치
- css/default.css img_fix 클래스
- css/mobile.css img_fix 클래스
- skin/board/basic/view.skin.php // 이미지 등비율 리사이징
css/default.css img_fix 클래스
/* 이미지 등비율 리사이징 */
.img_fix {float:left;width:100%;height:auto}
4.0b4 float:left 삭제
css/mobile.css img_fix 클래스
/* 이미지 등비율 리사이징 */
.img_fix {float:left;width:100%;height:auto}
4.0b4 float:left 삭제
skin/board/basic/view.skin.php // 이미지 등비율 리사이징
// 이미지 등비율 리사이징
$(window).load(function() {
view_image_resize();
});
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
});
function view_image_resize()
{
var $img = $("#bo_v_atc img");
var img_wrap = $("#bo_v_atc").width();
$img.each(function() {
var img_width = $(this).width();
$(this).data("width", img_width); // 원래 이미지 사이즈
if (img_width > img_wrap) {
$(this).addClass("img_fix");
} else if (img_width <= img_wrap && img_width >= $(this).data("width")) {
$(this).removeClass("img_fix");
}
});
}
소스 해석
이미지 등비율 리사이징은, 컨텐츠 블럭 영역 내에 포함된 이미지의 넓이값이 컨텐츠 블럭 영역의 넓이값보다 클 때, 이미지의 넓이값을 컨텐츠 블럭 영역의 넓이값과 같게 맞추는 것입니다. 이 때 높이는 정비율로 함께 맞춰집니다.
이 때 정비율로 맞춰주는 스타일이 img_fix 이며, 스크립트에 의해 자동으로 추가되는 구조입니다.
그누보드4s 의 basic 게시판 스킨에는 적용이 완료된 상태며, 만약 basic 게시판 스킨이 아닌 일반 혹은 기타 페이지에서 적용하시고 싶은 경우 해당 이미지에 img_fix 클래스를 부여하시면 됩니다.
다음 예제에서 샘플 코드를 확인해보세요.
<img src="이미지경로" alt="" class="img_fix">
이 방식은 반응형 웹 작업 시 활용에 따라 유용하게 사용할 수 있습니다.
특히 basic 게시판 스킨에서는 기기의 사이즈에 따라 5가지의 썸네일을 제공하고 있어, 게시판 반응형 웹 작업 시에도 상당한 편의를 제공하공 있습니다.
기존 방식과의 차이점
기존 방식은 이미지의 넓이와 높이를 스크립트로 계산하여 새롭게 적용하는 방법이었습니다. 클라이언트 사이드에서 처리할 작업량이 새로운 방법에 비해 상대적으로 더 많았습니다.
새로운 방법은 스크립트에서는 이미지의 넓이가 컨텐츠 블럭보다 넓은지 검사한 후, 넓이를 맞추는 CSS 클래스만 부여하는 것에서 주어진 역할을 완료하며, 이미 캐시된 스타일 적용으로 실행 속도가 더 빨라지게 됩니다.
댓글 8개
전진님의 조언과 제안 등 감사한 부분이 있었는데 마치 글로 고지하듯 알려드리게 된 것 같아 죄송스럽습니다.ㅠㅠㅠ
제가 혹시 반응형으로 해볼수 있을까 g4s 코드 들여다봐야 하는데..
아직 시간이 안나서.. ^^;
PC, 모바일 버전을 구분하면서 든 생각인데, 모바일 버전을 따로 해도 반응형을 버릴 순 없겠더라구요. 몇가지 테스트도 해봤는데 제 입장에서는 가능성이 충분하다고 여겨졌습니다.
이건 제 개인 의견입니다. ^^
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=247 이쪽에서 댓글로 주시면 많은 도움이 되겠습니다. ^^
클라이언트에게 괜히 반응형 웹 얘기를 꺼낸게 아닌가도 생각해 봅니다. ㅎㅎ
복잡한 우리나라의 웹 페이지를 반응형으로 구현하는게 쉽지 않을텐데.. 암튼 화이팅해봅니다.
참 궁금한게 하나 있는데요~!
g4s, g4, gtd 중에서 반응형으로 구현하기 그나마 수월한게 g4s겠죠?
그누보드dtd 도 좋은 구조를 가진 버전입니다.
g4s 는 그누보드4, dtd 가 가진 접근성 한계를 개선한 버전이며, 역시 좋은 구조를 가졌습니다.
우물에서 물 길는다는 뻔한 이야기일지 모르겠지만 중요한 것은 작업자의 숙련도일 것입니다. ^^;;