CSS word-break로 줄 바꿈 제어하기

💬 CSS word-break - 줄 바꿈 제어하기

웹페이지에서 텍스트 줄 바꿈은 UI/UX에 큰 영향을 줍니다. 특히 한글, 일본어, 중국어처럼 단어 경계가 명확하지 않은 언어에서는 더욱 그렇죠.

✅ word-break란?

word-break: normal | break-all | keep-all | break-word;

🧩 속성값 설명

속성값	설명
normal	기본값. 브라우저 기본 규칙 사용. 영어는 띄어쓰기 기준, 한중일은 글자 단위 줄 바꿈 허용.
break-all	단어 중간이라도 줄 바꿈. 영어, 한글, 일본어 등 모두 강제 줄 바꿈.
keep-all	한중일 글자는 단어 단위로 줄 바꿈. 글자 단위 줄 바꿈 방지. 영어는 normal과 동일.
break-word	너무 긴 단어가 있을 경우 단어 중간에 줄 바꿈 허용. overflow-wrap: break-word; 사용 권장.

💡 참고 팁

• 한글 웹사이트에서는 keep-all을 사용하는 것이 가독성을 높이는데 유리합니다.
• 긴 영어 단어 또는 URL에는 다음 조합을 사용하면 좋습니다:

word-break: break-word;
overflow-wrap: break-word;

✨ 마무리

줄 바꿈은 단순한 스타일이 아닌 읽기 쉬운 디자인의 핵심 요소입니다. word-break를 상황에 맞게 잘 활용하면 더 보기 좋고 사용자 친화적인 UI를 만들 수 있어요!