12-2 CSS 속성 - 글꼴, 문자

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

CSS로 가능한 속성

 

---

글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다.
           : 기본값            : 일반            : 잘 사용하지 않음 
ex) width: auto; , max-width: none; 

※ 글꼴

• font-style

      → 글자의 기울기

      → 기본 값은  normal 로 기울기 없음

      →  italic  : 이텔릭체

    →  oblique  : 기울어진 글자

 

• font-weight

      → 글자의 두께

      → 기본 값은  normal, 400  으로 기본 두께

      →  bold, 700  : 두껍게

    →   bolder  : 상위(부모)요소보다 더 두껍게

    →  lighter  : 상위(부모)요소보다 더 얇게

      →  100 ~ 900  : 100단위의 숫자 9개, normal과 bold 이외 두께

 

• font-size

      → 글자의 크기

      → 기본 값은  16px  로 기본 크기

      →  단위  : px, em, rem 등 단위로 지정

    →   %  : 부모요소의 폰트 크기에 대한 비율

    →  smaller  : 상위(부모)요소보다 작은 크기

    →   larger  : 상위(부모)요소보다 더 큰 크기

    →  xx-small ~ xx-large  : 가장 작은 크기 ~ 가장 큰 크기까지, 7단계의 크기를 지정

 

• line-height

      → 한 줄의 높이, 행간과 유사

      → 기본 값은  normal  로 브라우저의 기본 정의를 사용

      →  숫자  : 권장. 요소의 글꼴 크기의 배수로 지정 

      →  단위  : px, em, rem 등의 단위로 지정 

      →  %  : 요소의 글꼴 크기의 비율로 지정

 

• font-family

      → 글꼴(서체) 지정

      → font-family : 글꼴1, "글꼴2"(띄어 쓰기가 있는 경우), .....글꼴계열(앞에 해당하는 글꼴이 브라우저에 없을 때 반드시 적용되야하는 글꼴)

      →  sans-serif  : 고딕체 계열 

      →  serif  : 바탕체 계열

      →  monospace  : 고정너비(가로폭이 동등) 글꼴 계열

      →  cursive  : 필기체 계열

      →  fantasy  : 장식 글꼴 계열

 

 

※ 문자

 

• color

      → 글자의 색상 

      → 기본 값은  rgb(0, 0, 0) 으로 검정색

      →   색상  : 기타 지정 가능한 색상

 

• text-align

      → 문자의 정렬 방식 

      → 기본 값은  left 로 왼쪽 정렬

      →   right  : 오른쪽 정렬

      →   center  : 가운데 정렬

      →   justify  : 양쪽 정렬

 

• text-decoration

      → 문자의 장식(선) 

      → 기본 값은  none 으로 장식 없음

      →   underline  : 밑줄

      →   line-through  : 중앙 선

      →   overline  : 윗줄

 

• text-indent

      → 문자 첫 줄 들여쓰기 (음수 사용가능)

      → 기본 값은  0 으로 들여쓰기 없음

      →   단위  : px, em, rem 등 단위로 지정

      →   %  : 요소의 가로 너비에 대한 비율