티스토리 블로그 CSS편집 오류 (word-break)

  블로그에서 포스팅을 하며 PC와 모바일 화면으로 글을 확인하던 도중 이상한 점을 발견했다. 줄바꿈 관련 문제인데, 우선 CSS에서 줄바꿈 속성 설정은 word-break 코드를 사용했다. word-break 코드는 normal, break-all, keep-all 이렇게 세 가지의 속성을 설정할 수 있다.

  normal로 설정한 경우에는 한글은 띄어쓰기를 무시하고 한 글자 단위로, 영어는 한 단어 단위(띄어쓰기 단위)로 글이 잘리고, break-all로 설정한 경우에는 한글과 영어 모두 띄어쓰기를 무시하고 한 글자 단위로 잘리며, 반대로 keep-all로 설정한 경우는 모든 언어에서 한 단어 단위(띄어쓰기 단위)로 글이 잘리며 줄바꿈된다.

  위 캡처는 내 블로그의 CSS편집 화면이다. 블로그 글의 본문은 모두 p 태그 안에 span 태그로 감싸져 있으며, 이를 이용해서 위의 코드로 모든 본문의 글꼴과 형태를 결정할 수 있다. 빨간 박스 부분을 보면 word-break 속성이 normal 설정인 것을 확인할 수 있으며, !important를 이용해서 다른 모든 코드보다 우선 적용시켰다.

  PC화면에서 본 한글로 이루어진 포스팅 본문이다. 줄이 바뀌는 부분을 보면 한 글자 단위로 줄이 꽉 차는 부분에서 글이 잘린 것을 확인할 수 있다. normal 속성이기 때문에 위처럼 한글은 띄어쓰기를 무시하고 잘리는 것이 정상이다.

  반대로 영어로 이루어진 본문의 경우 PC화면에서 한 단어 단위로 잘린 것을 확인할 수 있다. 영어는 단어 중간에 글이 잘리면 한글에 비해서 읽기가 어렵기 때문에 한글은 글자 단위로, 영어는 단어 단위로 잘라서 줄바꿈하도록 의도한 것이다.

  하지만 스마트폰에서 글을 확인하면 뭔가 다르다. 한글이 글자 단위로 잘리지 않고 단어 단위로 잘려 오른쪽이 들쭉날쭉한 것을 볼 수 있다. 기기는 아이폰의 사파리 브라우저이며, word-break 코드의 normal 설정을 정상적으로 인식한다고 알려져 있지만 위처럼 속성이 keep-all로 설정된 듯이 단어 단위로 줄바꿈돼서 PC화면과 분명 다르다.

  영어로 쓰인 포스팅의 경우에는 PC화면과 같이 정상적으로 단어 단위로 줄바꿈된다. 혹시라도 내가 반응형 화면일때 CSS코드를 다르게 설정한 것인가 의문이 들어서 PC화면에서 창 크기를 줄여서 본문을 확인해 보았다. 창 크기 좌우 폭을 줄이면 반응형 블로그인 경우 PC에서도 모바일 화면처럼 볼 수 있다.

  PC에서 인터넷 창 크기를 줄였더니 사이드바가 사라지고 토글 버튼이 생기며 모바일과 같은 화면이 됐다. 그런데 줄바꿈은 스마트폰과 다르게 된 것을 볼 수 있다. 정상적으로 한글이 글자 단위로 줄바꿈 되며 스마트폰에서 캡쳐한 화면과 다르게 오른쪽이 들쭉날쭉하지 않다. 내가 의도한 본문 형태는 원래 이렇게 되어야 한다.

  영어 본문의 경우에는 PC와 모바일 모두 글자 단위로 줄바꿈되어 정상적이지만, 한글의 경우 왜 줄바꿈이 다르게 되는지 알 수 없었다. 사파리 브라우저의 문제인가 해서 아이폰용 크롬을 다운로드 받아 같은 페이지를 확인해봐도 결과는 같았다.

  혹시나 코드가 전체적으로 적용이 안된 것일 수도 있어서 word-break 코드의 normal 속성을 break-all로 변경해봤는데, PC와 모바일에서 모두 본문의 영어와 한글이 띄어쓰기를 무시하고 글자 단위로 줄바꿈 되어 코드 적용은 문제없이 되는 것을 확인했다. 현재로서는 어떤 문제로 인해 PC와 모바일의 줄바꿈이 다르게 표시되는지 알 수가 없는 상황이다.