font 관련 속성들을 알아보자!
폰트 / 텍스트 관련 속성
font-size
- 글자의 크기를 변경 ( px, em 등의 단위 ) 기본 사이즈는 16px
font-style
- 기본값 nomal, 보통 italic체로 만들기 위해 사용
font-weight
- 글씨의 굵기를 조정, 주로 100단위 값으로 사용 ( bold = 400 )
font-family
- 글자의 글꼴을 지정하기 위한 속성, 여러개의 글꼴을 "," 로 나열 ( 앞에서부터 사용 가능한 것으로 사용 )
line-height
- 줄 간격을 조정하는 속성, 숫자나 단위 값 사용 ( 기본 1.0 ~ 1.2 )
- 여러 글꼴 사용 시 지정하지 않으면 높이가 상이, 통일감을 위해 사용 권장
font ( 단축 속성 )
- font : style weight size/height family 순서로 사용 ( size, family는 필수 )
letter-spacing
- 자간을 설정할 때 사용 ( nomal + ( - or + num )) px 등 단위
word-spacing
- 단어 사이 간격을 설정할 때 사용 ( nomal + ( - or + num )) px 등 단위
text-align
- 텍스트의 정렬 변경, 블럭 요소!!!의 너비에 맞춘 정렬
- 인라인 요소라면 부모 요소에 속성을 추가해 부모 너비에서 정렬 가능
text-indent
- 요소의 앞쪽에 들여쓰기 지정, 블럭 요소만 가능!!!
text-decoration ( 단축 속성 )
- line : underline ( 밑 줄 ), overline ( 윗 줄 ), line-through ( 취소선 ) 복수 사용 가능
- style : solid ( 실 선 ), double ( 두 줄 ), dotted ( 점 선 ), wavy ( 물결 )
- text-decoration : line, color, weight, style 순서 상관 x
word-break
- 기본값 nomal - 한중일 텍스트 제외 블럭 요소의 가로 너비를 무시
- break-all 주로 영어에 사용, 가로 너비만큼 자동 줄 바꿈
- keep-all 주로 한중일 텍스트, 띄어쓰기 없을 시 모든 단어를 너비 무시하고 연결
text-transform
- uppercase, lowercase, capitalize(단어 앞글자만 대문자) 대소문자 변경 시 사용
- 실제 HTML 내부 텍스트가 변경되는 것은 아님
