친효스킨 : 새로운 글쓰기 에디터로 이미지 삽입 시 화면을 초과하여 잘리는 문제 해결 방법
안녕하세요, 친절한효자손 입니다. 현재 새로운(신규) 글쓰기 에디터로 글을 작성할 때 이미지를 삽입하면 화면을 초과하여 잘리는 문제가 발생하고 있습니다. 확인해보니 이미지에 강제로 가로 사이즈가 적용되는 문제였습니다. max-width: 860px; 으로 860픽셀로 고정이 되기 때문에 모바일에서 볼 때는 화면이 잘려 보이게 되고 가로 스크롤바가 생깁니다. 따라서 해당 매소드만 제거하면 되지만, 문서를 일일히 다 수정 할 수는 없는 노릇이므로 CSS를 수정해야 합니다. 앞으로 배포될 친효스킨 1.17 버전에서는 이 문제가 해결되긴 했지만, 아직 배포는 멀었으니 다음의 방법대로 친효스킨의 CSS를 수정해 주시기 바랍니다. 먼저 아래의 영역을 찾습니다. "새로운 글쓰기" 라고 검색하면 빠르게 찾을 수 있을 겁니다.
/* 본문 이미지 테두리 (새로운 글쓰기 에디터) */
.tt_article_useless_p_margin > figure.imageblock span img {
display: block !important;
margin: 0 !important;
outline: 1px solid #ccc !important;
}이 부분 입니다. 괄호 안에 다음의 매소드를 추가합니다.
max-width: 100% !important;
그러면 최종 완성형태는 이렇게 될 것 입니다.
.tt_article_useless_p_margin > figure.imageblock span img {
display: block !important;
margin: 0 !important;
max-width: 100% !important;
outline: 1px solid #ccc !important;
}그리고 저장을 눌러주시면 됩니다. 이제 새로운 글쓰기 에디터에서 이미지를 삽입해도 잘리는 일은 없을 것 이며, 이미지가 모두 반응형으로 동작하게 될 것 입니다. 티스토리가 이렇게 짜잘한 업데이트는 예고도 없이 하니까 참 언제 또 어떻게 바뀔지 모르겠군요. 앞으로 친효스킨을 사용하시면서 버그 및 문제점이 있다면 메일을 보내주시거나 댓글을 남겨주시면 확인 후 수정할 수 있도록 노력하겠습니다. 친효스킨을 사용해 주셔서 감사합니다. 끝.
"친절한효자손 취미생활" 을 검색!
