![[CSS] 문단 관련 속성](/images/posts/index-webdevelopment.png)
#01. 주요 문단 관련 속성
문단을 구성하는 HTML 요소에 적용해야 한다.
| 속성 | 설명 | 값 |
|---|---|---|
| text-align | 텍스트의 가로축 정렬 | left, center, right |
| text-indent | 첫 번째 줄에 대한 들여쓰기. (마이너스 값을 적용할 경우 내어쓰기가 됨) | px단위 값 |
| text-decoration | 밑줄, 윗줄, 취소선, 깜박임 효과 | none(기본값), underline, over-line, line-through, blink |
| vertical-align | 어떠한 요소를 기준으로 한 세로축 위치 | top, middle, bottom |
| letter-spacing | 글자간의 간격 (자간) | px, %, em |
| word-spacing | 단어간의 간격 (어간) | px, %, em |
| white-space | 줄 바꿈 속성 제어 | normal, nowrap |
- vertical-align:
~~을 기준으로 텍스트를 배치해야 하기 때문에 텍스트 주변의 이미지나 input 요소에게 부여해야 한다. - text-decoration: blink 속성은 모든 브라우저에서 지원되지는 않는다.
- white-space : normal인 경우 공백을 기준으로 줄 바꿈이 되므로 공백이 없다면 줄바꿈 처리되지 않는다.
#02. 텍스트 자동 말줄임 처리
한 줄 처리
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
두 줄 이상 처리
-webkit-line-clamp 속성에 라인 수를 명시한다.
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
#03. 텍스트 그림자 효과
text-shadow: x-offset y-offset blur-radius color;
- x-offset : 본체와 그림자의 가로축 거리 (px단위), +값인 경우 오른쪽 방향
- y-offset : 본체와 그림자의 세로축 거리 (px단위) +값인 경우 아래 방향
- blur-radius : 그림자의 번짐 정도 (px단위)
- color : 그림자의 색상
그림자 관련 값들을 콤마로 구분하여 여러개 지정할 경우 포토샵의 레이어 처럼 처리할 수 있다.
text-shadow: x-offset y-offset blur-radius color, <-- 맨 위
x-offset y-offset blur-radius color,
x-offset y-offset blur-radius color,
x-offset y-offset blur-radius color; <-- 맨 밑