최근까지 스타일픽스 갤러리에 너비가 큰 이미지가 올라올 경우 별다른 조치를 하지 않아 보기 좋지 않았습니다. 그래서 특정 크기는 넘어선 이미지가 올라올 경우 그 크기를 제한하기로 했고 다음과 같이 구현했습니다.
우선 크기를 조정하려고 한 이미지들은 .PostContent 클래스(css 클래스)를 사용하는 영역에 국한되었기 때문에 .PostContent 클래스 아래의 모든 이미지에 적용하려고 계획했습니다.
이제 어디에서 이 방법을 구현하느냐가 문제인데 서버쪽에서 구현하기 보단 클라이언트쪽에서 구현하는게 더욱 간단하고 유지보수가 쉬울것 같았습니다.
이제 웹 개발자라면 누구나 알고 있을법한 jQuery를 다운로드 받아 링크를 걸었고 다음과 같은 구문으로 “.PostContent 클래스 아래의 모든 이미지”를 선택할 수 있었습니다.
$(‘.PostContent img’)
실제 구현내용은 아래와 같습니다.
<script>
$(“.PostContent img”).each( function( index ) {
if(760 < $(this).width()){
$(this).css(‘width’, ‘100%’);
}
});
</script>
* 참고로 jQuery는 자바스크립트 라이브러리로 객체를 선택하여 값 조회, 수정 및 이벤트 핸들링, 애니메이션 처리 등을 할 수 있습니다.