12 . CSS / 단위

01. px , % 

    %  ( 부모요소의 영향을 받는다)

container 클래스가 너비가 600px -> parent클래스는 container클래스의 자식 600px가 상속을 받고 parent클래스에서 너비를 50%로 하면 600px의 50%는 절반(300px가 된다.

02. em, rem

 

  em ( 자기 자신의 폰트사이즈에 영향을 받는다.)

container클래스의 폰트사이즈가 10px 거기에 너비를 60em으로 설정하였기 때문에 60배를 의미 10px*60 = 600px 폰트사이즈는 상속이 되기 때문에 자식들도 10px가 적동이되어 기능이 처리가 된다.

 

em = 중간 중간 계속 단위가 상속이 되다 보니 중간에 따로 건드리기가 어려움 -> rem

rem = html(root)에 지정된 폰트사이즈 만 받음( 루트에 폰트사이즈만으로만 설정하겠다는 의미  상송안받음)  

 

 

03. vw, vh

   vw ( 뷰포트의 가로사이즈, 100단위 ) 뷰포트 : 화면전체 

   vh ( 뷰포트의 세로사이즈, 100단위 )

   늘어나고 줄어들면 너비가 변경됨

50vw 절반 

 

 

 

 

04. vmin, vmax

 

     vmin ( 뷰포트의 최소 너비 ) 짧은 쪽의 너비를 백분율로 계산하여 설정

     vmax ( 뷰포트의 최대 너비 ) 긴 쪽의 너비를 백분율로 계산하여 설정