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


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

 


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

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


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



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





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


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


무제한 호스팅



'블로그' 관련된 글

  1. BlogIcon 드린 2016.11.19 14:51 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 잘보다가 갑니다. 제 블로그도 잘리는지 확인해봐야겠어요

  2. BlogIcon SONYLOVE 2016.11.22 20:53 신고  댓글주소  수정/삭제  댓글쓰기

    저도 예전에 이웃분께서 듀얼 이미지와 트리플 이미지의 배치 문제로 같이 고민했던적이 있었어요. 그리고 4개 이상의 이미지 배치시에도 반응형에서 구현하기가 쉽지 않더라고요.
    대부분은 아마 자신에게 문제가 있는지 조차 모르는 경우가 많을꺼같아요. 저 포함해서요. ㅎㅎ

    • BlogIcon 백전백승 2016.11.23 10:21 신고  댓글주소  수정/삭제

      말씀대로 문제가 있는지 모를 것 같습니다. 저는 이 글 등 여러 가지를 쓰면서 알았거든요. 반응형 스킨을 사용하면서 여러 문제를 알게 되더라고요. 구체적으로 모바일웹 스킨을 ON이나 OFF하면서요.

  3. BlogIcon 반짝반짝 작은새 2017.02.23 19:41 신고  댓글주소  수정/삭제  댓글쓰기

    저도 이런 게 너무 답답해요. 표 같은 것도 일일이 손을 봐야하니 귀찮을 뿐더러 표안에 표라던가 표안에 사진은 더 난감하고. 언어에 약해서 끙끙 앓다보니 하루종일 붙들고 있게 되고... 지쳐서 점점 대충 타협하거나 포기하게 되네요.ㅎㅎ제가 달인이 아니라 한탄스러울 뿐...

    • BlogIcon 백전백승 2017.02.23 23:20 신고  댓글주소  수정/삭제

      저도 HTML,CSS,스크립트 등이 어렵거든요. 그리고 윗글을 적으면서 짜증나서 티스토리가 제공한 모바일 스킨과 비반응형 스킨을 사용하여야 하는가 대한 고민을 했었습니다. 잠시 반응형 스킨을 사용하면서 티스토리가 제공한 모바일 스킨도 사용했고요. 참고로 주석도 이 블로그에서 제대로 안 되거든요. 반짝반짝 작은새님의 스킨에서는 어떨지 모르겠습니다.