CSS - 폰트/텍스트 관련 속성

폰트 속성

.text {
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
 }

• font-size
  글자의 크기를 조절하는 속성으로 기본값은 16px이고 단위가 다양함
• font-style
  글씨체를 조절하는 속성하는 기본값은 normal이고 기울임체를 위해 많이 사용함
• font-weight
  글자의 굵기를 조절하는 속성으로 기본값은 normal(400)이고 보통 100단위로 설정

.text {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 10px;
}

• font-family
  글꼴 자체를 변경하기 위해 사용 , 앞에 올수록 우선순위가 높음
• line-height
  줄의 높이를 설정함

.text{
  font: italic 100 20px/1.7 Verdana, Geneva, Tahoma, sans-serif;
}

• font
  css 단축속성으로 font-size font-family font-style font-weight font-height 속성을 줄 수 있다.
  ❗ font-size , font-family는 필수 항목

.text {
  letter-spacing: 5px;
  word-spacing: 5px;
}

• letter-spacing / word-spacing
  글자간 간격 / 단어간 간격으로 normal에서 5px를 더한다.

텍스트 속성

.text{
  text-align: center;
}

• text-align
  텍스트 정렬 방법으로 center , right , left 로 정렬
  block 요소만 사용 가능 , inline 요소에는 사용 불가

.text{
  text-indent: 20px;
}

• text-indent
  들여쓰기 , 기본값은 0이고 block 요소만 가능

.text{
  text-decoration: underline red 3px wave;
}

• text-decoration
  단축 속성으로 4가지 속성을 담고있음 , 순서 상관 X

.text{
  text-transform: capitalize;
}

• text-transform
  대소문자 변경시 사용 , 단어의 맨앞만 대문자로 변경시 사용
  ❗ 보여질때만 변경되어서 보임 원문은 바뀌지 않음
  ❗ 한글에는 적용안됨