URL(웹주소)이 본문 영역을 벗어나는 문제 해결기

티스토리 블로그에서 스킨을 쓰다보면 URL링크가 본문영역을 벗어나 표현되는 경우가 있습니다.

PC용 스킨과 모바일용 스킨을 따로 쓰면 크게 문제되지 않는데, 반응형 스킨을 쓰면 이게 문제로 작용할 여지가 있습니다. 모바일 기기에서 가로폭이 URL 길이만큼 늘어나거든요. 그래서 가로로 스크롤이 가능해집니다. 내 스마트폰의 가로 폭은 360픽셀인데 모바일페이지 가로는 1000픽셀이다? 이상하죠!

그래서 고쳐봤습니다. 티스토리 관리자 메뉴 - HTML/CSS 편집 - CSS로 들어가서요.

먼저 #greybox {overflow: hidden;} 이렇게 흘러내리는 부분은 안보이게 처리해봤습니다. 참고로 overflow는 width값을 지정할 수 있는 경우(block 속성이 기본인 div, p 태그 등)에만 적용 가능하다고 하네요. id(#)나 class(.)는 스킨마다 다르니까, 웹브라우저 개발자도구를 활용해서 찾아낸 다음 적절하게 바꿔주세요(구글 크롬은 Ctrl+Shift+C 누르면 됩니다.). 그리고 빠져나와서 확인.

가로폭 늘어나는 것은 해결됐습니다. 그런데 a태그 링크(URL)이 완벽하게 안보이네요(ㅠㅠ). 그래서 #greybox a {word-break: break-all;} 를 추가해줬습니다.

▲ 그랬더니 URL 링크들이 정상적으로 보이게 됐습니다. 처리 끝.

가로폭 제어가 원하는대로 되길래, 기념으로...

▲ 애드센스 앵커광고 달아줬습니다. -_-v