font와 text의 여러 특성들
- font-family : 서체 종류
- 정확한 서체명 작성 (띄어쓰기, 인용부호, 대소문자 등)
- 상대방의 컴퓨터에 서체가 없는 경우를 대비해 3~4개 서체 추가 작성 (fallback fonts)
- 바탕체 종류로 끝나는 경우 제일 마지막은 serif로 작성
- 돋움(고딕)체 종류로 끝나는 경우 제일 마지막은 sans-serif로 작성
- font-size : 서체 크기
- font-weight : 서체 굵기
- font-style : 서체 스타일
- normal : 기본값
- italic : 이탈릭체
- oblique : 기울이기 (italic과 비슷)
- text-decoration : 밑줄 및 취소선
- underline : 밑줄
- overline : 윗줄
- line-through : 가로줄 / 취소선
- none : 선 없음
- -line : 선의 위치
- -style : 선의 종류 / solid(직선), dashed(긴 점선), dotted(짧은 점선), double(두줄)
- -color : 선의 색상
- text-underline-offset : 선과 글자의 거리. 레이아웃에 영향을 주지 않음
- text-underline-position : 선의 위치 기준
- text-align : 문단 및 인라인 요소 정렬
- left : 왼쪽 정렬
- center : 중앙 정렬
- right : 우측 정렬
- justify : 양 끝 기준 정렬. 문단의 양 끝을 일렬로 맞추고 맨 마지막 줄만 왼쪽으로 정렬.
- text-indent : 들여쓰기 / 내쓰기
- text-shadow : 서체 그림자
- x축, y축, 번짐, 색상 (10px, 10px, 10px, #000)
- 번짐, 색상 값은 생략 가능하며 색상 값 생략시 글자의 색과 같음.
- text-transform : 대소문자
- lowercase : 소문자
- uppercase : 대문자
- capitalize : 단어의 첫자만 대문자
- line-height : 줄과 줄 사이 간격. 행간 (인라인 요소의 간격을 조절할 때도 사용.)
- 단위값, 고정값으로는 잘 사용하지 않는 편.
- 단위값 없이 작성하면 배수의 값으로 적용되며 배수값 방식을 많이 사용한다.
- 상속되기 때문에 보통 <body>태그 안에 넣는 편이다.
- letter-spacing : 글자와 글자 사이 간격. 자간
- word-spacing : 단어와 단어 사이 간격. 어간
- 인라인 세로 정렬 vertical-align
- 서체 및 인라인 요소 세로 정렬
- 글씨와 이미지 및 input의 정렬 상태가 맞지 않는다면, 이미지 요소 및 input에 vertical-align 적용
- 인라인 요소.
- 서체가 기본적으로 가지고 있는 여백이 있고 이미지도 서체로 취급되기 때문에 vertical-align으로 값을 정해줘야 서체나 이미지의 간격에 여백을 컨트롤 할 수 있다.
'CSS' 카테고리의 다른 글
| [CSS] 가로 세로 영역 제어 width, height (0) | 2022.10.12 |
|---|---|
| [CSS] 가상선택자 :(pseudo-class), ::(pseudo-element) (0) | 2022.10.11 |
| [CSS] 기본 선택자 종류 및 우선 순위 (0) | 2022.10.05 |
| [CSS] color / background-color (0) | 2022.10.04 |
| [CSS] CSS3란? (0) | 2022.10.04 |