실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 퍼블리싱 꿀팁

제목 줄바꿈이 어색할 때, text-wrap: balance로 한 단어만 남는 문제 정리

메인 카피나 제목이 두 줄로 넘어가면서 마지막 줄에 단어 하나만 덩그러니 남는 제목 줄바꿈 문제는 CSS text-wrap: balance 한 줄로 대부분 정리됩니다. 브라우저가 각 줄의 길이를 비슷하게 맞춰서 나눠 주기 때문입니다.
한국어 사이트에서 같이 써야 하는 word-break: keep-all, 본문용 pretty, 그리고 <br>로 억지로 끊을 때 생기는 문제까지 실무 기준으로 정리했습니다.

💡 <br>로 줄을 나눠 두면 되지 않나요?

디자인 시안 크기에서는 깔끔해 보이지만, 화면 폭이 바뀌면 이야기가 달라집니다. 태블릿이나 작은 노트북에서는 브라우저가 한 번 더 자르면서 세 줄이 되고, 짧은 줄과 긴 줄이 번갈아 나오는 계단 모양이 됩니다. 고객사 리뉴얼 검수 때 "폰에서 제목이 이상하게 끊긴다"는 요청의 상당수가 이 경우였습니다.

1. 제목에는 balance, 한국어는 keep-all과 함께

balance는 여러 줄에 걸친 글자 수를 최대한 고르게 나눕니다. 다만 한국어는 기본 설정에서 글자 단위로도 줄이 바뀌기 때문에, word-break: keep-all을 함께 줘야 띄어쓰기 단위로 끊기면서 단어가 반으로 쪼개지지 않습니다.

/* 한국어 제목: 단어 중간에서 끊기지 않게 + 줄 길이 맞추기 */
h1, h2, h3,
.main-copy {
  word-break: keep-all;
  text-wrap: balance;
}

계산 비용 때문에 줄 수 제한이 있습니다. 크롬 계열은 6줄 이하, 파이어폭스는 10줄 이하에서만 동작하고 그보다 길면 일반 줄바꿈으로 처리됩니다. 그래서 제목, 메인 카피, 카드 제목, 인용문처럼 짧은 글에만 쓰는 것이 맞습니다.

2. 긴 본문은 pretty로

본문 문단에는 pretty가 어울립니다. 줄 길이를 맞추기보다는 마지막 줄에 한두 글자만 남는 것을 피하는 쪽으로 동작합니다. 대신 조금 더 느린 계산을 쓰기 때문에 상품 목록처럼 텍스트가 아주 많은 화면에는 넣지 않는 편입니다.

/* 긴 본문: 마지막 줄에 한 단어만 남는 것 줄이기 */
.article p {
  word-break: keep-all;
  text-wrap: pretty;
}

지원하지 않는 브라우저에서는 이 속성을 그냥 무시하고 평소처럼 줄을 나눕니다. 깨질 걱정 없이 넣어 둘 수 있다는 점이 이 속성의 장점입니다.

3. 꼭 원하는 위치에서 끊어야 한다면

브랜드 슬로건처럼 끊는 위치가 정해져 있다면 <br>을 쓰되, 모바일에서는 숨겨서 자연스럽게 흐르게 합니다. 모바일에서는 balance가 줄 길이를 대신 맞춰 줍니다.

/* PC에서만 강제로 줄을 나누고 싶을 때 */
<h2>처음 만드는 홈페이지,<br class="pc-only">
어디서부터 시작할까요?</h2>

@media (max-width: 767px) {
  .pc-only { display: none; }
}
상황추천 설정
메인 카피, 섹션 제목keep-all + balance
블로그·게시판 본문keep-all + pretty
끊는 위치가 정해진 슬로건PC 전용 br + balance

"제목 한 줄이 어떻게 끊기느냐도 첫인상입니다."

나눔웹은 시안 크기뿐 아니라 실제 휴대폰과 태블릿 폭에서 제목이 어떻게 보이는지까지 확인하고 오픈합니다.


List of Articles
번호 분류 제목 글쓴이
19 퍼블리싱 다크 모드 CSS 대응법, 폰을 어둡게 했더니 입력창만 하얗게 뜰 때 나눔웹
18 퍼블리싱 CSS 컨테이너 쿼리 쓰는 법, 화면이 아니라 카드 폭에 맞춰 반응하기 나눔웹
17 퍼블리싱 CSS :has() 선택자 활용법, 자식 상태에 따라 부모 박스 스타일 바꾸기 나눔웹
» 퍼블리싱 제목 줄바꿈이 어색할 때, text-wrap: balance로 한 단어만 남는 문제 정리 나눔웹
15 퍼블리싱 모바일에서 표(table)가 깨질 때, 가로 스크롤로 감싸거나 카드형으로 바꾸는 법 나눔웹
14 퍼블리싱 카드 목록 반응형 정렬, 미디어쿼리 대신 grid auto-fill과 minmax로 나눔웹
13 퍼블리싱 모달 팝업 만들기, dialog 태그로 ESC 닫기와 배경 클릭 닫기까지 처리하는 법 나눔웹
12 퍼블리싱 긴 URL·이메일 줄바꿈이 안 되고 박스를 뚫을 때, overflow-wrap 쓰는 법 나눔웹
11 퍼블리싱 z-index 올려도 메뉴가 가려질 때, 쌓임 맥락(stacking context) 확인법 나눔웹
10 퍼블리싱 이미지 아래 몇 px 여백이 생길 때, vertical-align으로 없애는 법 나눔웹
9 퍼블리싱 position: sticky가 안 먹힐 때, 부모 overflow부터 확인해야 하는 이유 나눔웹
8 퍼블리싱 썸네일 이미지 찌그러짐, object-fit과 aspect-ratio로 비율 맞추는 법 나눔웹
7 퍼블리싱 flex 레이아웃이 모바일에서 옆으로 삐져나올 때, min-width: 0이 필요한 이유 나눔웹
6 퍼블리싱 촌스러운 '파일 선택' 버튼, 복잡한 꼼수 없이 예쁘게 디자인하기 나눔웹
5 퍼블리싱 수십 줄의 모바일 반응형 코드, 단 '1줄'로 끝내는 마법 (clamp) 나눔웹
4 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
3 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
2 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
1 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
Board Pagination Prev 1 Next
/ 1
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4