찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Unit

CSS has several different units for expressing a length

A whitespace can’t appear between the number and the unit

However, if the value is 0, the unit can be omitted

Absolute length

Are fixed and a length expressed in any of these will appear as exactly that size

Are not recommended for use on screen, because screen sizes vary so much

However, they can be used if the output medium is known, such as for print layout

| Unit | Description | |:—–|:———–:| | cm | centimeters | | mm | millimeters | | in | inches | | px | pixels | | pt | points | | pc | picas |

• pixels Are relative to the viewing device, for low-dpi devices, 1px is one device pixel of the display

Relative length

Specify a length relative to another length property

Scales better between different rendering mediums

| Unit | Description | |:—-:|:———————————————————–| | em | Relative to the font-size of the element | | ex | Relative to the x-height of the current font (rarely used) | | ch | Ralative to width of the 0 | | rem | Relative to font-size of the root element | | vw | Relative to 1% of the width of the viewport | | vh | Relative to 1% of the height of the viewport | | vmin | Relative to 1% of viewport’s smaller dimension | | vmax | Relative to 1% of viewport’s larger dimension | | % | Relative to the parent element |

• 2em means 2 times the size of the current font

Specificity

If there are two or more conflicting CSS rules that poing to the same element,

The browser follows some rules to determine which one is most specific and therefore wins out

Every selector has its place in the specificity hierarchy

Inline styles

An inline style is attached directly to the element to be styled

IDs

An ID is a unique identifier for the page elements

Classes, attributes and pseudo-classes

Elements and pseudo-elements

Calculate

Add 1000 for style attribute

Add 100 for each ID

Add 10 for each attribute, class or pseudo-class

Add 1 for each element name or pseudo-element

Greater level of specificity will be applied

Specificity Rules

Equal specificity : the latest rule counts

Id selectors have a higher specificity than attribute selectors

Contextual selectors are more specific than a single element selector

A class selector beats any number of element selectors

The universal selector and inherited values have a specificity of 0

!important

The !important rule in CSS is used to add more importance to a property / value than normal

It will override All previous styling rules for that specific property on that element