px
px(픽셀)은 웹디자인에서 많이 사용하는 절대 길이 단위 중 하나 입니다.
px은 고정된 크기를 가지며, 사용자의 화면 설정에 관계없이 일관된 크기로 표시됩니다.
대부분의 브라우저 루트 글꼴 크기는 16px입니다. 또한 브라우저의 루트 글꼴 크기는 사용자가 변경할 수 있습니다.
이때, font-size를 px로 고정하게 되면 사용자가 설정한 값을 덮어쓰게 되어 사용자의 설정 값이 무시되게 됩니다.
em, rem
em과 rem은 반응형 웹디자인에서 많이 사용되는 상대 길이 단위 중 하나 입니다.
em은 부모 요소의 글꼴 크기에 대한 상대적 비율로 크기를 지정합니다.
중첩된 요소에서 부모 요소의 글꼴 크기에 대한 계산을 반복하는 데 사용될 수 있어 유연한 레이아웃을 만들 때 사용됩니다.
rem은 root em을 의미하며, 문서 최상위 요소인 <html> 요소의 글꼴 크기에 대한 상대적 비율로 크기를 지정합니다.
중첩된 요소에서 부모 요소의 글꼴 크기를 고려하지 않고 문서의 최상위 요소의 크기를 기준으로 합니다.
주로 레이아웃의 기본적인 크기를 지정하는 데 사용됩니다.
예시
크롬 브라우저의 루트 글꼴 맞춤설정을 변경하여 px과 상대 길이 단위의 rem을 사용하였을 때의 차이를 확인할 수 있습니다.
글꼴 맞춤설정 하러 가기: chrome://settings/fonts
chrome 글꼴 맞춤설정
기본 설정인 글꼴 크기 16사이즈를 24로 변경했습니다.
px
chrome 글꼴 맞춤설정을 통해 브라우저 루트 글꼴 크기를 24로 변경하였음에도 `font-size: 16px`을 통해 h1 글꼴 크기가 16px로 고정된 것을 확인할 수 있습니다.
em
body의 `font-size: 32px`, h1의 `font-size: 1em`을 통해 브라우저 루트 글꼴 크기를 24로 변경했음에도 body에 지정한 32px이 적용된 것을 확인할 수 있습니다.
rem
`font-size: 1rem`을 통해 h1 글꼴 크기가 24px로 적용된 것을 확인할 수 있습니다.
요약
요약하자면, px은 절대적이고 고정된 크기를 가지며, em은 상대적이고 부모 요소의 크기에 의존하며, rem은 상대적이고 최상위 요소의 크기에 의존합니다. 이를 통해 적절한 반응형 웹 디자인을 구현하실 수 있습니다.
vscode extensions
아래 px to rem 익스텐션을 사용하여 쉽게 px을 rem으로 변환할 수 있습니다.
px to rem - Visual Studio Marketplace
Extension for Visual Studio Code - Converts px to rem, and vice versa
marketplace.visualstudio.com
🔍 참고
https://yozm.wishket.com/magazine/detail/1410/
웹 디자이너가 PX대신 REM을 사용해야 하는 이유 | 요즘IT
스케치(Sketch)와 피그마(Figma)[1]에서 큰 고민 없이 픽셀(Pixel, 줄여서 px)을 사용하고 있나요? 저 역시 한때 그랬습니다. 제가 팀에 처음 합류했을 때 모두가 당연한 듯 픽셀을 사용하고 있었습니다.
yozm.wishket.com
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units
CSS 값과 단위 - Web 개발 학습하기 | MDN
CSS에 사용된 모든 속성에는 해당 속성에 허용되는 값이 있으며, MDN의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값과 사용 단위를
developer.mozilla.org
'CSS' 카테고리의 다른 글
| [CSS] @keyframes (0) | 2024.02.16 |
|---|---|
| [CSS] animation (0) | 2024.02.16 |