CSS 속성(Properties) - 글꼴, 문자

글꼴, 문자

• 폰트 제어

글꼴

font-style

• 글자의 기울기
• 값
  • normal [기본 값] : 기울기 없음
  • italic: 기울어진 글자

 

font-weight

• 글자의 두께
• 값
  • normal, 400 [기본 값] : 기본 두께
  • border, 700: 두껍게
  • 100 ~ 900: 100 단위의 숫자 9개

 

font-size

• 글자의 크기
• 값
  • 16px [기본 값]
  • 단위: px, em, rem 등 단위로 지정

 

line-height

• 한 줄의 높이, 행간과 유사
• 글자 수직 정렬 가능
• 값
  • normal [기본 값]
  • 숫자: 요소의 글꼴 크기의 배수로 지정
    • ex) line-height: 1.4;
  • 단위: px, em, rem 등 단위로 지정

 

font-family: 글꼴1, “글꼴2”(띄어쓰기 등 특수문자가 포함된 글꼴은 큰 따옴표로 묶어야 함), … 글꼴계열(필수 작성, sans-serif 같은 고딕체 계열)

• 글꼴(서체) 지정

 

문자

color

• 글자의 색상
• 값
  • rgb(0, 0, 0): 검정색 [기본 값]
  • 색상

 

text-align

• 문자의 정렬 방식
• 값
  • left
  • right
  • center

 

text-decoration

• 문자의 장식(선)
• 값
  • none: 장식 없음
  • underline: 밑줄
  • line-through: 중앙 선

 

text-indent

• 문자 첫 줄의 들여쓰기
• 값
  • 0 [기본 값] : 들여쓰기 없음
  • 단위: px, em, rem 등 단위로 지정
  • 음수 사용 가능

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.