안녕하세요, 오늘은 CSS에서 자주 사용되는 단위인 px, em, rem에 대해 알아보겠습니다. 이 세 가지 단위는 웹 디자인에서 중요한 역할을 하는데, 각각 어떤 특징을 가지고 있고 언제 사용하는지에 대해 이해하면 더욱 효과적인 웹 디자인을 할 수 있습니다.
px
px는 화면에 표시되는 가장 작은 단위로, 대부분의 디스플레이에서 1px는 화면의 한 점을 차지합니다. px 단위는 고정된 크기를 가지므로, 다양한 디스플레이 크기나 해상도에서 동일하게 보여집니다. 그렇기 때문에 px는 레이아웃의 정확한 제어가 필요한 경우에 유용하게 사용됩니다.
em
em은 상대적인 단위로, 현재 요소의 부모 요소의 글꼴 크기에 상대적입니다. 예를 들어, 부모 요소의 글꼴 크기가 16px이면, 자식 요소의 1em은 16px에 해당합니다. 이런 특성 때문에 em은 반응형 디자인에서 유용하게 사용됩니다. 부모 요소의 크기에 따라 자동으로 크기를 조절할 수 있기 때문입니다.
rem
rem은 'root em'의 줄임말로, HTML root 요소의 글꼴 크기에 상대적인 단위입니다. 이 단위는 em과 비슷하지만, rem은 상속의 영향을 받지 않으므로 더 예측 가능한 결과를 얻을 수 있습니다. 따라서, 전체 웹사이트에 일관된 스타일을 적용하고자 할 때 rem 단위가 유용합니다.
실습
결론
px, em, rem은 각각 고정적인 크기 지정, 상속에 따른 상대적 크기 지정, root 요소에 대한 상대적 크기 지정이 필요할 때 사용됩니다. 각각의 특성을 이해하고 적절히 활용하면 효과적인 웹 페이지 디자인이 가능합니다.
