CSS_단위

단위

절대 단위

px = pixel = 화소

• 화면을 구성하는 가장 기본이 되는 단위

px은 웹에서 가장 많이 사용되는 절대 단위이며 흔히 화소라 불립니다.
디지털 화면은 수많은 작은 네모들로 구성이 되어있으며, 이 네모 한 칸이 1px입니다.

pt(포인트) = 1/72 inch(인치)

• 인쇄를 위한 단위

pt는 인쇄를 위한 단위이기때문에 웹에서는 잘 사용하지 않습니다.
보통 워드 프로세서 등 문서 편집 프로그램에서 pt를 많이 사용합니다.

상대 단위

%

부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용합니다.

em

스타일 지정 요소의 font-size 속성값에 비례하여 값을 결정합니다.

/* font-size : 16px 인 경우 */

1em => 16 * 1 = 16px
0.8em => 16 * 0.8 = 12.8px
3em => 16 * 3 = 48px

rem

최상위 html 요소의 font-size속성 값에 비례하여 값을 결정합니다.

/* font-size : 16px 인 경우 */

1rem => 16 * 1 = 16px
0.8rem => 16 * 0.8 = 12.8px
3rem => 16 * 3 = 48px

vw / vh

vw 와 vh는 요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정

❓viewport란❓

/* viewport가 1200(px)x920(px)인 경우 */

10vw => 1200x0.1 = 120px
50vh => 920x0.5 = 460px
100px => 1200x1 = 1200px