저는 뭐하라님의 Material T Mark5+ 테마를 사용하고 있습니다, 하지만 이 테마는 다소 많은 수정이 필요한 요소가 더로 있고, 이 요소들이 tistory 측에 따라 매번 적용 범위가 달라지는 문제가 있어서 유지보수가 참 어렵다는 생각을 더러 합니다 - 결론은 tistory 가 참 .... WordPress 쓰다가 쓰면 답답한 부분이 한두군데가 아닙니다만 10년이나 쓴 블로그를 버리는 것은 쉽지 않은 결정 입니다.
이번에 생긴 문제는 위 이미지 처럼 테터데스크 상태에서 썸네일 이미지 넓이가 옆에 글 부분을 넘어 서서 글을 덮어 버리는 문제가 발생 한다는 것 이었습니다. 이게 tistory 에 변경된 부분인지 아니면 파이어폭스 새 버젼에서 생기는 문제인지는 확인이 안됩니다만, 보기가 무척 싫습니다.
그래서.
안되는건 일단 고쳐야 하지, 문제가 뭔지 알기 위해 잘 알지도 못하는 css 를 열심히 파이어폭스의 요소검사기 를 통해 찾아 보니, #ttCanvas .teditionType1 .teditionItem img 객체가 height:180px 만 있을 뿐 width 에 관한 요소가 없다는 것과, 이것이 tistory 의 thumbnail 이미지 저장 관련 문제와 연동되어 있다는 것이란 추측을 할 수 있었습니다.
뭐하라님의 Matrial T Mark5+ 에서 테더데스크는 직접 HTML 코드를 넣어 사용을 하도록 만들어 져 있으며, 문제는 여기에 있었는 듯 합니다.
위 부분의 코드를 다음과 같이 수정을 하면 이미지가 왼쪽 기준으로 오른쪽이 자주 잘리는 경우가 생기지만 적어도 이미지가 영역을 넘어 글을 덮는 문제가 생기지는 않게 됩니다.
#ttCanvas .teditionType1 .teditionItem img{
width:auto;
height:180px;
overflow: hidden;
position: absolute;
clip: rect(0px, 180px, 180px, 0px);
}
CSS 를 잘 아는 것은 아니지만, width 를 auto 로 두고 overflow 를 숨기는 것과, clip 영역을 180x180 으로 지정을 하면 현재 제 테터데스크 처럼 이미지가 글을 덮지는 현상은 나타나지 않게 됩니다.
제가 CSS 는 잘 모르기 떄문에 다음 페이지 글을 참조 했습니다.
혹시 뭐하라님의 테마를 사용하시는 분들 중 저처럼 문제를 겪으시고 계시는 분들이 계시다면 도움이 되었길 바랍니다.
