typography

font-size

• px: 절대 단위

.text {
  font-size: 20px;
}

• em: 실제로 적용된 폰트 사이즈가 1em (상대 단위 : 기준에 따라 달라짐. 선호되서 사용되진 않음)

.text {
  font-size: 2em; (=20px)
}

• rem(root em): HTML에 적용된 폰트 사이즈가 1rem. (상대 단위 : 기준에 따라 달라짐)

html {
  font-size: 20px;
}

.text {
  font-size: 3rem; (=60px)
}

line-height (em을 주로 사용)

• em: 실제로 적용된 폰트 사이즈가 1em (상대 단위 : 기준에 따라 달라짐. 선호되서 사용되진 않음)

.tex {
  font-siz: 15px;
  line-height: 1.5; (=30px)
}
// em은 생략 가능.
// line-height가 몇이든 text는 줄간격에 중간에 위치.

letter-spacing (em을 주로 사용)

자간 : 글자 간격

• em: 실제로 적용된 폰트 사이즈가 1em (상대 단위 : 기준에 따라 달라짐. 선호되서 사용되진 않음)

.tex {
  font-size: 15px;
  letter-spacing: -0.02em; (= -0.3px)
}
// em을 생략하면 안됨.

font-family

서체

.tex {
  font-family: 'A'
  //'A'라는 폰트를 적용.

  font-family:'A', sans-serif;
  //'A'라는 폰트를 적용해 'A'폰트가 없으면 sans-serif 폰트 중 아무거나 적용해.

  font-family:'A', 'B', sans-serif;
  //'A'라는 폰트를 적용해 'A'폰트가 없으면 'B'를 적용해 'B'도 없으면 sans-serif 폰트 중 아무거나 적용해.

}

font-weight

굵기

color

색상

• HEX / RGB / RGBA(투명도)

text-align

텍스트 정렬

• left / right /center

text-indent

들여쓰기 : px 기준 (-px도 가능)

.text {
  text-indent : 100px;
}

text-transform

영어에만 대소문자 적용.

• none / uppercase / lowercase / capitalize (첫번째 글자만 대문자)

text-decoration

텍스테에 줄 귿기 (a태그의 밑줄을 지울 때 많이 사용)

• none / underline / line-through / overline

font-style

기울기 (em 태그의 기울기를 없앨 때 사용)

• normal / italic