CSS style 한글 글자 단위로 자르지 않고, 공백 단위 (단어 단위)로 자르기

저는 한글이 글자 단위로 깨지는 걸 굉장히 싫어합니다. 영어는 자동적으로 단어 단위로 잘리는 데 비해, 한글은 기본적으로 글자 단위로 잘리게 되어 있습니다. 적어도 IE 에서는요 (다른 브라우저에서는 확인해보지 못했네요.) 모든 (대부분의) 브라우저에서 한글은 글자 단위로 잘리는 것 같습니다.

예를 들면, 글자 단위로 잘리는 경우엔 이렇게 됩니다.

아버지가 방에 들어
가신다.

공백 단위 (단어 단위)로 자른다면, 아래와 같이 됩니다.

아버지가 방에
들어가신다.

그냥 개인적인 느낌인지도 모르겠네요. 이상하게 단어가 잘리는 건 보기가 싫어서 말입니다. 문장의 끝트머리에 하나씩 걸려 있는 글자를 볼 때 마다 짜증이 마구 치밀어 오릅니다. 글 읽기에도 불편하고 말이에요.

예전에 홈페이지 운영을 하면서 CSS 파일을 다듬을 때 쓴 적이 있었습니다만, 기억이 안나서 한참동안 헤매다 겨우 찾아내었네요.

알림 – December, 01 2006. 14:39PM
아래에 소개해드린 방법은 Internet Explorer 에서만 적용되는 CSS Style 을 사용하는 방법입니다. 이 점 유의하시길 바랍니다.

MSDN 에 의하면, 한글 (중국어, 일본어 포함)의 경우 아래와 같이 하면 공백 단위 (단어 단위)로 문장을 자를 수 있습니다.

word-break: keep-all;

물론 여기에

word-wrap: break-word;

를 살짝 추가해 주면, 문장이 너무 길어서 테이블이 깨지는 경우를 막을 수 있습니다.

여담입니다만, 티스토리 스킨은 전부 글자 단위로 자르게 되어 있더군요. 물론 왠만해선 word-break 가 아예 없는 경우가 많습니다만, 글자 단위로 잘리는 게 보기 싫은 건 저 뿐이었던가요. 🙁

6 Replies to “CSS style 한글 글자 단위로 자르지 않고, 공백 단위 (단어 단위)로 자르기”

  1. 알고 계셨는지 모르겠지만 word-break, word-wrap 모두 IE 전용 속성입니다. 표준이 아니기 때문에 다른 브라우저에서는 모두 지원하지 않고 있습니다. 그렇다고 저 코드가 다른 브라우저에서 오류를 유발하지는 않습니다. 다른분들께서도 알고 사용하시라는 의미에서 적었습니다.

    1. 지적 감사합니다. 안그래도 파이어폭스에서는 글자 단위로 자르는 걸 방금 확인하고 왔어요. 익스플로러 외의 다른 브라우저에서도 따로 어떻게 단어 단위로 자르게 만들 수 없을까요? 개인적인 취향이라는 건 알지만, 하나의 단어가 위 아래로 잘려 버리니 참 보기가 안 좋네요.

  2. 단어 단위로 자르는 방법에 대하여는 저도 잘 모르겠습니다. 하지만 단어 단위로 잘리는 경우에 발생하는 단점도 있겠지요. 예를들어 아주 긴 단어(예를 들면 한 100글자 정도?)를 한 번도 띄어쓰기 없이 쓴다고 치고 문단의 폭은 50글자 정도밖에 안된다고 가정하면 이때에는 이것을 어떻게 처리해야 할지 난감해 질것 같습니다. 또 폭이 좁은 공간(예를 들면 한 200px 정도)에서 단어 중간에 줄바꿈을 금지하게 되면 어떤 행은 폭이 길고 어떤행은 짧아져서 오른쪽 끝부분의 정렬이 매우 지저분 해지게 될 것 같습니다. 물론 100글자 씩이나 되는 글자는 없겠지만 설사 10글자만 되더라도 같은 문제가 발생합니다. 이와 비슷한 문제로 text-align:justify 를 사용하게 되면 문단 좌우 끝이 가지런히 정렬 되지만 자간을 강제로 조정하게 되기 때문에 단어와 단어 사이의 간격(자간)이 고르지 못하게 되는 문제가 발생 합니다. 문단의 우측 끝에서 단어를 잘리지 않도록 하는 것은 좋지만 그렇게 했을 때 다른 무엇인가는 포기해야 하는 상황이 되기 때문에 아마도 그런 기능이 없는 것은 아닐까 생각됩니다. 대부분의 경우 문단의 폭이 넓은 상황보다 좁은 상황일 때 제가 말씀드린 문제가 생긴다는 점은 잘 알고 계실것 같습니다. ^^

    1. 답변 감사합니다.
      좀 더 유연성있게 작동하는 스타일은 없을까 궁금하네요. 진짜 공간이 부족해서 글자 단위로 자르지 않는 이상은 기본적으로 단어 단위로 자르게 말이에요. 말하고 나니 항상 바라기만 하는 게 되어 버렸군요. 😀

    1. 흐흐, 웹디자인 쪽은 제 전공이 아니라 어떻게 도와드리지도 못하겠네요. 뭐든 다 잘하면 좋은 세상, 뒤처지기는 싫고… 으흑

Comments are closed.