노트

white-space 속성

CSS white-space Property

프런트엔드#css · 연결된 개념 2개

쉽게 말하면

white-space는 글 속 띄어쓰기와 줄바꿈을 그대로 살릴지, 하나로 접을지, 줄 끝에서 자동으로 넘길지 정하는 CSS 속성이에요. 사용자가 엔터를 쳐 가며 쓴 댓글을 쓴 모양 그대로 보여 줄 때 필요하죠.

비유가 깨지는 곳 HTML은 기본으로 연속 공백과 줄바꿈을 공백 하나로 접어요. pre는 모양을 살리지만 긴 줄이 상자 밖으로 넘치니 보통 pre-wrap을 쓰고, 말줄임은 nowrap과 overflow hidden을 함께 줘야 동작해요.

텍스트 안의 연속 공백과 줄바꿈을 어떻게 다루고, 줄 끝에서 자동으로 줄을 바꿀지를 정하는 CSS 속성. HTML은 기본으로 연속 공백과 줄바꿈을 공백 하나로 접는다.

값연속 공백원본 줄바꿈자동 줄바꿈
normal(기본)접음접음함
nowrap접음접음안 함
pre보존보존안 함
pre-wrap보존보존함
pre-line접음보존함
  • 사용자가 입력한 여러 줄 텍스트(댓글, 메모)를 그대로 보여 줄 때는 pre-wrap이 무난하다. pre와 달리 상자를 넘지 않고 줄이 바뀐다. 긴 URL처럼 끊을 곳이 없는 문자열은 overflow-wrap: anywhere를 함께 준다
  • 말줄임(text-overflow: ellipsis)은 nowrap + overflow: hidden과 함께 써야 동작한다 → Flexbox의 말줄임 패턴
  • 줄바꿈 방식이 바뀌면 글자 배치가 달라지므로 리플로우를 일으키는 속성이다

참고: MDN — white-space

연결된 개념

이 노트를 가리키는 문서

아직 없습니다.

뜻이 가까운 노트

  • CSS 박스 모델

    브라우저는 모든 요소를 사각형 상자로 보고, 그 상자를 안쪽부터 콘텐츠(content) → 안쪽 여백(padding) → 테두리(border) → 바깥 여백(margin) 네 겹으로 계산한다. 레이아웃에서 요소가 차지하는 크기와 요소 사이 간격이 모두 이 네 겹에서 나온다.

  • Tailwind CSS

    flex, px-4, text-sm처럼 속성 하나를 담은 유틸리티 클래스(Utility Class)를 마크업에 조합해 스타일을 입히는 CSS 프레임워크. 빌드할 때 소스를 훑어 실제로 쓰인 클래스의 CSS만 만들어 내는 빌드 도구이고, 런타임에 돌아가는 JS(JavaScript)는 없다.

  • 버전 스큐와 정적 자산 오프로드

    버전 스큐(Version Skew)는 새 버전을 배포한 뒤에도 브라우저에 떠 있는 이전 빌드의 클라이언트가 새 서버와 통신하면서 생기는 불일치다. 대표 증상은 이전 HTML이 참조하던 JS 청크를 늦게 불러오려다 404가 나는 ChunkLoadError다.

  • CSS 명시도

    캐스케이드에서 레이어까지 비겼을 때, 선택자가 요소를 얼마나 구체적으로 가리키는지로 승부를 내는 점수. (A, B, C) 세 자리로 매기고 앞자리부터 비교한다.

  • XSS

    XSS(Cross-Site Scripting)는 공격자가 넣은 스크립트가 내 사이트의 출처(origin) 권한으로 사용자 브라우저에서 실행되는 공격이다. 같은 출처의 코드로 돌기 때문에 same-origin-policy가 막아 주지 못한다. 그 스크립트는 페이지를 바꾸고, 로그인한 사용자 행세를 하며 요청을 보내고, JS가 읽을 수 있는 데이터(localStorage의 토큰 등)를 빼 갈 수 있다.

보기 옵션