- CSS Units
https://www.youtube.com/watch?v=7Z3t1OWOpHo
위 링크를 통해 공부하였음.
CSS, 즉 브라우저에서는 absolute length units으로 px(pixel)을 사용함. 픽셀은 모니터 위에서 화면을 나타낼 수 있는 가장 작은 단위임.
단, 픽셀을 쓰면 컨테이너가 변경되어도 폰트 사이즈가 그대로 유지됨. 즉 반응형으로 적용이 안 됨.
-> %를 이용하면 컨텐츠가 유동적으로 변함.
유동적인 Unit엔 위에 것들이 있는데, 그 중 em, rem, vw, vh를 가장 자주 사용함.
em : 폰트 사이즈를 나타내는 단위
부모의 폰트사이즈를 곱한 값으로 계산함. 지정된 폰트가 16px라면,
1em = 16px
8em = 128px 이다.
*기본적으로 브라우저에서 html에 할당되는 폰트 사이즈는 16px임.
.parent {
font-size: 8em;
}.child {
font-size: 0.5em;
}
Parent, child가 있을 경우에 Parent가 8em =128px 인 경우, Child의 폰트 사이즈를 0.5em이라 지정하면 0.5em = 64px가 됨. 즉, 부모 폰트 사이즈에서 상대적으로 사이즈가 계산이 되는 것임.
rem : root에 지정된 폰트 사이즈에 따라서 크기가 결정됨
.parent {
font-size: 8rem;
}.child {
font-size: 0.5rem;
}em때와 같은 코드에서 em을 rem으로 바꾸면 child의 폰트 사이즈는 (16px) X (0.5) = 8px가 됨.
vw : viewport width의 약자로 너비에 관련한 속성을 정해줌.
100vw -> viewport width(너비)에 있는 100%를 쓰겠다.
50vw -> viewport width에서 50%만 쓰겠다.
vh : viewport height의 약자로 높이에 관한 속성을 정해줌.
vmin : 브라우저의 너비와 높이 중에 작은 값을 적용
위 사진에선 높이가 너비보다 작기 때문에 50vmin은 더 작은 값인 높이의 50%만큼을 표시해줌.
vmax : 브라우저의 너비와 높이 중에 큰 값을 적용
반대로 vmax는 더 큰 값을 적용하기 때문에 너비의 50%만큼을 나타내 주는 것임.
% : 부모요소의 상대적인 크기가 계산됨. em 대신에 %를 쓰면 같은 효과를 나타낼 수 있음.
.parent {
font-size: 800%;
}.child {
font-size: 50%;
}위 코드에서 다음과 같은 결과를 나타냄 (위에서 언급한 em과 동일하게)
