[패캠 네카라쿠배 2기 도전] CSS/ 단위

1. px, %

body *{ 
border: 2px solid;}
.container{ 
width: 600px; 
}
.parent{ 
width:300px;   // 50%(부모 요소인 container의) 
}
.child{ 
width: 150px; // 50%(부모 요소인 parent의)
}

 

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

부모(바로 상위인 요소. 즉 그 이상의 요소의 영향을 받는 건 아니다) 

 

2. em, rem 

em은 자신의 font 크기의 영향을 받는다 

%와 달리 상속하는 요소의 영향을 모두 똑같이 받는다 

 

.container{ 
width: 600px; // 60em (font 크기에 상대적) 

font-size: 10px; // 이 크기를 바꾸면 아래 em으로 정의한 사이즈도 함께 바뀐다 
}
.parent{ 

font-size: 2em// 상속받은 10px의 2배 
width:300px;   // 30em (폰트는 상속된다. 그러므로 부모요소로부터 10px로 정의된다)
}
.child{ 
width: 150px; // 15em

font-size: 2em; // 상속받은 10px의 2배 

}

 

rem: 가장 조상요소의 영향을 받는 것 - 가장 조상요소 [html태그]에 지정된 font-size의 영향만 받는다

html{

font-size: 20px;

} 

body{ 

font-size: 10px;

} 

.parent{ 

font-size: 20em; // 200px

}

.child{ 

font-size: 20rem;  // 400px

} 

 

 

 

3. vw, vh 

viewport (보이는 화면) 

- viewport width

- viewport height

 

CSS

.container{ 
width: 100vw; // 보이는 화면 가로 전체 (그러므로 화면을 줄이면 줄인 화면의 전체가 된다) 

                   // 50vw로 하면 가로의 반
height: 100vh;  // 보이는 화면 세로 전체 

                    // 보이는 화면 세로의 반
background: red; 
}

 

4. vmin, vmax

 

ex.width: 50vmax - 뷰포트의 가로와 세로 중에 더 큰 쪽의 반을 너비로 한다

   height: 50vmin  - 뷰포트의 가로와 세로 중에 더 작은 쪽의 반을 높이로 한다