font-size Property

Home > Document > CSS > Font > font-size

페이지 목차

font-size Property

font-size Property는 font 크기를 다루는 Property 입니다. 알다시피 사용법은 매우 간단합니다. 예를 들어 { font-size: 12} 와 같이 단위를 생략하면 px (Pixel) 단위로 간주 합니다. XML을 대비하여 단위 붙여주는거... 이거 잊지 맙시다.

  [표 보는 방법]
font-size Property
Value <absolute-size> | <relative-size> | <length> | <percentage> | Inherit
Initial Medium (12pt)
Applies to all elements
Inherited Yes, 계산된 값이 상속됨
Percentages refer to parent element's font size (상위 element의 font size에 의해 결정됨)
Media Visual
HTML Syntax { font-size: sSize }
Scripting object.style.fontSize [ = sSize ]



Value

<absolute-size>

<absolute-size>는 문자 그대로 절대 크기라는 뜻인데 다음과 같이 7가지가 있습니다.

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

xx-small ~ xx-large 까지 Font element 의 size 속성값인 1 ~ 7 이 되겠습니다. 한 단계 커지거나 작아질 때 마다 1.2 배율(Scaling factor)이 적용 되는데 이거 계산하기 골치 아파서 못 쓸 것 같은데요...^^


<relative-size>

상대크기를 말 합니다. 값으로는 아래의 2 가지가 있습니다.

[ larger | smaller ]

larger 를 지정하면 역시 Font element의 size 속성값보다 1이 커진 크기이고, smaller는 1이 작아진 크기 입니다.


<percentage>

상위나 상위가 없을 경우 기본 크기(12pt)를 기준으로 한 100분율 상대 크기 입니다.


<length>

상대 길이 단위(Relative length units)
em
The height of the element's font. (지정되거나 상속 받은 font 크기의 상대 크기)
예) {font:12px/1.5em;}이면 line-height = 12px x 1.5 = 18px
ex The height of the letter "x". (소문자 "x"의 높이에 대한 상태 크기)
px
Pixels. (화면 해상도에 대한 상대 크기)
예) 해상도(resolution) 800 x 600 에서 1px 은 화면을 수평으로 800등분, 수직으로 600등분으로 나눈 화소(pixel) 1개의 단위.
% Percentage. (자기가 속해 있는 상위 Tag의 크기 또는 상속받은 값에 대한 100분율 상대 단위)


절대 길이 단위(Absolute length units)
in Inches (1 inch = 2.54 centimeters).
cm Centimeters.
mm Millimeters.
pt Points (1 point = 1/72 inches : 1인치를 72등분한 단위).
pc Picas (1 pica = 12 points).

어디서 많이 보던 테이블이죠? HTML 메뉴의 '색상, 길이단위'에 나왔던 표인데 주로 많이 사용하는 단위가 되겠습니다. font-size에 대한 상세 설명은 뒤에 나오는 line-height Property 부분에서 하기로 하고 참고 삼아 HTML element 중에서 글씨와 관련있는 element 들의 상대크기를 알려 드리겠습니다. 아래의 표는 기본 글씨 크기로 한 상대 크기입니다.

글씨와 관련있는 element 들의 상대크기
Element 상대 크기 Element 상대 크기
H1 { font-size: 2em} H2 { font-size: 1.5em}
H3 { font-size: 1.17em} H4 { font-size: 1em}
H5 { font-size: 0.83em} H6 { font-size: 0.67em}
BIG { font-size: 1.17em} SMALL { font-size: 0.83em}
SUB { font-size: 0.83em} SUP { font-size: 0.83em}



Property name 이 두 단어가 넘는 Property를 Scripting 할 때

이런 경우 알아 두어야 될 것이 있는데, 예를 들어 font-size, list-style-type 와 같이 2 단어나 3 단어일 경우 (-) 뒤의 단어 첫 번재 알파벳을 대문자로 합니다. 즉, 다음과 같이

입력 예
onMouseOver="this.style.fontSize='12px';"

onMouseOver="this.style.listStyleType='circle';"

이와 같이 해야 되는 이유는 CSS Scripting이 JavaScript와 연계되기 때문에 (-) 부호를 사용 할 수 없는 것 입니다. (-) 부호는 연산 부호이며 자바의 변수에도 (-)를 사용할 수 없습니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색