font-family
- 요소를 구성하는 텍스트의 글꼴을 정의한다.
- 글꼴명을 속성값으로 지정한다.
- 여러 개의 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다
*{
font-family: 굴림, monospace, serif;
}
=> 굴림을 우선 지정하되, 지원되지 않을 경우 monospace를 지정한다
font-size
- 수치와 단위를 지정해 글자의 크기를 정의할 수 있다
| 단위 | 의미 |
|---|
| px | 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기 |
| rem | <html>태그의 font-size에 대응하는 상대적인 크기 |
| em | 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기 |
text-align
- 블록 내에서 텍스트의 정렬 방식을 정의한다
- 미리 정의된 키워드 값을 지정한다
| 속성값 | 의미 |
|---|
| left / right | 왼쪽 또는 오른쪽 정렬 |
| center | 가운데 정렬 |
| justify | 양끝 정렬(마지막 줄 제외) |
p{ text-align: right; }
color
| 속성값 유형 | 방법 |
|---|
| 키워드 | 미리 정의된 색상별 키워드를 사용한다(ex. red, blue) |
| RGB 색상 코드 | # + 여섯자리 16진수 값 형태로 지정한다 |
| RGB 함수 | Red, Green, Blue의 수준을 각각 정의해 지정한다 |
span{ color: red; }
span{ color: #FF0000; }
span{ color: rgb(100%, 0%, 0%); }
-> 모두 같은 컬러에 대한 색상 정의
RGB란?
- RGB 색상은 빛의 삼원색(Red, Green, Blue)을 혼합하여 색을 정의하는 방식
- 모든 수치가 가장 높을 때 흰색이 된다
