CSS 공백 처리 테크닉

CSS에서 공백을 제어하고 텍스트 간격을 조정하는 다양한 방법을 소개합니다.

CSS 공백 처리의 중요성

CSS의 공백 처리 속성들은 텍스트 레이아웃, 가독성, 반응형 디자인을 제어하는 핵심 도구입니다. 특히 white-space, letter-spacing, word-spacing 속성을 올바르게 사용하면더 나은 사용자 경험과 프로페셔널한 디자인을 구현할 수 있습니다.

💡 실제 활용 시나리오

문제: 긴 제목이 작은 화면에서 레이아웃을 깨뜨림

해결: white-space: nowrap와 text-overflow: ellipsis 조합

결과: 모든 화면 크기에서 깔끔한 레이아웃 유지 및 가독성 향상

이 가이드에서는 기본 속성부터 고급 패턴까지, 실제 프로젝트에서 바로 사용할 수 있는 검증된 CSS 기법을 제공합니다.

white-space 속성

CSS의 white-space 속성은 요소 내부의 공백 문자 처리 방식을 제어합니다.

값	줄바꿈	공백/탭	자동 줄바꿈
normal	무시	병합	예
nowrap	무시	병합	아니오
pre	보존	보존	아니오
pre-wrap	보존	보존	예
pre-line	보존	병합	예

사용 예시

/* 줄바꿈 방지 */
.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 공백 보존 (코드 블록용) */
.code-block {
  white-space: pre;
  font-family: monospace;
}

/* 공백 보존 + 자동 줄바꿈 */
.preserve-format {
  white-space: pre-wrap;
}

/* 줄바꿈만 보존 */
.preserve-lines {
  white-space: pre-line;
}

텍스트 간격 조정

letter-spacing (글자 간격)

/* 글자 간격 늘리기 */
.spaced-text {
  letter-spacing: 0.1em;
}

/* 글자 간격 줄이기 */
.tight-text {
  letter-spacing: -0.05em;
}

/* 픽셀 단위로 조정 */
.pixel-spacing {
  letter-spacing: 2px;
}

/* 반응형 간격 */
.responsive-spacing {
  letter-spacing: clamp(0.05em, 2vw, 0.2em);
}

word-spacing (단어 간격)

/* 단어 간격 늘리기 */
.wide-words {
  word-spacing: 0.3em;
}

/* 단어 간격 줄이기 */
.tight-words {
  word-spacing: -0.1em;
}

/* 픽셀 단위 조정 */
.pixel-word-spacing {
  word-spacing: 5px;
}

/* 제목용 단어 간격 */
.title-spacing {
  word-spacing: 0.2em;
  letter-spacing: 0.05em;
}

줄바꿈 제어

word-break와 overflow-wrap

/* 단어 단위로 줄바꿈 (기본값) */
.normal-break {
  word-break: normal;
}

/* 모든 문자에서 줄바꿈 허용 */
.break-all {
  word-break: break-all;
}

/* 단어가 컨테이너를 벗어날 때만 줄바꿈 */
.break-word {
  overflow-wrap: break-word;
}

/* 긴 URL이나 이메일 처리 */
.break-long-words {
  word-break: break-all;
  overflow-wrap: break-word;
  hyphens: auto;
}

실용적인 CSS 패턴

한 줄 말줄임

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* 필요에 따라 조정 */
}

/* 플렉스 아이템에서 사용 */
.flex-ellipsis {
  min-width: 0; /* 플렉스 축소 허용 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

여러 줄 말줄임

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 3줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 대체 방법 (더 넓은 브라우저 지원) */
.fallback-ellipsis {
  max-height: 4.5em; /* line-height * 줄수 */
  overflow: hidden;
  position: relative;
}

.fallback-ellipsis::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white;
  padding-left: 20px;
}

코드 블록 스타일링

.code-block {
  white-space: pre-wrap;
  font-family: 'Fira Code', 'Monaco', monospace;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.4;
}

/* 인라인 코드 */
.inline-code {
  font-family: 'Fira Code', monospace;
  background: #f1f3f4;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  white-space: nowrap;
}

/* 스크롤 가능한 코드 블록 */
.scrollable-code {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}

반응형 타이포그래피

/* 반응형 글자 간격 */
.responsive-text {
  letter-spacing: clamp(0.01em, 1vw, 0.1em);
  word-spacing: clamp(0.1em, 2vw, 0.3em);
  line-height: clamp(1.2, 4vw, 1.6);
}

/* 모바일에서 다른 공백 처리 */
@media (max-width: 768px) {
  .mobile-text {
    white-space: normal;
    word-break: break-word;
    letter-spacing: 0;
  }
}

/* 데스크톱에서 더 넓은 간격 */
@media (min-width: 1024px) {
  .desktop-text {
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
  }
}

브라우저 호환성 및 주의사항

-webkit-line-clamp: Safari, Chrome에서만 지원
hyphens: 언어별 하이픈 규칙이 다름
word-break: break-all: CJK 문자에서 예상과 다르게 동작할 수 있음
white-space: pre: 긴 텍스트가 컨테이너를 벗어날 수 있음

실전 프로젝트 예제

예제 1: 카드 레이아웃의 제목 처리

제품 카드나 기사 카드에서 제목이 길 때 말줄임을 적용하는 방법입니다.

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 플렉스 레이아웃에서 사용 */
.card {
  display: flex;
  flex-direction: column;
}

.card-title {
  min-width: 0; /* 플렉스 축소 허용 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 여러 줄 말줄임 (3줄) */
.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: calc(1.5em * 3);
}

예제 2: 반응형 타이포그래피

화면 크기에 따라 텍스트 간격을 조정하는 방법입니다.

.responsive-heading {
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: clamp(0.01em, 0.5vw, 0.1em);
  word-spacing: clamp(0.1em, 1vw, 0.3em);
  line-height: clamp(1.2, 1.5vw, 1.6);
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  .mobile-text {
    white-space: normal;
    word-break: break-word;
    letter-spacing: 0;
    line-height: 1.5;
  }
}

/* 데스크톱 고급 스타일링 */
@media (min-width: 1024px) {
  .desktop-text {
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
    line-height: 1.6;
  }
}

예제 3: 코드 블록 및 인라인 코드

문서나 블로그에서 코드를 표시하는 완전한 스타일입니다.

/* 코드 블록 */
.code-block {
  white-space: pre-wrap;
  font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.6;
  font-size: 0.9rem;
}

/* 인라인 코드 */
.inline-code {
  font-family: 'Fira Code', monospace;
  background: #f4f4f4;
  color: #e83e8c;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  white-space: nowrap;
}

/* 스크롤 가능한 긴 코드 */
.scrollable-code {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1rem;
}

/* 코드 블록 내부 줄 번호 */
.code-with-lines {
  white-space: pre;
  counter-reset: line;
}

.code-with-lines .line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  color: #999;
  text-align: right;
}

성능 최적화 팁

✅ 권장사항

CSS 속성을 조합하여 원하는 효과 달성
반응형 디자인에서 적절한 중단점 사용
접근성을 고려한 충분한 대비와 가독성 확보
will-change 속성으로 성능 최적화 (필요시)
GPU 가속을 활용한 애니메이션 (transform 사용)

❌ 피해야 할 것

과도한 letter-spacing으로 가독성 저하
white-space: pre 사용 시 overflow 처리 누락
모바일에서 nowrap 남용으로 인한 레이아웃 깨짐
불필요한 복잡한 선택자 사용
과도한 중첩된 미디어 쿼리