YoonStudyNote

CSS Viewport를 기준으로 한 단위가 4개 있습니다.(vh, vw, vmin, vmax) Viewport Height (vh) : viewport의 높이에 근거한다. 1vh는 viewport의 높이의 1%와 같다 Viewport Width (vw) : viewport의 폭에 근거한다. 1vw는 viewport의 넓이의 1%와 같다 Viewport Minimum (vmin) : viewport의 (높이와 너비 중) 작은 쪽의 치수에 기초로한다. viewport의 높이가 폭보다 작은 경우, 1vmin는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 작은 경우, 1vmin는 viewport의 넓이의 1%와 같다 Viewport Maximum (vmax) : vie..

%는 부모 요소 크기의 영향을 받아서 크기를 결정하게 된다면, 1. em은 자신의 폰트 사이즈의 영향을 받는다. 그래서 보통 em은 조상요소 절대적인요소에 px단위로 크기를 지정하고, 그 밑에 하위 요소에는 em으로 설정을 많이한다. 그리고 상속의 개념이 있어서, 자식요소는 부모요소의 크기를 기반으로 단위를 측정한다. Container Parent Child1 Child2 body *{ border : 2px solid; } .container{ width : 60em; font-size : 15px; } .parent{ width : 30em; font-size : 2em; } .child{ width : 50%; font-size : 2em; } 여기서 알 수 있듯이, container클래스는 fon..

Container Parent Child1 Child2 body *{ border : 2px solid; } .container{ width : 600px; } .parent{ width : 300px; } .child{ width : 150px; } 다음과 같이 작성을 하면, 밑에와 같은 결과가 나온다. 하지만 %로도 똑같이 만들 수 있다. %단위는 부모의 영향을 받기 때문에, 부모요소를 제외하고 자식요소를 수정하면, 부모태그 크기에 따라서 자식태그가 크기를 알아서 조절해준다. 위의 소스코드를 보면 알 수 있는것은, 자식태그들은 부모태그 크기의 절반이다. 이로서 50%로 바꿔 써 주어도 결과값은 똑같이 나온다. body *{ border : 2px solid; } .container{ width : 6..