✔️ 오늘의 POINT
🦁 주제 선정 이유
비록 오늘 다루었던 내용은 아니지만,
줄곧 헷갈렸던 단위 개념을 확실히 정리하고자 기록을 남긴다.
1. 고정크기 단위
(1) px
- 기본
px크기 :16px
2. em과 rem
🔍 공통점
- 가변크기 단위
- font-size 속성 값에 비례
차이점- 기준값이 다름
(1) em
- 부모의 font-size 속성값을 기준으로 함
- 만약 부모의 px값이 20px일 때, 자식요소에 0.1em을 지정해주면
자식의 크기는20px*0.5em=10px이 된다
(2) rem
- 최상위 요소의 font-size 속성값을 기준으로 함
- 만약 부모의 px값이 20px일지라도, 부모보다 더 높은 요소가 15px이라면 15px을 기준으로 한다.
3. vh와 vw
(1) vh (viewport height)
(2) vw (viewport width)
- 현재의 스크린에 맞춰 상대적 크기를 반환
- 전체 화면의 기준 : 100vh, 100vw
- ( ex ) 현재 스크린의 크기: height=500px, height=200px 일때
div { height: 50vh; width: 10vw; }위와 같이 설정하면 height=250px, width=20px이 된다
결국, vh와 vw는 %와 달리 현재 스크린의 크기를 기준으로 한다
✔️ 느낀점
🙄 언제 %를 사용하고 언제 vh,vw를 사용하는지 아직 감이 잘 잡히지 않는다. px과 em, rem 도 마찬가지다. 여러 실습을 통해 더 경험해봐야 와닿을 것 같다.
🦁 벌써 프론트엔드스쿨 4주차가 되었다. 그동안 정말 많은 내용을 배웠지만 몇%를 내것으로 소화하였지 돌이켜보면, 내 기대 이하라는 생각이 든다. 수업시간에 더 집중하고, 무엇보다도 학습한 내용을 흘려보내지 말고 내 것으로 만드는 시간을 충분히 가져야겠다!💪 조급해하고 불안해하는 것도 에너지 낭비라는 호준 강사님의 말씀대로 느리더라도 내 페이스를 유지하자👏❤️
FE Developer