[CSS] 단위

단위의 종류

1. px(픽셀) : 화면에 출력되는 하나의 점
2. %(상대적 백분율)
3. em : 요소의 글꼴 크기
4. rem : 루트 요소(html)의 글꼴 크기
5. vw / wh : viewport 가로/세로 너비의 백분율 ex) 1vw : 보이는 화면의 100분의 1
   (viewport : 브라우저에 보이는 화면)

See the Pen 단위 by J-Plum (@J-Plum) on CodePen.

1. 첫번째 parent와 child들은 parent가 160px이며, child1은 width가 50%

즉 부모의 크기의 50%인 80px이 할당되어 있습니다.

2. child2는 width가 10em인데 기본적으로 font-size를 지정하지않으면 16px입니다. 그러므로 10em은 160px이 됩니다

 

3. parent2 와 child3의 경우는 font-size를 변경후 width : 10em을 한 결과입니다.

4. child4의 경우 rem을 사용했습니다. rem은 루트요소의 글꼴 크기입니다.
    따로 설정하지 않았기에 기본 크기인 16px입니다.

 

5. child5의 경우 vw를 사용했습니다 viewport width 의 50%
    즉, 브라우저에 보이는 화면의 50%를 의미합니다.