절대값과 상대값

절대값:고정된 값

-px

 

상대값: 고정되지 않고 유동적으로 바뀌는 값

: %, em, rem, vw, vh, vmin, vmax

 

1. px

px(픽셀)단위는 화소 1개의 크기를 의미.

고정된 단위에 사용

 

2. %

-백분율 단위의 상대단위

ex)14px *200%(2)=28px

 

-해상도에 따른 %크기 구하기

>1920안에 1280이너로 있으면 해상도가 1280인거나 마찬가지로 봄

>만약네모width가 221px이면
221/1280= 0.17265625
0.17265625*100=17.265625

 

3. em

-배수 단위의 상대 단위

-상위요소(상속이나 기본값)에 따라 1em이 지정

-M사이즈랑 같은 사이즈/ equal to M약자
-font-size가 30이면 30em
-상위요소 폰트사이즈를 따라 1em됨 (상위16px=1em)
-요소 사이즈로 잘 사용하진 않음 , 너무 복잡해져서(font-size. padding, margin을 더 많이 사용)

 

3. rem

-root(html) 최상위 요소의 사이즈를 기준으로 잡는다.

-html 지정한 px에 따라 1em결정
-equal to root M의 약자 rem
 

3. vw

-기기의 보이는 화면 width사이즈가 기준 
-모바일 반응형 많이 사용
ex)100vw >전체넓이

 

-vw계산법

ex) height: 10.277vw;

/* 37px을 vw로 변환 >'37px(적용시키려는요소)/360px(기기브라우저화면) *100' */

 

3. vh

-기기의 보이는 화면 height 사이즈가 기준 

-100vh >전체높이

 

3. vmin

-뷰포트에서 작은쪽이 기준 (가로가 작고 세로가 크면 가로기준)

 

3. vmax

-뷰포트에서 큰쪽이 기준(가로가 크고 세로가 작으면 가로 기준)

 

+calc 계산법

특정부분 빼고 나머지에서 %구하기

 width:calc(50% - 4.5px);

>가운데 영역 4.5px씩 고정한거 뺄거니까 calc써서 50%