2021. 7. 27. 14:55ㆍ퍼블리싱/CSS
픽셀 사용을 추천하지 않는 이유
픽셀은 고정된 절대값이므로 접근성에 저해될 수 있다.
즉, 유저 입장에서 볼 때 브라우저의 기본 폰트값을 변경하더라도 픽셀값은 변하지 않는다.
물론 유저가 ctrl +/- 를 이용하여 줌 하는 경우에는 접근성을 해치진 않는다.
REM
Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
https://developer.mozilla.org/en-US/docs/Web/CSS/length
html, 즉 루트 요소의 폰트사이즈를 기준으로 폰트 사이즈를 설정하는 방법.
일반적으로 대부분의 브라우저 기본 폰트 사이즈는 16px이다.
html 폰트사이즈를 10px로 설정한다면, 1.6rem은 16px이 되어 계산이 수월하다.
하지만 이 경우 픽셀 사용과 똑같은 문제가 발생한다.
따라서 html 폰트사이즈를 퍼센테이지, 정확히는 62.5%로 설정하는 방법이 권장된다.
기본사이즈인 16px의 62.5%가 10px이기 때문.
이 경우 역시 1.6rem=16px 이 성립한다.
동시에 유저가 기본 사이즈를 변경하더라도 문제가 생기지 않는다.
물론 최고의 시나리오는 html 폰트 사이즈를 100% 로 설정하는 것인데 이 경우 더욱 디테일한 계산이 필요하다.
ex, 16px=1rem, 20px=1.25rem
html, body {
font-size: 62.5%;
line-height: 1.285;
}
반응형 작업
rem을 이용하면 반응형 작업이 쉬워진다.
html의 font-size를 60%, 50% 등으로 줄이게 되면 자연스레 전체 사이즈들이 줄어든다.
다만 이렇게 했을 때 디자이너의 시안과 달라지는 경우는 오히려 더 계산이 필요하다.
| 1rem | 100% | 16px |
| 62.5% | 10px | |
| 50% | 8px |
예를 들어 반응형 중 일부 쿼리단의 html font-size를 50%로 적용한다고 가정하자.
보통 포토샵으로 3배수 시안을 받는 경우가 많은데,
예를 들어 요소의 시안 사이즈가 240px 이라면, 실제 적용하는 사이즈는 80px 이다.
이제 이 80px을 rem으로 변환하게 되면 나누기 8 하여 10rem이 된다.
즉, 시안사이즈 ÷ 3 ÷ 8 이 되는 것이다.
scss를 사용해서 이를 함수화시킬 수 없을까 하고 찾아보니 역시, 여러가지 방법이 나온다.
(물론, 관련 외부 라이브러리 사용도 가능하다)
$browser-context:10; //브라우저 기본폰트
@function rem($px, $context: $browser-context) {
@return #{$px/$context}rem;
}
// 혹은
@function rem($px, $context: $browser-context) {
$remSize: $px / $context;
@return #{$remSize}rem;
}
위의 함수는 62.5% 환경에서 작업 시 크게 필요가 없다.
하지만 아까 예로 든 html의 font-size가 50%인 경우에 유용하게 쓸 수 있다.
변수 browser-context에 8을 입력해주면 바로 계산이 되기 때문.
응용
scss :
$browser-context:8; //html font-size 50%
@function rem($px, $context: $browser-context) {
@return #{$px/$context}rem;
}
html{
font-size:50%;
}
.box{
width:rem(100);
padding: rem(20) rem(80);
background:pink;
}
.txt{
background:#fff;
font-size:rem(16);
}
css :
html {
font-size: 50%;
}
.box {
width: 12.5rem;
padding: 2.5rem 10rem;
background: pink;
}
.txt {
background: #fff;
font-size: 2rem;
}
참고사이트 :
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
'퍼블리싱 > CSS' 카테고리의 다른 글
| [css] IR 기법과 IS 기법 (0) | 2021.08.26 |
|---|---|
| [css] BEM - Block Element Modifier : css naming convention (0) | 2021.07.28 |
| [css] margin과 padding 적재적소에 사용하는 법 (feat. margin-collapsing 마진병합현상/마진상쇄현상) (0) | 2021.07.20 |
| [css] transition 이해하기 (0) | 2021.04.28 |
| [css] background 속성 축약 순서 (shorthand property) (0) | 2021.04.21 |