본문 바로가기
> 디자인베이스/웹 코딩 입문 강좌

#15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh

by 자몽주스 2024. 4. 19.
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