[CSS]word-break/spacing/wrap

2023. 3. 13. 16:27·CSS

word-break

  • 한 줄의 끝에 도달할 때 단어가 어떻게 분리되어야 하는지를 지정하는 속성
  • 영어나 라틴어 같은 알파벳으로 이루어진 단어의 경우 기본적인 분리 규칙을 따라가도록 설정
  •  

normal(기본값)

단어가 끝나지 않으면 줄 바꿈을 허용하지 않습니다.

 

break-all

  • 단어가 끝나지 않더라도 줄 바꿈을 허용하여, 글자들을 가능한 한 많이 한 줄에 넣으려고 할 때 사용됩니다.

 

keep-all

단어가 끝나기 전까지는 줄바꿈을 하지않으며, 단어 내부의 문자들이 한줄에 모두 포함되도록 합니다.

기본적으로 `normal` 속성을 사용할 경우, 단어와 단어 사이에서 자연스럽게 줄 바꿈이 이루어집니다.

 

break-word

단어가 행의 끝에 닿았을 때, 자동으로 줄 바꿈이 되도록 합니다.

일반적으로는 분리할 수 없는 단어를 임의의 지점에서 분리하도록 합니다.

단어가 너무 짧을 경우에도 줄 바꿈이 발생할 수 있기 때문에, 사용에 주의가 필요합니다.


word-spacing

  • 단어 사이의 간격을 지정하는 데 사용됩니다.
  • 이 속성은 단어와 단어 사이의 간격을 조절함으로써 텍스트 레이아웃을 조정할 수 있습니다.
  • 글꼴 크기에 상대적으로 지정

normal

length

 

word-wrap

  • 글자가 브라우저 창이나 부모 요소의 크기를 초과할 때 어떻게 처리할지 지정하는데 사용됩니다.
  • 기본적으로는 글자가 요소의 경계를 벗어날 때는 줄 바꿈이 일어나지 않습니다.

 

  • normal: 기본값입니다. 단어가 요소의 경계를 벗어날 때는 줄 바꿈이 일어나지 않습니다.
  • break-word: 단어를 끊을 수 없는 상태애서 단어를 줄 바꿈할 수 있도록 허용함

충돌되는 word-break와 word-wrap을 사용하면 어떻게 될까요?

 

word-break에서 매핑하는거 같네요.

 

 

writing-mode

텍스트 레이아웃 방향을 지정하는데 사용합니다.

이 속성은 주로 글자가 세로 방향으로 쓰여지는 스크립트에 대한 레이아웃을 제공합니다.

  • horizontal-tb: 기본값으로, 텍스트가 가로로 쓰여지고, 위에서 아래로 흐르는 레아이웃 방향을 가집니다.
  • vertical-rl: 텍스트가 세로로 쓰여지고, 오른쪽에서 왼쪽으로 흐르는 레이아웃 방향을 가집니다.
  • vertical-lr: 텍스트가 세로로 쓰여지고, 왼쪽에서 오른쪽으로 흐르는 레이아웃 방향을 가집니다.
  • sideways-rl: 텍스트가 가로로 쓰여지고, 왼쪽에서 오른쪽으로 흐르지만, 문자는 세로 방향으로 배치됩니다.
  • sideways-lr: 텍스트가 가로 방향으로 쓰여지고, 오른쪽에서 흐르지만, 문자는 세로 방향으로 배치됩니다.

 

white-space

HTML 요소 내의 공백 처리 방법을 지정하는데 사용됩니다. 이 속성은 공백 문자, 줄 바꿈 문자, 탭 문다 등을 어떻게 처리할지 결정합니다.

  • normal: 기본적으로, 연속된 공백 문자를 하나로 처리하고, 줄 바꿈 문자와 탭 문자를 공백 문자로 대체합니다.
  • nowrap: 모든 공백 문자를 무시하고, 텍스트를 한 줄로 표시합니다.
  • pre: HTML 소스 코드에 있는 공백 문자, 줄 바꿈 문자, 탭 문자 등을 그대로 표시합니다.
  • pre-wrap: HTML 소스 코드에 있는 공백 문자, 줄 바꿈 문자, 택 문자 등을 그대로 표시하고, 긴 단어는 필요한 경우 자동으로 줄 바꿈됩니다.
  • pre-line: HTML 소스 코드에 있는 공백 문자, 줄 바꿈 문자, 탭 문자 등을 그대로 표시하고, 연속된 공백 문자는 하나로 처리합니다. 긴 단어는 필요한 경우 자동으로 줄 바꿈 됩니다.

white-space  속성은 텍스트 레아아웃과 줄 바꿈에 영향을 미칩니다. 특히 "pre" 값은 HTML 소스 코드에 있는 공백 문자, 줄 바꿈 문자, 탭 문자 등을 그대로 표시하여, 소스 코드의 들여쓰기와 같은 포맷을 유지할 수 있습니다. "pre-wrap" 값은 긴 단어를 필요한 경우 자동으로 줄 바꿈하여, 텍스트의 레이아웃을 개선할 수 있습니다.

 

user-select

사용자가 웹 페이지에서 선택할 수 있는 요소를 지정하는데 사용됩니다.

주로 선택 가능한 요소의 범위를 제한하거나, 웹 사이트에서 텍스트 복사를 방지하는 데 사용됩니다. 예를 들어, "user-select: none"을 사용하면 웹 사이트에서 텍스트를 복사할 수 없도록 설정할 수 있습니다. 또한, 이 속성은 웹 페이지에서 상호작용 가능한 요소의 선택을 제한하여, 사용자 경험을 개선하는 데도 사용됩니다.

  • none: 요소가 선택될 수 없습니다.
  • auto: 요소를 선택할 수 있지만, 사용자 에이전트의 기본 동작을 따릅니다.
  • text: 테그슽가 선택될 수 있습니다.
  • contain: 요소의 일부 내용만 선택할 수 있습니다.
  • all: 요소의 모든 내용이 선택될 수 있습니다.

 

'CSS' 카테고리의 다른 글

[CSS]이미지 사이즈 맞추기  (0) 2023.03.18
[CSS]CSS Functions  (0) 2023.03.13
[CSS] Animations  (0) 2023.03.11
[CSS]Transition  (0) 2023.03.11
[CSS]3D Transforms  (0) 2023.03.11
'CSS' 카테고리의 다른 글
  • [CSS]이미지 사이즈 맞추기
  • [CSS]CSS Functions
  • [CSS] Animations
  • [CSS]Transition
JoyYellow
JoyYellow
  • JoyYellow
    JoyYellow
    JoyYellow
  • 전체
    오늘
    어제
    • 분류 전체보기 (128)
      • Vue (7)
      • React (10)
      • 알고리즘 풀이 (29)
      • 타입스크립트 (2)
      • Microsoft (4)
      • TIL(Today I Learned) (16)
      • Devops (4)
      • CS(Computer Science) (2)
      • Spring (1)
      • Incomplete (0)
      • JS소스모듈 (10)
      • TDD (2)
      • 스프링부트 (0)
      • CSS (8)
      • Next.js (0)
  • 블로그 메뉴

    • 홈
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    노개북
    노마드코더
    개발자북클럽
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
JoyYellow
[CSS]word-break/spacing/wrap
상단으로

티스토리툴바