[CSS]word-break/spacing/wrap

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: 요소의 모든 내용이 선택될 수 있습니다.