개요
Mobile에서 px 를 사용 하지 않는 이유는 여러 이유가 있지만 기본적으로 디자이스 간의 사이즈가 각각 다르기 떄문에 큰 사이즈에서 보는 화면과 작은 사이즈에서 보는 화면이 다르기 때문일 것입니다.
px는 고정 사이즈로 디바이스가 커지면 오소의 사이즈는 상대적으로 작아지고 디바이스가 작아지면 요소의 사이즈는 상대적으로 커집니다.
rem또한 그냥 사용한다면 기본적으로는 px와 뭐가 다른데? 라고 할 수도 있지만 최상위 html element의 px에 따라 1rem의 사이즈가 변경되는 점을 이용한 테크닉을 알려 드리려 합니다.
예를 들어 최상위 요소인 html 요소의 폰트 사이즈가 16픽셀이라고 가정해 봅니다.
디바이스 사이즈가 430픽셀(아이폰 프로 맥스 기준)일 떄와 375(아이폰 SE 기준)픽셀일 때를 비교해보면 430일 때 요소가 더 작아보일 수 있습니다.
따라서 거의 대부분의 디바이스에서 디자인을 유지하기 위해서는 유동적으로 사이즈가 변화할 필요가 있고 이를 위해 rem 단위를 채택 하였습니다.
rem과 em의 차이는 기본 사이즈가 최상단(<html> 태그)이냐 요소의 부모사이즈냐의 차이 입니다.
rem을 선택한 이유는 최상위 태그 구문인 <html>태그의 사이즈가 바뀌면 하위 요소의 사이즈도 변경 되기 떄문에 컨트롤이 더 쉬워지기 때문입니다.
디바이스 사이즈별 요소의 사이즈 자동 변환되는 원리
- font-size: 1 픽셀은 width: 1px과 height: 1px등 세가지 모두 동일한 1px사이즈이고 변환 단위가 16px이 기본일 경우 1rem은 16픽셀이 되고 스크립트등을 통해 기본 단위가 8픽셀로 설정이 바뀌면 1rem은 8px가 되는 원리입니다.
- 위의 기본값 : 가장 최상위 html tag인 <html>대그 구문의 font-size 값
- 기본 최대 사이즈는 750픽셀일 떄를 기준으로 750픽셀 이상일 떄는 html 태그의 폰트사이즈는 16픽셀이 되도록 스크립트의 제한값 설정
- 그 이하일 떄는 100분율로 계산하여 소숫점 단위까지의 픽셀로 자동 변환(16픽셀보다 작아짐)
- 예를 들어 <html style="font-size: 16px;">라면 1rem은 16px와 같고 계산된 값이 적용 되어 <html style="font-size: 13.45648px;"> 로 변경되면 1rem은 13.45648px 로 변경되는 원리 입니다.
'스타일시트 > SCSS' 카테고리의 다른 글
| 8. SCSS 기본 문법 - @mixin & @include (2) : @content (0) | 2025.03.24 |
|---|---|
| 7. SCSS 반복문 (2) | 2025.03.24 |
| 5. SCSS 기본 문법 - @mixin & @include (1) (0) | 2025.03.20 |
| 4. SCSS 기본 문법 - functions(pixel to rem 자동변환) (0) | 2025.03.20 |
| 3. SCSS 기본 문법 (0) | 2025.03.20 |