CSS - 글꼴 스타일 지정

Inline Box 는 Inline Element 에 적용되는 Box Model 로 그림을 참고하면 Box Model 과 어떻게 다른지 이해에 도움이 됩니다. 

글씨체 관련 속성은 다음 표와 같습니다.

속 성	설 명
font-family	특정 글꼴이나 일반적인 글씨체 등을 선언. 글씨체가 없는 시스템을 위해 왼쪽에서 오른쪽으로 중요도 순서대로 글씨체를 하나 이상 지정 가능.
font-style	문자 스타일을 지정. italic, oblique, normal 중 하나
font-size	글자 크기를 지정. 절대크기 : xx-small, x-small, medium, x-large, xx-large 상대크기 : larger, smaller 길이: 글자 크기를 직접 지정.   ex.) in, cm, mm, px, pt, pc 등 단위 길이 백분율: 퍼센트(%)
font-weight	글씨체의 굵기를 지정. nomal: 보통 굵기 (절대적) bold: 굵게 표시 (절대적) bolder: 부모요소보다 조금 더 굵게 표시 (상대적) lighter: 부모요소보다 조금 더 가늘게 표시 100 ~ 900 사이의 100단위 값   100으로 갈수록 가늘게, 900으로 갈수록 굵게 표시함.   700 = bold 와 같음. 기본 값: 400
line-height	행과 행 사이의 간격을 지정. 기본 값 nomal (수치로는 1.2에 해당)
font-variant	모든 영문 소문자를 글자 크기가 작은 대문자로 표시 small-caps: 소문자 글자를 실제 대문자 보다 작은 대문자로 설정 normal: 변경 없음
font	위 속성들을 한꺼번에 묶어 지정 가능하고, 다음 중 하나를 글꼴 스타일로 표시 가능. caption: 캡션에 해당하는 글꼴로 표시 icon: 아이콘에 해당하는 글꼴로 표시 menu: 드롭다운 메뉴에 해당하는 글꼴로 표시 message-box: 대화상자에 해당하는 글꼴로 표시 small-caption: 작은 캡션에 해당하는 글꼴로 표시 status-bar: 상태 표시줄에 해당하는 글꼴로 표시

font-family 속성 : 글꼴 지정

사용할 글꼴을 지정하며, 콤마(,)로 예비 글꼴을 지정합니다.

/* 단일 글꼴 설정 */
font-family: [글꼴]

/* 시스템에 글꼴1이 없을 경우 글꼴2를 */
font-family: [글꼴1, 글꼴2 ...]

p {
  font-family: 굴림체, 궁서, Arial;
}

일반적인 시스템 글꼴은 "굴림, 굴림체, 궁서, 궁서체, 돋움, 돋움체, 바탕, 바탕체, Arial, Arial Black, Arial Narrow, Bookman Old Style, Comic Sans MS, Courier New, Garamon, Geogia, Impact, MingLiU, Minon Web, Morden, Monotype.com, MS Gothic, MS Hei, MS Song, Time New Roman, Trebuchet MS, Verdana" 입니다.

font-size 속성 : 글자 크기 지정

font-size: [크기]

/* 직접 지정 */
p {
  font-size: 10px;
}

/* 절대 크기 지정 */
p {
  font-size: x-large;
}

/* 백분율 */
p {
  font-size: 80%;
}

font-weight 속성 : 글자 굵기 설정

font-weight: bolder;

font-variant 속성 : 영문 소문자를 대문자로 표시

일반적인 글자 크기의 영문 소문자를 모두 작은 글자 크기인 대문자로 변경합니다.

<style>
  .variant {
    font-variant: small-caps;
  }
</style>

<p class="variant">abcdefg</p>
<p>abcdefg</p>

font 속성 : 위 글꼴 속성을 한꺼번에 표시하기

font 속성을 지정하면 <font-style>, <font-variant>, <font-weight>, <font-size/line-height>, <font-family> 속성을 한꺼번에 지정합니다.

아래 예제를 보는 바와 같이 font 속성을 이용하는 게 훨씬 효율적입니다.

<style>
  /* font 속성을 이용하면... */
  .mfont {
    /* font-size 와 line-height 는 n/n 으로 슬래시(/)로 함께 표현. */
    font: italic bolder 12px/24px 궁서;
  }
  /* font 를 개별로 설정하면... */
  .xfont {
    font-style: italic;
    font-variant: nomal;
    font-weight: bolder;
    font-size: 12px;
    line-height: 24px;
    font-family: 궁서;
  }
</style>

<p class="mfont">abcdefg 한글</p>
<p class="xfont">abcdefg 한글</p>
<p>abcdefg 한글</p>

다음은 특별한 키워드를 이용해 font 를 지정할 수 있습니다.

<style>
  .font1 { font: caption; }
  .font2 { font: icon; }
  .font3 { font: menu; }
  .font4 { font: message-box; }
  .font5 { font: small-caption; }
  .font6 { font: status-bar; }
</style>

<p class="font1">abcdefg 한글</p>
<p class="font2">abcdefg 한글</p>
<p class="font3">abcdefg 한글</p>
<p class="font4">abcdefg 한글</p>
<p class="font5">abcdefg 한글</p>
<p class="font6">abcdefg 한글</p>
<p>abcdefg 한글</p>

abcdefg 한글

abcdefg 한글

abcdefg 한글

abcdefg 한글

abcdefg 한글

abcdefg 한글

abcdefg 한글