2013년 5월 14일 추가

다음 내용 중 img_fix 관련 내용은 IE6 에 한해 유효합니다. IE7 이상 및 이외 브라우저는 max-width 만으로 대응이 가능합니다.

목차

1. 들어가기


2. 
   소스위치
   
   
   
   1. css/default.css img_fix 클래스
   
   
   2. css/mobile.css img_fix 클래스
   
   
   3. skin/board/basic/view.skin.php // 이미지 등비율 리사이징
   
   
   
   


3. 
   소스 해석
   
   
   
   1. 기존 방식과의 차이점
   
   
   
   

들어가기

그누보드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}

css/mobile.css img_fix 클래스

/* 이미지 등비율 리사이징 */

.img_fix {float:left;width:100%;height:auto}

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 클래스만 부여하는 것에서 주어진 역할을 완료하며, 이미 캐시된 스타일 적용으로 실행 속도가 더 빨라지게 됩니다.