CSS픽셀 계산기
rem과 em은 둘 다 상대적인 단위로, 폰트 크기를 설정할 때 사용되지만 그들 간에 중요한 차이가 있습. 먼저 rem(루트 em): rem은 HTML의 root 요소(html)의 font-size를 기준으로 한다. 따라서 rem은 항상 페이지의 루트(HTML) 요소의 font-size를 기준으로 한다. 이는 상속의 영향을 받지 않는다. em(상속 em): em은 부모 요소의 font-size를 기준으로 한다. 즉, 부모 요소의 font-size가 변경되면, 그에 따라 em도 변경된다. 이는 상속에 영향을 받는다.
따라서, rem은 상속의 영향을 받지 않고 항상 루트 요소의 font-size를 기준으로 하지만, em은 부모 요소의 font-size를 기준으로 하며 상속의 영향을 받는다. 추세적으로 rem이 일반적으로 주로 사용되고 있다.
포인트(point)와 픽셀(pixel)의 구분
CSS에서 포인트(Point)와 픽셀(Pixel)은 둘 다 길이를 나타내는 단위이다. 하지만 이 둘은 디자인 제작에있어 그 사용목적에 따라 큰 차이가 존재한다.
- 포인트(Point): 포인트는 주로 인쇄물에서 사용되는 길이 단위이다. 1 포인트는 약 1/72인치(0.0139 인치)를 나타내며. 주로 인쇄 디자인이나 PDF 등의 문서에서 사용한다.
- 픽셀(Pixel): 픽셀은 현재 사용중인 화면에서 사용되는 가장 작은 단위이다. 화면 해상도에 따라 픽셀의 크기가 다를 수 있지만, 일반적으로는 1px는 화면에서 한 개의 픽셀을 나타낸다. 웹 디자인에서 주로 사용되며, 모니터나 모바일 디바이스에서 화면 요소의 크기를 정할 때 사용된다.
결과적으로, 포인트는 인쇄물등 규격에 맞춰 작업해야하는 상황에서 주로 사용되고, 픽셀은 홈페이지등 화면에서 주로 사용되는 기준이다.
css에서 픽셀(px)과 rem, em 의 차이와 그 사용법
픽셀은 화면의 물리적인 점을 나타내는 단위입니다.
픽셀(px)
- 픽셀(Pixel): 픽셀은 현재 사용중인 화면에서 사용되는 가장 작은 단위이다. 화면 해상도에 따라 픽셀의 크기가 다를 수 있지만, 일반적으로는 1px는 화면에서 한 개의 픽셀을 나타낸다. 웹 디자인에서 주로 사용되며, 모니터나 모바일 디바이스에서 화면 요소의 크기를 정할 때 사용된다.
- 고정된 크기를 나타낸다. 브라우저에서 픽셀 값은 사용자가 확대 또는 축소할 때에도 변하지 않는다.
- 주로 특정 레이아웃의 크기를 설정하거나 세부적인 고정적 디자인 요소를 조정할 때 사용된다.
- 사용 예시: width: 200px;, font-size: 14px;
rem(root em)
- rem은 "루트 em"의 줄임말로, HTML의 root 요소인 html의 font-size를 기준으로 한다. Html root 폰트크기 설정값에 상대적인 크기를 나타낸다. 따라서 사용자가 확대 또는 축소할 때에도 상대적으로 크기가 변한다.
- 주로 전체 레이아웃이나 글꼴 크기를 설정할 때 사용된다.
- 사용 예시: font-size: 1.2rem;, margin: 0 1rem;
em(Emphasized)
- em은 기본적으론 rem과 모두 동일한 성격을 가진다. 하지만 그 기준이 되는 사이즈가 Html의 root 가 아닌 설정되어 있는 부모 요소의 크기를 기준으로 계산을 한다는 점이 차이점이다.
- 사용 예시: width: 200px;, font-size: 14px;
최근에는 반응형 디자인을 고려하여 상대적인 크기를 고려해야할 요인이 많기에 주로 rem을 사용하며, 특정 요소의 크기를 정확하게 지정해야 할 때에는 픽셀(px)을 사용하는게 일반적이다. 페이지의 전반적인 스타일링이나 반응형 디자인을 고려할 때는 rem이나 em을 사용하는 습관을 들이는 것이 좋다.