font-family 속성
- 이 속성도 자식요소에 상속이 된다.
- <body>, <p>, <hn>과 같이 텍스트를사용하는 요소들에서 사용
- body{font-family:"맑은 고딕", 돋움, 굴림}과 같은 형태로 사용
(맑은 고딕이 있으면 맑은 고딕으로 보이고 아니면 돋움이나 굴림체로 나타남)
(구글 폰트 : https://fonts.google.com/)
<예제>
영어의 경우는 적용이 되고, 한글은 적용이 안돼서 저 폰트가 없을 때 나오도록 해둔 궁서가 적용됨.
<예제 - 폰트 사이즈>
font - weight / variant / style
- 글자 굵기
bold: 굵게 bolder : 더 굵게 lighter : 얇게
- 대문자를 소문자에 맞춰서 작게 표시
small-caps 사용시
- font 속성 : 글꼴, 글자크기/줄간격, 글자체 동시에 지정 가능
<예제 - weight, variant>
<예제 - font-style>
<예제 - font>
텍스트 스타일
색깔 지정
글자에 장식
- 기본 | 밑줄 | 윗줄 | 취소선
대문자나 소문자 바꾸는 것
- 기본 | 첫번째 글자만 대문자로 변환 | 모든 글자 대문자 | 모든 글자 소문자
그림자 효과
- 가로 거리에 양수면 오른쪽 음수면 왼쪽에 그림자
- 세로는 양수는 아래 음수는 위쪽
- 번짐 정도 : 양수는 모든 방향으로 퍼지고 음수는 축소
- 색상 : 그림자 색상
글자간 간격 지정
<예제 - color>
<예제 - text-decoration>
<예제 - text-transform>
<예제 - text-shadow>
<예제 - shadow의 중첩>
- 그림자의 중첩 가능
<예제 - letter-spacing>
문단 스타일
정렬
- 오른쪽 | 왼쪽 | 중간 | 양쪽
크기
- 첫글자를 얼마나 들여쓸지를 크기로 지정(백분율은 거의 안씀)
줄간격
지정된 영역에서 텍스트가 영역보다 커질 때 어떻게 처리할 것인지
- clip : 넘치는건 자르기
- ellipsis : 영역 넘어가는건 표시하지 않는 대신 잘린 텍스트가 있다고 ...으로 나타냄
<예제 - text-align>
<예제 - text-indent>
<예제 - line-height>
- 줄간격 차이 확인 가능
<예제 - text-overflow>
목록과 링크 스타일
list-style-type
- decimal : 십진수
- 십진수 앞에 0
- 로마 소문자 / 대문자
- 알파벳 소문자 / 대문자
<예제 - list-style-type(순서목록 없는 목록)>
<예제 - 순서 목록>
<예제 - list-style-image>
<예제 - list-style-position>
<문제>
