🔥오늘의 목표🔥
단어를 지정하는 속성도 있는데 오늘은 그 속성들에 대해서 알아보자.
white-space : 요소안에 공백 처리
letter-spacing : 자간 지정
word-spacing : 단어 사이의 간격 지정
word-break : 단어가 라인끝에 나올 경우 어떻게 처리할지
word-wrap : 요소를 벗어난 단어의 줄바꿈 지정📕white-space
- 요소안에 공백을 어떻게 처리할지에 대한 속성.
white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;📒 속성값
-
normal: 연속 공백과 개행문자를 하나의 공백으로 처리한다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다. -
nowrap: 연속 공백을 하나로 친다. 자동 줄바꿈은 일어나지 않고,<br>요소에서만 일어난다. -
pre-wrap: 연속 공백을 인정하고, 개행문자를 인정한다. 자동 줄바꿈이 일어난다. ㅈ 줄 끝의 연속 공백은 넘치게 둔다. -
pre-line: 연속 공백을 하나의 공백로 친다. 개행문자를 인정한다. 자동 줄바꿈이 일어난다. -
break-spaces: 다음 차이점을 제외하면 pre-wrap과 동일합니다.
- 줄의 끝에서도 연속 공백을 인정한다.
- 연속 공백의 중간과 끝에서도 자동 줄바꿈이 일어난다.
- 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줍니다.
📕 letter-spacing
- 자간을 지정히는 속성 (상속된다.)
letter-spacing: normal | length | initial | inherit;📒 속성값
nomal: 기본 값length: 단위(px,em)등을 사용해서 선언. 음수값도 가능하다.
📕 word-spacing
- 단어사이의 간격을 지정히는 속성(상속된다.)
word-spacing : normal | length | initial | inherit;📒 속성값
nomal: 기본 값length: 단위(px,em)등을 사용해서 선언. 음수값도 가능하다.
📕 word-break
- 단어를 어떻게 끊을지에 대한 내용
word-break: normal | break-all | keep-all | initial | inherit;📒 속성값
-
normal: non-CJK의 경우 ‘공백(띄어쓰기)’에서, CJK의 경우 ‘음절’에서 수행된다.
(CJK 문자는 글자 기준, 비 CJK 문자는 단어 기준으로 줄 바꿈) -
break-all: non-CJK, CJK 모두 음절에서 끊긴다. (글자 기준으로 줄 바꿈) -
keep-all: non-CJK은 공백,하이픈(-)에서 중단점이 발생하고, CJK는 백,하이픈(-), 그 외 기호에서 발생한다. (단어 기준으로 줄 바꿈)
📕 word-wrap
- 요소를 벗어난 단어의 줄바꿈을 지정하는 속성이다.
word-wrap: normal|break-word|initial|inherit;📒 속성값
normal: 기본 값. 중단점에서 개행break-word: 모든 글자가 요소를 벗어나지 않고 강제로 개행
➕ 단어의 분리는 word-break으로 박스 영역을 넘친 단어내에서 임의의 분리여부는 word-wrap로 결정한다.
더알아보기
😣오늘의 느낀 점😣
우와 짱 복잡함 우헤헤