다음 내용 중 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 클래스
2 | <br>.img_fix {float:left;width:100%;height:auto} |
4.0b4 float:left 삭제
css/mobile.css img_fix 클래스
2 | <br>.img_fix {float:left;width:100%;height:auto} |
4.0b4 float:left 삭제
skin/board/basic/view.skin.php // 이미지 등비율 리사이징
02 | <br>$(window).load(function() { |
03 | <br> view_image_resize(); |
06 | <br> $("a.view_image").click(function() { |
07 | <br> 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"); |
11 | <br><br>function view_image_resize() |
13 | <br> var $img = $("#bo_v_atc img"); |
14 | <br> var img_wrap = $("#bo_v_atc").width(); |
15 | <br><br> $img.each(function() { |
16 | <br> var img_width = $(this).width(); |
17 | <br> $(this).data("width", img_width); |
18 | <br> if (img_width > img_wrap) { |
19 | <br> $(this).addClass("img_fix"); |
20 | <br> } else if (img_width <= img_wrap && img_width >= $(this).data("width")) { |
21 | <br> $(this).removeClass("img_fix"); |
소스 해석
이미지 등비율 리사이징은, 컨텐츠 블럭 영역 내에 포함된 이미지의 넓이값이 컨텐츠 블럭 영역의 넓이값보다 클 때, 이미지의 넓이값을 컨텐츠 블럭 영역의 넓이값과 같게 맞추는 것입니다. 이 때 높이는 정비율로 함께 맞춰집니다.
이 때 정비율로 맞춰주는 스타일이 img_fix 이며, 스크립트에 의해 자동으로 추가되는 구조입니다.
그누보드4s 의 basic 게시판 스킨에는 적용이 완료된 상태며, 만약 basic 게시판 스킨이 아닌 일반 혹은 기타 페이지에서 적용하시고 싶은 경우 해당 이미지에 img_fix 클래스를 부여하시면 됩니다.
다음 예제에서 샘플 코드를 확인해보세요.
1 | <br><img src="이미지경로" alt="" class="img_fix"> |
이 방식은 반응형 웹 작업 시 활용에 따라 유용하게 사용할 수 있습니다.
특히 basic 게시판 스킨에서는 기기의 사이즈에 따라 5가지의 썸네일을 제공하고 있어, 게시판 반응형 웹 작업 시에도 상당한 편의를 제공하공 있습니다.
기존 방식과의 차이점
기존 방식은 이미지의 넓이와 높이를 스크립트로 계산하여 새롭게 적용하는 방법이었습니다. 클라이언트 사이드에서 처리할 작업량이 새로운 방법에 비해 상대적으로 더 많았습니다.
새로운 방법은 스크립트에서는 이미지의 넓이가 컨텐츠 블럭보다 넓은지 검사한 후, 넓이를 맞추는 CSS 클래스만 부여하는 것에서 주어진 역할을 완료하며, 이미 캐시된 스타일 적용으로 실행 속도가 더 빨라지게 됩니다.
