728x90
%
.item 에 width 50% 부여
.item-parent 여기서도 50% 부여.
여기선 .item의 절반 크기를 갖게된다.
percent-wrap 하고 item-parent 에 붉은 border 값을 넣음.
결론은 부모의 넓이 기준으로 적용된다고 알고 있으면 될듯.
em & rem
em
상위요소인 item-wrap 의 폰트 사이즈 확인
= 24px
item-em 의 값 20em
20em = 480px
1em = 24px
item-em보다 상위요소인 item-parent 의 font-size = 16px 로 지정했을 경우,
20em 은 1em 이 16px 으로 바뀌므로
16*20 을 해줘야한다
상위에 있는 요소의 폰트 사이즈에 대한
몇 배를 할 건지 정할 때 사용
rem
본인의 상위개념의 폰트 사이즈가 몇 이던 상관없이
제일 상위인 html의 속성에 대한 값을 갖고오게 됨.
html 에다가 font-size 적용
8px 을 주려면
0.5rem 적용하면 됨.
1rem = 16px 이니까.
몇 픽셀이 적용됐는 지는
computed 로 들어가서 확인 가능.
vw & vh
뷰포트 - 우리가 보고있는 브라우저 화면을 의미.
뷰포트의 넓이와 높이 조정.
꼭 width 에 쓰라는 법 없음.
padding, margin, font-size에 많이 사용 가능.
728x90