> For the complete documentation index, see [llms.txt](https://noah-dev.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://noah-dev.gitbook.io/til/css/text.md). # Text ## 1. 개요 텍스트 스타일은 사용하는 글자의 모양새를 지정하는 글꼴 스타일과 웹 문서에 표시되는 텍스트를 지정하는 문단 스타일이 있다. *** ## 2. line-height 프로퍼티 텍스트의 높이를 지정한다. 한 문단이 두 줄이 넘으면 줄 간격이 생긴다. 줄 간격이 너무 좁거나 넓으면 가독성이 떨어진다. 이때 `line-height` 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다. ```html

기본 줄 간격
기본 줄 간격

좁은 줄 간격
좁은 줄 간격
line-height: 70%

큰 줄 간격
큰 줄 간격
line-height: 1.5

매우 큰 줄 간격
매우 큰 줄 간격
line-height: 3

``` ![line-height](/files/bPEw2APKAHZ0wGC9eNlW) 다음은 수직 중양 정렬 예제이다. a요소의 `line-height` 값과 a요소를 감싸는 `div` 요소의 `height` 값을 일치시킨다. ```html

Click

``` ![line-height2](/files/gamSWM6eNAub5WgcJ2vB) *** ## 3. letter-spacing 프로퍼티 글자 사이의 간격을 지정한다. ```html

default letter spacing

letter-spacing: -2px

letter-spacing: 2px

letter-spacing: 10px

``` ![letter-spacing](/files/1521gZIHXR6npa6Vk3Yg) *** ## 4. text-align 프로퍼티 텍스트의 수평 정렬을 정의한다. 한글 문서에서 흔히 사용하는 왼쪽 정렬, 오른쪽 정렬, 양쪽 정렬, 가운데 정렬 등을 웹 문서에서도 지정할 수 있다. 아래의 표는 `text-align`의 프로퍼티값이다. | 종류 | 설명 | | ------------ | ------------------------------ | | start | 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다. | | end | 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. | | left | 왼쪽에 맞추어 문단을 정렬한다. | | right | 오른쪽에 맞추어 문단을 정렬한다. | | center | 가운데에 맞추어 문단을 정렬한다. | | justify | 양쪽에 맞추어 문단을 정렬한다. | | match-parent | 부모 요소를 따라 문단을 정렬한다. | ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse in amet quos aliquam temporibus dicta adipisci, magnam, corrupti velit quis fugiat voluptatum provident possimus assumenda quaerat totam delectus tempore.

``` ![text-align](/files/zbTIU9VwOlSK5wr57xvw) *** ## 5. text-decoration 프로퍼티 `text-decoration` 프로퍼티는 텍스트에 밑줄을 긋거나 취소선을 표시한다. 링크의 underline를 제거할 수 있으며 텍스트에 underline, overline, line-through를 추가할 수도 있다. ```html text-decoratoin: none

text-decoration: overline

text-decoration: line-through

text-decoration: underline

``` ![text-decoration](/files/xZEnRcu2f4Hy878WooEc) *** ## 6. white-space 프로퍼티 white space는 공백(space), 들여쓰기(tab), 줄바꿈(line break)을 의미한다. html은 기본적으로 연속된 공백, 들여쓰기는 1번만 실행되며 줄바꿈은 무시된다. 또한 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap)된다. `white-space` 프로퍼티는 이러한 기본 동작을 제어하기 위한 프로퍼티다. | 프로퍼티 | line break | space/tab | wrapping(자동줄바꿈) | | -------- | ---------- | --------- | --------------- | | normal | 무시 | 1번만 반영 | O | | nowrap | 무시 | 1번만 반영 | X | | pre | 반영 | 그대로 반영 | X | | pre-wrap | 반영 | 그대로 반영 | O | | pre-line | 반영 | 1번만 반영 | O | ```html

normal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore quo hic aspernatur deserunt veritatis nemo, facilis totam autem laborum tempora distinctio quae cum ut maxime obcaecati eligendi porro vitae praesentium.

nowrap

pre

pre-wrap

pre-line

``` ![white-space](/files/HXf1POxOFHgGISCdCSZZ) *** ## 7. text-overflow 프로퍼티 부모 영여긍ㄹ 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의한다. * 조건 * `width` 프로퍼티가 지정되어 있어야 한다. 이를 위해 필요한 경우 block레벨 요소로 변경해야 한다. * 자동 줄바꿈을 방지하려면 `white-space` 프로퍼티를 nowrap으로 설정한다. * overflow 프로퍼티에 반드시 `visible` 이외의 값이 지정되어 있어야 한다. 아래는 `text-overflow` 프로퍼티에 설정할 수 있는 프로퍼티 값이다. | 프로퍼티 값 | 설명 | | -------- | -------------------------------------------- | | clip | 영역을 벗어난 텍스트를 표시하지 않는다.(기본값) | | ellipsis | 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(...)를 표시힌다. | ```html

clip

Lorem ipsum dolor sit amet consectetur adipisicing elit.

ellipsis

Lorem ipsum dolor sit amet consectetur adipisicing elit.

``` ![text-overflow](/files/nXF9PGqJYdNRA2tWWHSD) *** ## 8. word-wrap 프로퍼티 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다. 사용법 `word-wrap: break-word;` *** ## 9. word-break 프로퍼티 `word-wrap` 프로퍼티와 같이 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다. `word-wrap` 프로퍼티 경우 단어를 어느 정도는 고려하여 개행하지만 `word-break: break-all;`는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다. 사용법 `word-break: break-all;` ```html

abcdefghijklmnopqrstuvwxyz https://www.teachercan.com/

word-wrap: break-word; abcdefghijklmnopqrstuvwxyz https://www.teachercan.com/

word-break: break-all; abcdefghijklmnopqrstuvwxyz https://www.teachercan.com/

``` ![word-break](/files/7eREnXVe597U1kodaOo4) *** ## 10. text-transform 프로퍼티 영문자를 표기할 때 텍스트의 대소 문자를 원하는 대로 바꿀 때 `text-transform` 프로퍼티를 사용한다. 한글에는 영향을 미치지 않고 영문자에만 적용된다. 아래는 `text-transform` 프로퍼티값이다. | 종류 | 설명 | | ---------- | ------------------------- | | capitalize | 각 단어의 첫 번째 글자를 대문자로 변환한다. | | uppercase | 모든 글자를 대문자로 변환한다. | | lowercase | 모든 글자를 소문자로 변환한다. | ```html hello world hello world HELLOW WORLD ``` ![text-transform](/files/20Pc6ymggiTtYlpAWV2E) *** ## 11. Conclusion > text관련 프로퍼티도 많이 사용을 했지만 `white-space`, `text-overflow`, `word-wrap`, `word-break` 프로퍼티는 티처캔을 만들 때만 사용하여 익숙하지 않는 프로퍼티이다. 그만큼 다른 프로퍼터에 비해 비중이 떨어지는 거 같다. 하지만 웹 페이지를 만들면서 필요한 상황이 올 수 있기에 해당 프로퍼티의 특징을 잘 알아두고 있자. *** ## 참고 [poiemaweb 2-7 폰트와 텍스트](https://poiemaweb.com/css3-font-text)\ 도서 - HTML + CSS + 자바스크립트 웹 표준의 정석 *** [👆](#text) 📅 2022-07-19