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

나눔웹 퍼블리싱 꿀팁

제목 줄바꿈이 어색할 때, 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
번호 분류 제목 글쓴이
» 퍼블리싱 제목 줄바꿈이 어색할 때, text-wrap: balance로 한 단어만 남는 문제 정리 new 나눔웹
70 마케팅 robots.txt 작성법, 검색에 안 보여야 할 페이지와 사이트맵 위치 알려주는 순서 new 나눔웹
69 UI/UX 스켈레톤 로딩 화면 만들기, 빈 화면 대신 회색 자리 표시로 기다림 줄이는 법 나눔웹
68 퍼블리싱 모바일에서 표(table)가 깨질 때, 가로 스크롤로 감싸거나 카드형으로 바꾸는 법 나눔웹
67 웹 성능 gzip 압축 설정법, 홈페이지 HTML·CSS 파일을 작게 보내 로딩 줄이는 순서 나눔웹
66 모바일 아이폰에서 숫자가 파란 전화 링크로 바뀔 때, format-detection으로 막는 법 나눔웹
65 마케팅 사이트맵(sitemap.xml) 만들기, 새 페이지가 검색에 늦게 잡힐 때 작성과 제출법 나눔웹
64 UI/UX FAQ 아코디언 만들기, details와 summary 태그로 스크립트 없이 접고 펴는 법 나눔웹
63 웹 성능 PageSpeed Insights 점수 보는 법, 실사용자 데이터와 실험실 점수가 다를 때 나눔웹
62 UI/UX 404 에러 페이지 만들기, 방문자를 놓치지 않는 구성과 상태 코드 확인법 나눔웹
61 퍼블리싱 카드 목록 반응형 정렬, 미디어쿼리 대신 grid auto-fill과 minmax로 나눔웹
60 마케팅 구글 검색 사이트 이름이 엉뚱하게 나올 때, WebSite 구조화 데이터로 지정하는 법 나눔웹
59 모바일 모바일 가로 스크롤이 생길 때, 화면 밖으로 튀어나온 요소 찾아 고치는 순서 나눔웹
58 웹 성능 외부 폰트가 늦게 뜰 때, preconnect와 dns-prefetch로 연결 시간 줄이는 법 나눔웹
57 퍼블리싱 모달 팝업 만들기, dialog 태그로 ESC 닫기와 배경 클릭 닫기까지 처리하는 법 나눔웹
56 마케팅 301 리디렉션 설정법, 페이지 주소를 바꿀 때 검색 노출 지키는 순서 나눔웹
55 UI/UX 화면 애니메이션 줄이기 설정, prefers-reduced-motion으로 대응하는 법 나눔웹
54 웹 성능 유튜브 영상 넣었더니 페이지가 느려질 때, iframe 지연 로딩과 썸네일 대체법 나눔웹
53 마케팅 이미지 alt 태그 작성법, 검색 노출과 접근성까지 같이 챙기는 실무 기준 나눔웹
52 모바일 모바일 viewport 설정법, 화면이 작게 보이거나 확대가 막혔을 때 점검할 것 나눔웹
Board Pagination Prev 1 2 3 4 Next
/ 4
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4