[css]크기(size)

width, height, font-size, padding, margin 등 

css 크기(size)에는 

 

절대적 크기 단위

픽셀(px)

- 절대적인 단위.

- 화면을 표시하는 기준이 되는 크기

 

ex) 10px = 정사각형 10개의 길이 

 

---

상대적인 크기 단위

퍼센트(%)

- 부모태그에 대해서 상대적인 크기

- 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면됨

 

ex) 부모가 200px X 100px 일때 자식이 50% X 50% 면

자식은 100px X 50px

 

em, rem

-글자 크기를 기준으로 상대적인 크기를 정함

 

1. em

- css에서 1em = 부모태그의 font-size임

 

ex) 부모가 16px 이고 자식이 2em이면 16x2 = 32px임

 

2. rem

- css에서 1rem = 최상위 태그(html)의 font-size임

 

ex) html이 16px 이고 하위 요소가 2rem이면 32px임

*html에 size 지정해줘야함(html보다 아래인 body 사이즈가 있어도 html값으로 곱)

html { font-size : 16px}