02. 텍스트 스타일
CSS 단위 구성
<절대크기>
- px : 똑같은 px 사이즈여도 기기마다 크기가 다르게 보일 수 있다.
- pt : 1 ~ 71 point 까지 지정할 수 있다.
<상대크기>
- 상대크기는 어떤 대상을 보고 상대적인 크기를 가지고 단위로 나타낸다.
- em : 부모의 크기를 1em으로 따진다. 1배 = 1em = 100%, 1.5배 = 1.5em = 150% 부모 요소의 크기가 기준이 된다. 상속되면서 자식에서 더 커지는 경우가 발생한다.
- rem : root 최상위 태그(<body>) 의 크기를 기준으로 배수된다.
- % : 백분율로 상위 요소에 대한 상대적인 비율을 나타낸다. 초기설정 값 100%
텍스트 스타일
font-family
폰트 글꼴 설정, 웹 문서에서 사용할 폰트를 지정한 것
실제로 사용자 pc에 해당하는 폰트가 설치가 되어있어야 한다. 만약 내가 지정한 글꼴들이 없으면 브라우저 기본 글꼴이 적용된다.
두 개 이상의 글꼴을 설정할 때는 , 로 구분
상속이 되기 때문에 모든 문서를 적용하고 싶다면 <body> 태그 안에 작성할 것
요즘에는 웹폰트를 자주 사용한다.
선택자{font-family: 글꼴1[, 글꼴2, 글꼴3];}
font-size
텍스트의 크기를 변경할 때 사용한다.
font-weight
글자의 두께를 변경할 때 사용한다.
font-variant
영어를 작은 대문자로 표시할 때 사용한다.
font-style
텍스트의 기울임(이텔릭체)을 지정할 때 사용한다.
- italic : 처음부터 기울어진 글자가 존재, 글꼴 안에 원래 존재하는 기울임을 갖다 사용한다.
- oblique : 기본 글자를 기울여서 표시, 기본 글자를 억지로 기울인 것
color
텍스트의 색상을 지정할 때 사용한다.
text-decoration
텍스트에 줄을 긋거나 없앨 때 사용한다.
글자에 밑줄이나 취소선, 윗 선을 긋거나 밑줄을 표시하지 않는 속성
- none : 밑줄 삭제
- underline : 밑줄 표시
- overline : 윗줄 표시
- line-through : 취소선 표시
text-transform
영문 텍스트의 대소문자 변환 시 사용한다.
- none : 변환 없음
- capitalize : 시작 첫 번째 글자를 대문자로 변환
- uppercase : 모든 글자 대문자로 변환
- lowercase : 모든 글자 소문자로 변환
text-shadow
텍스트에 그림자 효과를 줄 때 사용한다.
선택자{text-shadow: non or 가로 세로 번짐 색상;}
- 가로 값 : 정수 값이면 오른쪽으로 그림자, 음수 값이면 왼쪽으로 그림자
- 세로 값 : 정수 값이면 아래쪽으로 그림자, 음수 값이면 위쪽으로 그림자
- 번짐 : 번지는 범위 지정, 수치로 표현
white-space
공백을 처리해주는 속성
선택자{white-space: normal or nowrap or pre or pre-line or pre-wrap}
- normal : 여러 개의 공백을 하나로 표시
- nowrap : 여러 개의 공백을 하나로 표시, 줄 바꾸지 않고 한 줄 표시 (웹 브라우저 크기가 줄어들어도 한 줄로 표시)
- pre : 여러 개의 공백을 그대로 표시
- pre-line : 여러 개의 공백을 하나로 표시, 영역 넘어가면 자동 줄 바꿈
- pre-wrap : 여러 개의 공백을 그대로 표시, 영역 넘어가면 자동 줄 바꿈
letter-spacing & word-spacing
낱개 글자의 간격을 조정하고 싶을 때 사용 & 단어와 단어 사이의 간격을 조정하는 속성
문단 스타일
문장을 정렬하고 싶을 때 사용한다.
text-align
문장을 정렬하고 싶을 때 사용한다.
text-indent
문장을 들여쓰기 하고 싶을 때 사용한다.
line-height
문장끼리 줄 간격 조정하고 싶을 때 사용한다.
text-overflow
영역을 벗어나는 텍스트에 대해 지정하고 싶을 때 사용한다.
목록 스타일
list-style-type
목록 기호의 스타일을 지정하는 속성
list-style-image
기호 대신 이미지 삽입
list-style-position
목록 기호 들여쓰기
list-style
목록 스타일 한 번에 지정
'Programming > CSS' 카테고리의 다른 글
| DAY 84. CSS - 색상, 배경, 애니메이션 스타일 (0) | 2021.11.10 |
|---|---|
| DAY 83. CSS - 레이아웃 스타일 (0) | 2021.11.09 |
| DAY 81. CSS - 선택자 (0) | 2021.11.07 |
