[CSS 개념 잡기] 폰트 및 텍스트 관련 속성

 

 

2. 폰트 관련 속성

 

1) font 속성

✔ font - size, style, weight

• font-size : 글자의 크기
  • 대부분의 브라우저는 16px를 기본으로 함
• font-style : 문자의 변화
  • normal(default), italic, oblique...
• font-weight : 굵기
  • normal - 400
  • bold - 700...
  • 폰트에 따라 지원 폭이 다름(넘어가면 최대치 적용)

 

 

✔ font - family

• 글꼴 선택 속성
• 여러 개의 글꼴을 나열해서 사용 '맑은고딕', sans...
  • 앞에서부터 사용 가능한 폰트인지 판단 후 적용 됨

 

✔ line-height

• 줄의 높이
• 글꼴마다 기본값이 차이가 있음 (line-height으로 통일 가능)
• 부모 요소의 height = 자식 요소의 line-height으로 주면 행 높이 중간으로 맞춰짐

 

 

✔ font와 단축속성(shorthand)

앞서 나온 font의 속성들을 단축해서 표현 가능하다.

• font-size와 font-family는 반드시 포함해야 함
  ```css
  .text {
  font: 20px 'Times New Roman', 맑은고딕, serif...;
  }
• font-style, font-weight는 순서대로 가장 앞에 적어줘야 함

  .text {
  font: italic 100 20px 'Times New Roman', Times, serif;
  }

• line-height는 size 뒤에 /를 붙이고 사용함

  .text {
  font: italic 100 20px/1.7 'Times New Roman', Times, serif;
  }

  
  
  

✔ letter-spacing, word-spacing

여백, 폰트마다 간격이 다르다.

1. letter-spacing
   • 글자 사이 간격
   • 음수도 가능
2. word-spacing
   • 단어 사이 간격
   • % 사용 가능

 

2) text 속성

✔ text-align

정렬

• left, center, right
• 블록 크기에 맞춰서 정렬
• 따라서 span, inline 요소에 적용 안됨

 

 

✔ text-indent

들여쓰기

• text-align과 마찬가지로 inline 요소에 적용 안됨

 

 

✔ text-decoration

글자 장식

• 대부분 shorhand로 작성함
  • 순서는 상관이 없음
  • text-decoration-line은 필수
    • none, underline, overline, line-through
    • 여러 개 동시에 지정 가능
  • text-decoration-color, text-decoration-style, text-decoration-thickness...

    span {
    text-decoration: line-through red 3px double;
    }

    
    
    

✔ word-break

텍스트가 자기 콘텐츠 밖으로 overflow할 때 줄을 바꿀 지 지정(box wrap같은 느kkim). 한중일 텍스트와 일반 텍스트 차이가 있음

• break-all: overflow를 방지하기 위해 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있음
• keep-all: 한중일 텍스트에선 줄을 바꿀 떄 단어를 끊지 않음

 

✔ text-transform

한국어엔 적용 불가능, 상속됨

• 대표적으로 쓰이는 속성
  • capitalize: 각 단어의 첫 문자를 대문자로 만듦
  • uppercase: 모든 문자를 대문자로 바꿈
  • loswercase: 모든 문자를 소문자로 바꿈