6장 텍스트 관련 스타일

font-family 속성: 글꼴 지정

font-face 속성: 웹폰트 사용 

  - 구글웹폰트 사용 

  - 직접 폰트 업로드 

font-size 속성: 글자 크기 조절: 정대 크기/상대 크기/크기/백분율 

 - <크기>의 단위들 :

  - em: M의 너비를 기준으로 크기 조절 

  - ex: x의 높이를 기준으로 크기 조절 

  - px: 상대 크기

  - pt: 포인트 

font-weight 속성: 글자 굵기 지정 

  - bold/lighter/bolder

  - 100~900 수치 

font-variant 속성: 작은 대문자 표시 

  - small-caps 

font-style 속성: 글자 스타일 지정 

  - italic: 글꼴이 기울어지게 디자인 

  - oblique: 그냥 기울어지게 함 

 

약식 표현: { 글자 스타일/ 작은 대문자/ 글자 굵기/ 글자 크기/ 줄 간격/ 폰트 패밀리 }

---

color: 색상 지정 

text-decoration 속성: 줄 표시 

  - none 

  - underline: 밑줄 

  - overline:영역 위 선

  - line-through: 취조선

text-transform 속성: 텍스트 대소문자 변환 

  - none 

  - capitalize: 첫 글자 대문자 

  - uppercase: 모든 글자 대문자 

  - lowercaes: 모든 글자 소문자

  - full-width: 모든 글자 전간 문자 

text-shadow 속성: 그림자 효과

  - none

  - 가로 / 세로 거리 

  -번짐 정도 / 색상 

( + 오른쪽,아래쪽/ - 왼쪽,위쪽 )

white-space 속성: 공백 처리 

  - none 

  - nowrap:  계속 한 줄 (여러 개 공백 하나로)

  - pre: 계속 한 줄 (여러 개 공백 그대로)

  - pre-line: 자동 줄 바꿈 (여러 개 공백 하나로)

  - pre-wrap: 자동 줄 바꿈 ( 여러 개 공백 그대로)

letter-spacing 속성: 낱 글자 간격 조절 (주로 사용)

word-spacing 속성: 단어 사이 간격 조절

---

derection 속성: 글자 쓰는 방향 지정 

  - ltr 

  - rtl

text-align 속성: 텍스트 정렬 

  - start: 현재 줄 시작 위치에 맞춤 

  - end: 현재 줄 끝 위치에 맞춤 

  - left/ right

  - center

  - justify: 양쪽에 맞춤

  - match-parent: 부모 요소에 따라 맞춤 

text-justify 속성: 정렬 시 공백 조절

  - auto

  - none

  - inter-word: 단어 사이 공백 조절 

  - distribute: 인접 글자 사이 공백 동일 맞춤 

text-indent 속성: 들여쓰기

  - 크기/ 백분율 

line-height 속성: 줄 간격 조절 

text-overflow 속성: 초과 텍스트 표기

  -clip: 초과 텍스트 자름

  - ellipsis: 말 줄임표 표시

---

list-style-type 속성: 목록 불릿/번호 스타일 지정 

  - disc /circle : 채운 원/ 빈 원

  - spuare 

  -decimal-leading-zero: 앞에 0붙는 십진수

  - lower/upper-roman: 로마자

  - lower/upper-latin: 대소문자

list-style-image: 불릿 대신 이미지 넣기

list-style-position: 목록 들여쓰기 

 

약식 표현: list-style { list-style-type/ list-style-position/ list-style-image }