[CSS] CSS Values and Units Module Level 3 수치 단위

CSS Values and Units Module Level 3

http://www.w3.org/TR/2013/CR-css3-values-20130730/#viewport-relative-lengths

2.5. Property value examples

Below are some examples of properties with their corresponding value definition fields

Property	Value definition field	Example value
‘orphans’	<integer>	‘3’
‘text-align’	left | right | center | justify	‘center’
‘padding-top’	<length> | <percentage>	‘5%’
‘outline-color’	<color> | invert	‘#fefefe’
‘text-decoration’	none | underline || overline || line-through || blink	‘overline underline’
‘font-family’	[ <family-name> | <generic-family> ]#	‘"Gill Sans", Futura, sans-serif’
‘border-width’	[ <length> | thick | medium | thin ]{1,4}	‘2px medium 4px’
‘text-shadow’	[ inset? && [ <length>{2,4} && <color>? ] ]# | none	‘3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset’
‘voice-pitch’	<frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]	‘-2st x-low’

3.1. Pre-defined Keywords

In the value definition fields, keywords with a pre-defined meaning appear literally. Keywords are CSS identifiers and are interpreted case-insensitively within the ASCII range (i.e., [a-z] and [A-Z] are equivalent).

For example, here is the value definition for the ‘border-collapse’ property:

Value: collapse | separate

And here is an example of its use:

table { border-collapse: separate }

3.1.1. CSS-wide keywords: ‘initial’ and ‘inherit’

As defined above, all properties accept the CSS-wide keywords, which represent value computations common to all CSS properties.

The ‘inherit’ keyword is defined in [CSS21].

The ‘initial’ keyword represents the specified value that is designated as the property's initial value. [CSS3CASCADE]

Other CSS specifications can define additional CSS-wide keywords. For example, [CSS3CASCADE] adds an ‘unset’ keyword to this set.

5.1. Relative lengths

Relative length units specify a length relative to another length. Style sheets that use relative units can more easily scale from one output environment to another.

The relative units are:

Informative Summary of Relative Units

unit	relative to
‘em’	font size of the element
‘ex’	x-height of the element's font
‘ch’	width of the "0" (ZERO, U+0030) glyph in the element's font
‘rem’	font size of the root element
‘vw’	1% of viewport's width
‘vh’	1% viewport's height
‘vmin’	1% of viewport's smaller dimension
‘vmax’	1% of viewport's larger dimension

5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:

unit	definition
‘cm’	centimeters
‘mm’	millimeters
‘in’	inches; 1in is equal to 2.54cm
‘px’	pixels; 1px is equal to 1/96th of 1in
‘pt’	points; 1pt is equal to 1/72nd of 1in
‘pc’	picas; 1pc is equal to 12pt

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */