[CSS] white-space / letter-spacing / word-space / word-break / 대소문자

[CSS] white-space / letter-spacing / word-space / word-break / 대소문자

---

✔️ white-space

: 해당 요소의 공백 처리 방법을 결정한다.

 

📓 white-space 속성값

.normal {white-space: normal;}
.nowrap {white-space: nowrap;}
.pre {white-space: pre;}
.pre-wrap {white-space: pre-wrap;}
.pre-line {white-space: pre-line;}

💡normal : 제일 기본. 여러 공백을 하나의 공백으로 표시. 영역 너비 넘어가는 내용은 줄을 바꾼다.
nowrap : 여러 공백을 하나의 공백으로 표시하고, 영역을 넘어가는 내용은 줄 바꿈 x 줄 바꿈은 <br> 해줘야한다.
pre : 여러 공백을 그대로 표시한다.
pre-wrap : 여러 공백을 그대로 표시. 영역을 넘어가는 내용은 줄 바꿈한다.
pre-line : 여러 공백을 하나의 공백으로 표시하며, 넘어가는 내용은 줄을 바꾼다.

 

 

✔️ letter-spacing

: 글자와 글자 사이의 간격을 조정한다.

.ls1 {letter-spacing: 3px;}
.ls2 {letter-spacing: .2rem;}
.ls3 {letter-spacing: -2px;}

💡 마이너스 값은 간격을 줄이는 것과 동일하다.

letter-spacing : 글자와 글자사이의 간격을 조정한다.

기본값 javascript html css java spring oracle mysql

3px javascript html css java spring oracle mysql

.2rem javascript html css java spring oracle mysql

-2px javascript html css java spring oracle mysql

 

 

✔️ word-space

: 단어 각각의 간격을 조정한다.

.ws1 {word-spacing: 10px;}
.ws2 {word-spacing: 130%;}
.ws3 {word-spacing: -3px;}

word-space : 단어의 간격을 조정한다.

기본값 javascript html css java spring oracle mysql

10px javascript html css java spring oracle mysql

130% javascript html css java spring oracle mysql

-3px javascript html css java spring oracle mysql

 

 

✔️ word-break

: 원래 기본적으로 하나의 단어가 길어서 영역을 벗어나도 개행을 하지 않는데...

: word-break 는 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다.

: word-wrap 속성 단어를 어느 정도는 고려하여 개행(., - 등을 고려)

✨ word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행

.word-wrap {word-wrap: break-word;}
.word-break {word-break: break-all;}

💡 normal : 단어가 길어도 한 줄에 표시한다!

word-break : 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의

word-wrap 속성 단어를 어느 정도는 고려하여 개행(., - 등을 고려)
word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행

javascriptjavascriptjavascript https://www.test.com/study/sample

javascriptjavascriptjavascript https://www.test.com/study/sample

javascriptjavascriptjavascript https://www.test.com/study/sample

 

 

✔️ 대소문자 스타일 속성

: 원래 기본적으로 하나의 단어가 길어서 영역을 벗어나도 개행을 하지 않는데...

: word-break 

/*모든 영문자를 소문자로, 대문자로*/
.lower {text-transform: lowercase;}
.upper {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}
/*각 단어의 첫글자를 대문자로*/