Post

[CSS] 문단 관련 속성

CSS 역시 HTML과 마찬가지로 문장과 문단 관련 속성으로 구분됩니다. 먼저 살펴볼 속성은 문장을 구성하는데 사용되는 속성입니다.

[CSS] 문단 관련 속성

#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. 텍스트 자동 말줄임 처리

한 줄 처리

1
2
3
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

두 줄 이상 처리

-webkit-line-clamp 속성에 라인 수를 명시한다.

1
2
3
4
5
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

#03. 텍스트 그림자 효과

1
text-shadow:  x-offset   y-offset   blur-radius   color;
  • x-offset : 본체와 그림자의 가로축 거리 (px단위), +값인 경우 오른쪽 방향
  • y-offset : 본체와 그림자의 세로축 거리 (px단위) +값인 경우 아래 방향
  • blur-radius : 그림자의 번짐 정도 (px단위)
  • color : 그림자의 색상

그림자 관련 값들을 콤마로 구분하여 여러개 지정할 경우 포토샵의 레이어 처럼 처리할 수 있다.

1
2
3
4
  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;  <--  
This post is licensed under CC BY 4.0 by the author.