[CSS] font-size를 통한 rem사용방법과 유의할 점

<h1>HEADING</h1>
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit possimus necessitatibus natus a ipsam, voluptate dolores, optio quibusdam doloribus architecto obcaecati, eveniet magni ex veniam dolorum blanditiis tempora exercitationem ea!
    Voluptatem voluptate nulla recusandae debitis tempora rem maxime provident nobis minus neque quod excepturi molestiae sapiente, fuga ducimus sint quia quam eum qui enim cupiditate ab, officiis vitae! At, ipsum?
    Vero fugit doloremque, ipsum nihil quis quae cumque magni reprehenderit tempore molestiae repellat magnam esse aspernatur et necessitatibus suscipit! Aliquid a, sunt debitis autem dolorem omnis consequatur ullam est tempora?
</p>
<h2>참고 <a href="https://nekocalc.com/px-to-rem-converter">px to rem convert</a></h2>
<h2>참고 <a href="http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/">rem 퍼센트 알아보기</a></h2>
<h2>참고 <a href="https://nykim.work/85">반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성</a></h2>

html {
    /* 62.5% => 1rem === 10px */
    font-size: 62.5%;
}
h1 {
    /* 62.5% => 60px */
    font-size: 6rem;

    background-color: plum;
    margin: 2rem;
}
p {
    /* 62.5% => 16px */
    font-size: 1.6rem;
}
@media all and (max-width: 768px) {
    html {
        /* 75% => 1rem === 12px */
        font-size: 75%;
        background-color: #eaeaea;
    }
    h1 {
        /* 12 * 3 = font-size: 36px; */
        font-size: 3rem;
        
        /* margin :: 12px * 2rem = 24px; */
    }
    p {
        /* 12 * 1.6 = font-size: 19.2px; */
        font-size: 1.6rem;
    }
}

브라우저에 동일한 값으로 font-size를 선언하는 방법

1. font-size: 1em;
2. font-size: 100%;
3. font-size: 16px; // this is default.

html이나 body에 %나 em을 사용해 전체적으로 사이즈를 변경할 수 있다.

font-size: 100% 의미

em과 rem의 적절한 사용방법

 

---

 

정리📌

em 내가 작업하기 힘들다. (하나하나 계산해줘야 함으로)

rem도 계산하긴 힘들지만 em보단 아님.

브라우저마다 font-size는 다르다. 그러므로 px로 고정해주어 모든 브라우저에 호환될 수 있는 것이 중요하다.(디자인에 맞게 나오도록)

또한, 웹접근성에 rem을 쓰기에는 부적합하다. 상위의 font-size가 변경되면 똑같이 사이즈가 변경되어 레이아웃이 틀어져 디자인에 어긋나는 상황이 나온다.

rem이나 em은 텍스트가 많은 페이지에 쓰거나 반응형에 따라 사이즈가 다른 곳에 사용하는 것이 좋다.

 

---

 

최상위 요소 말고 기타 다른 특정 요소의 font-size를 기준으로 그 크기가 바뀌어야 하는 곳에 사용.

일반적으로, em 단위를 써야 할 오직 하나의 예를 꼽자면 어느 한 요소의 크기를 정할 때 해당 요소가 기본 폰트 크기로 지정되어 있지 않았을 때 뿐입니다.

앞의 예제에서도 살펴봤듯이, 디자인 구성 요소 중 메뉴 항목, 버튼 그리고 제목은 자기만의 폰트 크기가 지정되어 있을 겁니다. 만약에 이들의 폰트 크기를 변경하면, 전체 구성 요소들도 같이 비례하게 크기가 바뀌길 바라지요.

이런 지침에 해당하는 설정 속성엔 margin, padding, width, height 그리고 line-height이 있는데, 물론 사용된 요소에는 기본 폰트 크기로 지정되어 있지 않아야 합니다.

하나 더 충고해 드리고 싶은 말은, em 단위를 쓰실 땐 상속에 따른 애매한 상황을 피하고 또 크기가 대칭적으로 변할 수 있도록, 지정한 요소의 폰트 크기는 꼭 rem 단위를 쓰시기 바랍니다.

몇 가지 예외 상황을 제외하곤, 폰트 크기가 최상위 요소에 지정된 것 말고 다른 요소의 영향을 받아서 바뀌게 되는 상황을 원하는 경우는 별로 없을 겁니다.

(...)

em 기반의 폰트 크기를 쓰기 적당한 한 예를 들자면 드롭 다운 메뉴가 있는데, 보통 두 번째 단계에 있는 메뉴 항목의 폰트 크기는 첫째 단에 있는 메뉴의 폰트 크기를 기준으로 정할 때가 있을 겁니다. 또 다른 예를 들자면, 버튼에 사용된 폰트 아이콘의 크기를 정할 때 함께 있는 버튼 텍스트의 크기에 맞도록 해야 할 경우입니다.

하지만 대부분 웹 디자인에 필요한 요소는 이러한 요구 사항이 필요 없을 터라, 일반적으로 폰트 크기를 지정할 땐 rem 단위를 쓰고, 특별한 상황에서만 em 단위를 쓰시면 되겠습니다.

 

바로 위에서 설명한 em 단위를 써야 할 이유 말고, 브라우저에 설정된 폰트 크기에 따라 그 크기가 변해야 하는 곳에는 모두 사용합니다.

여기에는 일반 디자인 거의 모두에 해당하는 높이라던가, 너비, 패딩, 마진, 테두리 너비, 대부분의 폰트 크기, 그림자 등등 기본적으로 레이아웃의 모든 부분이 해당합니다.

한 마디로, 크기가 변해야 하는 곳이라면 rem 단위를 쓰라는 말이죠.

 

출처: https://web-atelier.tistory.com/44 [웹아틀리에 - Web atelier]

 

---

Reference

https://nykim.work/85

https://web-atelier.tistory.com/44