CSS 이론 채워 넣기 - 4. text 관련 CSS 속성

1. font Shorthand

font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)

font:  italic  small-caps  bolder  16px/1.2  monospace;

2. letter-spacing

글자 사이의 간격을 지정한다.

3. text-align

justify ( 양쪽 정렬 )

양쪽 모두를 가지런하게 맞추기 위해서 띄어쓰기 간격이 조금씩 달라진다. 특히 영어의 경우 단어가 길면 간격이 많이 이상할 수 있는데, word-break 속성으로 조정할 수 있다.

4. white-space

white space는 공백(space), 들여쓰기(tab), 줄바꿈(line break) 을 의미한다.

텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap) 된다. white-space 프로퍼티는 줄바꿈(wrap) 을 제어하기 위한 프로퍼티이다.

프로퍼티값	line break	space/tab	wrapping(자동줄바꿈)
normal	무시	1번만 반영	O
nowrap	무시	1번만 반영	X
pre	반영	그대로 반영	X
pre-wrap	반영	그대로 반영	O
pre-line	반영	1번만 반영	O

5. text-overflow

부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의한다.

이 프로퍼티를 사용하기 위해서는 아래의 조건이 필요하다.

• width 프로퍼티가 지정되어 있어야 한다. 이를 위해 필요할 경우 block 레벨 요소로 변경하여야 한다.
• 자동 줄바꿈을 방지하려면 white-space 를 nowrap으로 설정한다.
• overflow 프로퍼티에 반드시 “visible” 이외의 값이 지정되어 있어야 한다.

clip: 영역을 벗어난 텍스트를 표시하지 않는다. (기본값)
ellipsis: 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(…)를 표시한다.

6. word-wrap

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

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

7. word-break

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

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

참고

https://poiemaweb.com/css3-font-text