티스토리 모바일 화면 깨짐 현상 - 인용구와 링크가 화면을 벗어나는 경우

저는 보시다시피 티스토리 블로그를 운영하고 있는데요. 본격적으로 블로그를 키우다보니 전에는 보이지 않았던 화면 깨짐 현상이 걸리기 시작했습니다. 

 

티스토리 모바일 화면 깨짐 현상

이런 현상은 모바일에서만 발생하고 있는데요. 저같이 반응형 스킨을 사용하시는 분들에게 발생 될걸로 생각이 됩니다. 

 

1. 인용구를 씌운 부분이 너무 긴 경우

인용구가 너무 길어서 발생하는 경우인데요. 이미 수정을 해버려서 화면 예시를 보여드리기가 조금 까다로운데요. 잠깐 몹쓸 그림판으로 재연해보면...

저런식으로 글이 공간을 벗어나서 모바일 화면이 옆으로 커져서 화면이 모바일 화면보다 넓어져버리는 경우입니다. 이럴때 인용구에 해당하는 "blockquote" 태그의 css를 손봐야겠다는 걸 유추할수 있어서 바로 수정을 해줬습니다. 

.skin_view .area_view blockquote { overflow-wrap: break-word; padding: 0.75em !important; margin: 0 auto 28px; border-left:5px solid #eee; }

바로 첫부분에 추가한 overflow-wrap: break-word; 가 포인트입니다. 글이 길어지는 경우 줄바꿈을 해주겠다는 옵션이죠. Ctrl + F 로 ".skin_view .area_view blockquote" 를 찾은 다음에 overflow-wrap: break-word;를 추가해서 수정해주시면 됩니다.

 

2. 링크도 동일한 문제가 있어서 수정.

비슷한 현상이 하나 더 발생했습니다. 바로 링크가 걸렸던 곳인데요. 티스토리 포스팅 내에서 링크는 html에서 a 태그를 써서 걸리게 됩니다. 링크의 글자수가 너무 긴 경우에도 모바일 화면을 벗어나게 되버려 보기가 안좋았는데요. 

 

포스팅 내에 링크 태그에도 동일한 속성을 먹여서 해결했습니다. 

아래 내용을 새롭게 추가하면 됩니다. 

.skin_view .area_view p a { word-wrap: break-word; }

보기 좋게 html 편집 부분에서 Ctrl + F 로 ".skin_view .area_view p"을 찾아서 바로 밑줄에 새로이 추가하고 저장하면 해결이 되는걸 볼 수 있습니다.