CSS 탐구생활 : text관련 스타일 속성들

1. text-decoration

1-1. text-decoration-line(취소선, 물결선, 밑줄등으로 텍스트를 꾸며줄 때 사용, 기본값은 none)

- underline : 텍스트에 밑줄을 그음

- line-through : 텍스트 취소선

- overline : 텍스트 위에 선을 그음

 

1-2. text-decoration-style(선의 스타일 지정)

- solid : 직선

- dotted : 점선

- double : 두 줄 

- dashed : '-'(dash) 모양의 선

- wavy : 물결

 

1-3. text-decoration-thickness

: px이나 rem등으로 선의 굵기 조절

 

1-4. text-decoration-color

: 영문으로 된 컬러값, hex코드, rgb로 선의 색상 지정

 

<예제>

See the Pen Untitled by proccm (@proccm) on CodePen.

 

2. text-shadow

텍스트의 그림자를 넣고 싶을 때 사용한다.

text-shadow: 그림자의 수평거리, 그림자의 수직거리, 그림자의 번짐정도, 그림자의 색

 

** 그림자의 수평거리와 수직거리는 필수 값

See the Pen Untitled by proccm (@proccm) on CodePen.

 

 

3. 기타 text관련 속성들

- text-align : justify 

>> 텍스트 양쪽 정렬

 

- word-spacing 속성

>> 단어 간의 간격 조정(px, em등)

 

- text-indent 속성

>> 첫 글자의 들여쓰기 정도를 나타냄(px, em등)

 

- letter-spacing 속성

>> 텍스트의 자간 설정(px, em등)

 

- line-height 속성

>> 텍스트의 줄 높이 조정(px, em등)

 

- ul태그와 ol태그의 list-style 속성

>> 목록의 맨 앞 기호 설정