[CSS] 텍스트 스타일(line-height, font-style, text-decoration, text-transform)

* 텍스트 행간 높이 설정 line-height

line-height를 px단위로 설정

html

line-height

출력

행 간의 높이가 설정된 것을 확인할 수 있다.

하지만 line-height를 px로 설정하면 폰트사이즈에 맞게 커지거나 줄어들지 않고 px 크기만큼 고정되기 때문에, em 단위를 사용하는 것이 좋다.

 

line-height를 em 단위로 설정

line-height

출력

 

* font-style

font-style

출력

 

 * 선으로 텍스트 꾸미기 text-decoration

밑줄 underline

underline

출력

 

윗줄 overline

overline

출력

 

취소선 line-through

line-through

출력

 

* text-transform

첫 글자를 대문자로 변환 capitalize 

capitalize

출력

 

대문자로 변환 uppercase

uppercase

출력

 

소문자로 변환 lowercase

lowercase

출력

 

* 목록 스타일 list-style

html

circle

출력

 

loxwer-alpha

출력