참고 : (1) simple gray

(2) simple gray (sidebar)




반응형 티스토리 스킨 중 하나인 simple gray 의 특징이라면 이미지 크기가 자동으로 조절되는 알고리즘이 javascript나 jquery 없이 css로만 이루어진다는 점입니다.


특히 이 스킨에서 이미지 크기 조절 역할을 하는 css 속성은 다음과 같습니다.


.imageblock {max-width:100% !important; width:auto !important;}

.imageblock img {max-width:100% !important; height:auto;}


특히 .imageblock 클래스 부분의 width 속성에 준 !important 속성을 없애면 제대로 동작하지 않는다는게 중요합니다. 왜냐하면 여기서 !important는 티스토리에서 기본적으로 제공되는 inline css 속성을 없애는 역할을 하기 때문입니다.




이 방법은 javascript 또는 jquery를 쓰는 방법보다 간단하고 이해하기 더 쉬운 것이 장점입니다. 아무래도 jquery보다는 css가 배우기 더 쉬우니까요.


다만 이 방법의 문제가 하나 있습니다.



익스플로러 구버전에서 제대로 동작하질 않습니다. 이미지가 아예 뜨질 않습니다.


물론 IE Tester로 확인해본 것이니 진짜 익스플로러 구버전과는 동작이 다를 수 있어서 확실히 동작하지 않는다 라고 말할 수는 없습니다.


만일 진짜 IE 구버전에서 동작하지 않는 문제가 있는게 사실이라면, 익스플로러 구버전과 호환되도록 만들려는 스킨 개발자에게는 이 방법이 효과적이지 못할 것입니다. 그럼에도 이해하기 쉬운 방법으로 만들 수 있기 때문에 매력적인 방법인 것은 분명해 보입니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 어멍 2015.03.21 18:03 신고  댓글주소  수정/삭제  댓글쓰기

    답방 차원에서 들러봤는데 솔직히 무슨 말인지 하나도 모르겠네요. ㅠ.ㅠ (프로그램에 약해서~~)
    하여튼 멋지십니다.
    선입견인진 몰라도 피아노치는 남자처럼 IT 전문지식이 해박한 커리어우먼은 멋지더라구요. ^.^

  2. 달빛천사7 2015.03.22 06:10 신고  댓글주소  수정/삭제  댓글쓰기

    어제 토요일 주말인데 머했어염 황사때문에 요즘 힘드러염 화영양 행복하세염 ㅎㅎ.

  3. 하늘다래 2015.03.23 10:22 신고  댓글주소  수정/삭제  댓글쓰기

    음?
    !important; 속성을 주면 구버전 IE에서는 이미지가 나오지 않는 문제가 있나요?
    바로 테스트해봐야겠습니다 ㄷㄷ

    최신 버전 브라우저들에서만 테스트해봤으니...;;;

    • 책덕후 화영 2015.03.23 10:42 신고  댓글주소  수정/삭제

      위 예제에서 구버전 IE에서 보이지 않는 문제는 !important 속성 때문이 아니라 max-width 속성 때문일 가능성이 높습니다. max-width는 CSS3 속성이거든요.

티스토리 툴바