응용) CSS (반응형 웹 만들기, 가변성, 단위em,rem,vw,vh)

• - 반응형 웹이란 : 유저의 웹 브라우저 사이즈에 따라 크기가 유동적으로 맞춰지는 것.
• - 키포인트 : 가변성 !!
• 단위  ( px, em, rem, vw, vh , % )  에 대해 알아보자.

---

- 단위

px : 절대 길이 단위 (가변성x)

 

>>단순히 부모 크기 기준으로 결정. (가변성o)

패딩,마진 값에 em,rem적으면 본인 글꼴크기 기준으로 설정됨. 

em : 부모 요소의 글꼴 크기

rem :  루트 요소의 글꼴 크기  

 

 

>>가변단위 : 뷰포트(기준의 100분의 1 크기) 기준으로 크기를 결정. (가변성o) . 유저가 보는 브라우저 기준

vw : 브라우저 가로 기준 

vh :  브라우저 세로 기준

vmin : 너비를 기준으로 함. 너비가 높이보다 더 좁아지면 높이 기준으로 함.

vmax : 너비와 높이 중에 더 큰 것 을 기준으로함.

 

>>가변 레이아웃에 부모의 %비율로 단위설정함

% :  부모요소와의 상대적 크기 (가변성ㅇ) 

 

5번 동영상ㄲ지봄 - 유노코딩