AI를 통해 전반적인 코드를 짜더라도 놓칠 수 있는 부분이 줄 바꿈 인데요, 자칫하면 어색하게 보일 수 있습니다.
이 글에서는 CSS를 활용해 웹사이트에서 한국어가 깔끔하게 보이도록 하는 방법에 대해 알아보도록 하겠습니다.
헤딩 단어 잘림
워드프레스 한국어 홈페이지 ko.wordpress.org입니다. h2 태그 “커뮤니티” 단어가 중간에 잘린 모습입니다. 무슨 속성이 원인이고 어떻게 고칠 수 있을까요?
h1, h2, h3, h4, h5, h6, caption, figcaption {
text-wrap: var(--wp--custom--heading--typography--text-wrap);
overflow-wrap: initial;
word-break: initial;
}개발자 모드에서 볼 수 있는 해당 부분 CSS 코드입니다.
word-break 속성
word-break 속성은 텍스트가 콘텐츠 박스를 오버플로우 할 것 같을 때 줄 바꿈을 할지 결정합니다.
initial 속성은 normal과 같고 기본 줄 바꿈 규칙을 따릅니다.
break-all은 중국어, 일본어, 한국어를 제외한 나머지 언어에서 어느 두 문자 사이에서라도 줄 바꿈을 가능하게 합니다.
keep-all은 중국어, 일본어, 한국어에서 단어 안에서 줄 바꿈이 일어나지 않게 합니다.
한국어 헤딩 줄 바꿈
그럼 keep-all을 한국어 헤딩에 적용하면 어떻게 될까요?
깔끔하게 줄 바꿈이 됩니다.
h1, h2, h3, h4, h5, h6 {
word-break: keep-all;
}text-wrap: pretty 속성
그러면 본문에 적용할 수 있는 속성으로는 뭐가 있을까요? 이번에는 언어 상관없이 적용할 수 있는 text-wrap: pretty가 있습니다.
text-wrap: pretty는 텍스트 블록 끝에 단어가 혼자 떨어져있지 않게 해주는 속성입니다.
단어 하나가 튀어나와있으면 눈이 텍스트를 훑는 방식을 방해해 콘텐츠를 읽기 어렵게 만들 수 있습니다.
p, ul, ol, blockquote {
text-wrap: var(--wp--custom--body--typography--text-wrap);
}워드프레스 홈페이지 예시를 다시 들고 오면 text-wrap: pretty를 적용한 것을 확인할 수 있습니다.
글을 작성하는 날짜 기준으로 text-wrap: pretty를 아직 파이어폭스에서 지원하지 않습니다. 다만 지원을 안한다 해도 쓰면 오류가 나거나 하는건 아니기 때문에 이 점 고려해서 쓰시면 되겠습니다.
속성에 쓰이는 알고리즘 설명이 궁금하시면 속성을 개발한 Koji Ishii가 직접 작성한 문서 링크가 있습니다.
마무리
지금까지 한국어 CSS 줄 바꿈 속성 들에 대해 알아봤습니다. 프로젝트에 적용을 해보는건 어떨까요?
앞으로도 이런 작은 CSS 팁 들을 발견하면 공유해보도록 하겠습니다.