root 단위 문의

[eondcom]

제 사이트를 보시면 기존에 설정된 rem 단위랑 충돌인건지 이렇게 나옵니다.

코드를 보면 별도�로 rem 단위를 :root에 사용하셨던데
https://github.com/damoang-users/rx-da_reaction/blob/main/public/assets/da_reaction.css
다모앙도 보니깐 동일한 설정값이고, 부트스트랩을 사용하고 게시더군요.

일률적인 것은 아니지만 이렇다고 합니다. ㅠ

저는 과거부터(오래된 퍼블리셔입니다) 62.5%로 줄여서 사용을 해온 입장인데요. 부트스트랩, tailwind는 기본값 100%였군요.

---

가만히 살펴보니깐 root가 문제가 아니라.
루트는 rem이고 안에 코드는 em 이군요.
별개라서 서로 영향은 없을텐데

아시다시피 em은 부모에 영향을 받습니다. 즉 부모의 크기에 따라 em값이 달라질텐데요.
지금 em 단위로 쓰인게 17군데 정도 되어보이는데 이건 통용되는 모듈 상 px 단위로 수정하는게 좋아보입니다.

[kkigomi]

네. 아까 주신 링크를 보니 크기가 작게 나오더라고요.
padding 등에 활용하며 계산하기 쉽게 10px(0.625rem)로 설정하신 것 같습니다.

em 단위를 사용했지만 리액션 컨테이너인 .da-reaction에는 font-size: var(--da-reaction-font-size);으로 1rem으로 지정되어 있고, 이를 기반으로 em 단위를 사용했습니다.

eondcom님의 사이트에서는 html 루트 요소의 영향을 받는 1rem의 기준이 16px -> 10px로 바뀌었으므로 .da-reaction 컨테이너 및 하위 요소들이 모두 작게 줄여져 표시되는 것은 의도한 것입니다.

--da-reaction-font-size 변수(프로퍼티)의 값 1rem을 1.6rem으로 변경하면 적절한 크기로 보여질 것 같습니다.