[CSS] 문단 관련 속성

by 호쌤(이광호) on March 12, 2022

#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;  <-- 맨 밑