본문으로 바로가기

티스토리 반응형 이미지 제공

category 티스토리/스킨가이드 2015. 10. 29. 11:00

티스토리는 반응형 스킨을 위해 따로 무엇인가 지원하는 곳은 아니였습니다. 스킨공모전 이후에 새로운 스킨을 준비중이라는 티스토리 측의 말이 있었듯이 하나 둘 기본 시스템을 업데이트해 나가고 있습니다. 얼마전에는 날짜 표현방식이 변경되어 당황스런 일도 있었지만 이번에 발견한 것은 본문에 삽입되는 이미지와 관련된 정보입니다.

반응형 이미지 지원

그 동안 티스토리 스킨제작시에 에디터로 삽입되는 본문 이미지를 반응형 디자인에 맞게 수정하기 위해서 아래와 같이 관련 코드를 직접 작성해야 했다.

.img-responsive,
.imageblock img {
	display: block;
	width: 100% \9;
	max-width: 100%;
	height: auto;
}
  • .img-responsive 는 부트스트랩에서 반응형 이미지 지원을 위해서 제공하는 것이다.
  • .imageblock img 는 티스토리 에디터로 삽입되는 이미지를 선택하기 위해 필요하다.


최근 티스토리 스킨을 새로 수정하면서 아직 반응형 이미지 지원을 위한 스타일을 적용하지 않은 스킨에서 자동적으로 이미지가 화면 크기에 맞게 줄어드는 것을 발견했다. 혹시나 하고 관련 스타일을 들여다보니 아래와 같이 추가된 CSS 부분을 발견했다 .

<span class="imageblock" style="
    display: inline-block;
    width: 800px;
    height: auto;
    max-width:100%
">
    <img src="http://cfile7.uf.tistory.com/image/xxxxxxxxx" style="
        cursor: pointer;
        max-width: 100%;
        height: auto
    "  width="800" height="533">
</span>

max-width:100%;height:auto 부분은 반응형 이미지 지원에 필수인 부분이다. 언제 변경된 것인지는 모르겠지만 반가운 일임에는 틀림없다. 물론, 티스토리 행보를 볼때 공식적으로 IE의 구버전에 대한 지원을 포기(스킨 공모전 당시 구버전에 대한 지원사항이 빠져있었기에)하고 있어서인지 구형 IE에 대한 지원은 빠져있지만 스킨제작자들도 대부분 구형 IE에서는 반응형이 아닌 고정형 디자인을 제공하니 크게 문제될 바는 아니다.

개인적으로는 유투브 동영상이나 비메오 동영상과 같은 엠베드 요소들에 대해서도 비슷한 지원을 해주길 바라고 있다. 티스토리측에서 반응형 디자인에 신경쓰고 있다는 것은 다음번 공식 스킨이 반응형일거라는 예상이고 그때가 아마 스킨제작에 큰 변화가 올 시기로 보인다.