[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: 모든 문자를 소문자로 바꿈