[CSS]속성-글꼴, 문자

- font

 글자 관련 속성 지정

 font-style 글자 기울기 지정 // 기본값: normal

 font-weight 글자 두께 지정 // 기본값: normal

 font-size 글자 크기 지정 // 기본값: normal

 line-height 줄 높이(줄 간격) 지정 // 기본값: normal

 font-family 글꼴 지정 // 운영체제에 따라 달라짐

 

사용법

 font: 기울기 두께 크기 / 줄높이 글꼴;

.box {
  font: italic bold 20px / 1.5 "Arial", sans-serif;
}

단축 속성을 사용하려면 font-size(크기)와 font-family(글꼴)는 필수 입력

 

- font-style

 normal 스타일 없음 // 기본값: normal

 italic 이텔릭체

 oblique 기울어진 글자

 

- font-weight

 글자의 두께를 지정

 normal 기본 글자 두께, 400과 동일 // normal 400

 bold 글자 두껍게, 700과 동일

 bolder 부모 요소보다 더 두껍게

 lighter 부모 요소보다 더 얇게

 숫자 100부터 900까지의 100단위의 숫자 9개

        100 thin

        200 extra light

        300 light

        400 normal

        500 medium

        600 semi bold

        700 bold

        800 extra bold

        900 black

 

- font size

 글자의 크기를 지정

 단위 px, em, % 등 // 기본값: 16px

 

- line-height

 줄 높이(줄 간격)를 지정

 단위 px, em, %, 숫자 등 // 기본값: normal

 

- font-family

 글꼴 지정

 글꼴 후보

 글꼴 계열:

    serif 바당체 계열

    sans-serif 고딕체 계열

    monospace 고정너비 글꼴 계열

    cursive 필기체 계열

    fantasy 장식 글꼴 계열

 사용법: font-family: 글꼴후보1, 후보2, ...., 글꼴 계열;

.box {
  font-family: Arial, "Open Sans", "돋움", sans-serif;
}

---

- color

 문자의 색상을 지정 // rgb(0, 0, 0, 0)

 

표현

  색상이름        브라우저에서 제공하는 색상의 이름 // red, blue,,,,

  Hex 색상코드  16진수 색상 // #000000

  RGB              빛의 삼원색 // rgb(255, 255, 255)

  RGBA            빛의 삼원색, 투명도 // rgb(255, 0, 0, .5)

  HSL               색상, 채도, 명도 // hsl(120, 100%, 50%)

  HSLA             색상, 채도, 명도, 투명도 // (hsla(120, 100%, 50%, .3)

 

- text-align

 문자 정렬 방식을 지정

  left      왼쪽 정렬

  right    오른쪽 정렬

  center  가운데 정렬

  justify   양쪽 맞춤 (한줄에서는 동작하지 않는다)

 

- text-decoration

 문자의 장식(line)을 설정

  none           선 없음

  underline      밑줄을 지정

  overline        윗줄을 지정

  line-through  중앙선을 지정

 

- text-indent

 (첫번째 줄의) 들여쓰기를 지정

 음수 값을 사용하면 내어쓰기를 지정

 text-indent: -9999px로 글자를 안보이게 하는 용도로 사용함.

 

- letter-spacing

 문자의 자간을 지정

 단위 px, em 등 // 기본 값: normal

 

- word-spacing

 단어 사이의 간격을 설정

 단위 px, em 등 // 기본 값: normal

 

 

 

 

 

 

#패스트캠퍼스