반응형 스킨에서 사진이 잘린다는 것이 짜증난다

이 블로그의 스킨을 반응형으로 만들었는데 사진을 잘리는 것에 대해 적으려 한다. 아래 글을 읽으면서 사용하는 반응형 스킨이 여러 사진을 가로로 삽입하면 사진이 잘리는지 확인해 봤으면 한다. 사진 하나는 잘리지 않는다. 

같은 크기의 사진을 가로로 나열해서 적는 경우가 많은데 사진이 잘린다. 왜 그런지 모르겠다. 예로 아래와 같이 사진 3개 삽입하면 이 스킨에서는 이상할 것이다. 사진이 본문을 넘어간다. 그리고 브라우저를 줄이면 줄어들어야 하는데 줄어들지 않는다. 특히 가장 마음에 안 든 것은 사진이 본문을 넘어간 것이다. 이 글을 스마트폰이나 태블릿이 아닌 PC 본다면 브라우저를 줄여봤으면 한다. 그러면 사진을 줄어들지 않고 잘린다.  

 

스마트폰으로 봤을 때 1번처럼 사진이 잘린다는 것이다. 2번처럼 3개 모두가 나와야 정상인데...아래 이미지도 두 개로 삽입한 것인데 이 반응형 스킨에서는 이상하게 나온다. 그래서 잘리지 않게 하거나 본문에서 벗어나지 않게 하기 위해 내가 사용한 방법은 에디터 프로그램으로 더보기 안 사진처럼 하나로 합치는 것이었다. 왜냐하면 이미지 하나가 됐을 경우 줄어들기 때문에 합친다. 

아래는 하나의 사진로 합친 것이다.

소스를 보면 알겠지만 이미지 두 개 이상일 경우 이상한 태그가 들어간다. 이것을 대한 위해 CSS 설정을 해야 하나....여하튼 어렵다. 참고로 모든 스킨을 본 것은 아니나 반응형 스킨에서 #1, Square 스킨은 잘리지 않았다.

Square 스킨인 경우 테이블도 잘리지 않았다. 티스토리가 제공한 #1 ,#2를 포함한 다른 스킨의 경우 티스토리 에디터로 테이블을 삽입하면 잘린다. 그만큼 square 반응형 스킨은 잘 만들어서 대상을 받았겠지만...

여러 개의 사진을 삽입할 경우 아래 그림으로 설명하면 파일보관함에 1번 파일첨부 버튼으로 사진을 삽입한 후 2번처럼 에디터에 넣을 파일을 선택한 후 3번 버튼을 클릭하여 사진을 삽입한다. 만약 여러 장의 사진 선택은 Ctrl 키를 이용한다. 참고로 파일 보관함으로 사진을 가로로 나열할 수 있는 최대 수는 3장이다. 

이 글을 적다보니 스킨이 반응형 스킨이 아닌 일반 스킨과 티스토리에서 제공한 모바일 스킨만 있으면 혼란이 없을 것 같다는 생각이 든다. 그러면 위처럼 사진이 잘리는 문제도 신경쓰지 않아도 되며 예전에 적었던 테이블이 잘리지 않던 문제나 각주에 대한 문제도....그러나 티스토리가 제공한 모바일 스킨만 있다면 HTML/CSS를 사용하지 못 한다는 단점이 있다. 

예전에 문제가 있으면 해결하려 노력을 했지만 이제는 귀찮아 그냥 놔두는 경우가 많은 것 같다. 반응형 스킨을 멋있지만 알게 모르게 여러 귀찮은 점이 있는 것 같다.

무제한 호스팅