Size( pixel / % / em / rem / vw / vh / vmax / vmin )

pixel과 %

.parent {
    width: 100px;
}

.child { 
	/* 50px */
    width: 50%;
}

부모요소가 100px  

자식요소의 50% > 50px

%는 부모요소를 기준으로 한 비율 

 

 

em

.parent {
    font-size: 10px;
}

.child { 
  /* 20px */
  font-size: 2em;
}

 

부모요소의 font-size를 기준으로 하여 선택요소의 font-size를 결정

(중간 단계의 font-size에 영향을 받아 관리하기가 어려울 수 있음)

 

 

rem

html {
    font-size: 100px;
}

/* 나머지 Text들은 기본 값인 16px로 */
body {
    font-size: 16px;
}

.parent {
    font-size: 10px;
}

.independent {
    /* 200px */
    font-size: 2rem;
}

최상위 요소인 html에 설정한 font-size를 기준으로 선택요소의 font-size를 결정

      (부모요소에 독립적)

 

 

vw와 vh(viewport width/height), vmax와 vmin

<div class="container"></div>

.container {
    
    width: 50vw;
    height: 50vh;
    background : red;
}

vw/vh : 100을 기준으로 전체화면의 크기(viewport)에 얼마만큼인지를 지정 가능

vmax/vmin : viewport의 더 긴쪽(vmax)/더 짦은 쪽(vmin)을 기준(100)으로 크기를 지정

(max/min-width/heigh도 있음)