INDEX

1. 요점
2. Color
3. Font-family
4. 서채의 종류
5. 웹 안전 서채
6. font-size
7. font-style
8. font-weight
9. font-variant
10. line-height
11. font

요점

• color - 글자 색을 지정.

• font-family - 글자의 서체를 지정.

• 서체의 종류

• • 세리프(serif) - 꺽쇠가 있는 서체, 가독성을 보다 높여 줌.
  • 산세리프(sans-serif) - 꺽쇠가 없는 서체, 심플하고 깔끔한 서체.
  • 모노스페이스(monospace) - 글자들의 너비가 동일한 서체, 코딩 작업 등에 주로 사용.
  • 커시브(cursive) - 필기체.
  • 판타지(fantasy) - 장식이 많은 서체, 제목 같은 일부 영역에 유용.

• 웹 안전 서체는 대부분의 PC에 내장되어 있는 서체.

• font-size - 글자의 크기를 지정.

• font-style - 이텔릭과 같은 스타일을 지정.

• font-weight - 글자의 굵기를 조절.

• font-variant - 영문자 소문자를 작은 대문자로 변경.

• line-height - 줄 높이

• font - 글자 관련 속성의 축약 버전. font-family, font-style, font-size, font-weight, line-height를 한 번에 지정할 수 있음. 단 속성들의 순서가 중요.

Color

• 글자 색을 지정하는 스타일

• 속성 값으로 HEX, rgb(), 색상 명 등이 올 수 있음

  h1{
      color: #ff0000;
  }
  

Font-family

• 글씨 서체를 지정하는 속성
• 예를 들어 ‘돋움’으로 할 경우 아래와 같음

body{
    font-family:"돋움";
}

• 다만 다른 컴퓨터에서 해당 서체가 없는 경우 안나올 수 있음
• 따라서 대안 서체를 같이 선언

body{
    font-family: "돋움", dotum, "굴림", gulim, arial, helvetica, sans-serif;
}

• 서채가 없으면 다음 서채를 적용
• 돋움->dotum->굴림… 순으로 적용

서채의 종류

• 크게 다섯가지

• • 세리프(serif) - 꺽쇠가 있는 서체, 가독성을 보다 높여 줌.

    

  • 산세리프(sans-serif) - 꺽쇠가 없는 서체, 심플하고 깔끔한 서체.

    

  • 모노스페이스(monospace) - 글자들의 너비가 동일한 서체, 코딩 작업 등에 주로 사용.

    

  • 커시브(cursive) - 필기체.

    

  • 판타지(fantasy) - 장식이 많은 서체, 제목 같은 일부 영역에 유용.

    

웹 안전 서채

• 대부분 사람이 있을 만한 서채
• 검색하여 찾자…

font-size

• 글씨의 크기를 나타내는 속성.
• px를 많이 사용하며, 가변적인 스타일을 위해 em, %등을 사용하기도 함

body{
    font-size : 14px;
}
h1{
    font-size : 2em; 
    /* 
    부모 요소(body)의 글씨크기 14px,
    14 * 2 = 28 이기 때문에
    h1의 글씨크기는 28px가 됩니다.
    */
}

font-style

• 글씨의 스타일을 주는 속성
• 보통 이탤릭 형식으로 표현할 때 사용

p {
    font-style: italic;
}

• 가능 속성 값

• • normal

  • • 기본적인 형태로 보여줍니다.

  • italic

  • • 이탤릭체로 보여줍니다.

  • oblique

  • • 기울임꼴로 보여줍니다.

  • inherit

  • • 상위의 요소의 font-style을 물려받습니다.

font-weight

• 글씨의 굵기를 조절하는 속성.
• ‘bold’와 같은 이름으로 넣을 수도 있고, 100부터 900까지의 백단위 숫자로도 입력 가능

p {
    font-weight: bold;
    /* 또는 */
    font-weight: 700;
}

• 가능 속성 값

• • normal 또는 400

  • • 기본적인 굵기 입니다.

  • lighter 또는 400 이하

  • • 기본적인 굵기보다 더 얇은 굵기를 표현합니다.

  • bold 또는 700

  • • 굵은 글씨를 표현합니다.

  • bolder 또는 700 이상

  • • bold 보다도 더 굵은 글씨로 표현합니다.

  • inherit

  • • 상위 요소의 값을 상속 받습니다.

font-variant

• 대소문자에 대한 스타일

• • 영어권에서 사용하는 속성

p {
    font-variant : small-caps;
}

• 가능 속성 값

• • normal

  • • 기본적인 형태로 표현합니다.

  • small-caps

  • • 소문자를 작은 대문자의 형태로 보여줍니다.

  • inherit

  • • 상위 요소의 값을 상속 받습니다.

line-height

• 줄 간격을 조절하는 속성
• px, % 등의 단위 사용 가능
• 단위 없이 1.5같은 숫자만 입력할 경우 em 과 동일하게 인식

div{
    line-height: 1.6;
}

font

• 앞의 ‘font-‘로 시작하는 속성들을 ‘font’로 줄여서 선언할 수 있음

• • (line-height도 포함)

p {
    font-famliy : arial, helvetica, sans-serif;
    font-style : italic;
    font-size : 12px;
    line-height : 1.6;
    font-weight : bold;
    /* 위의 속성들을 아래와 같이 선언할 수 있습니다. */

    font: italic bold 12px/1.6 arial, helvetica, sans-serif;
}

• 다만 속성의 순서를 지켜줘야 함

  font : font-style font-variant font-weight font-size/line-height font-family
  

  • 없는 속성은 기본값
  • 마지막에 font-family는 꼭 넣어야 함