오전중 회의는 반응형에 알맞은 rem 설정을 하기로 했으며 사전에 픽셀로
고정값을 주기보단 % 로 전체적인 구간을 나눠두고 작업을 시작하기로 했다.
처음에는 화면이 줄어들었을땐 고정으로 되어있다 보니... 크기에 맞게 작아지는게 아닌 고정으로 서있는 것 처럼 보였다.
globalstyles 에
import { css } from "@emotion/react";
export const globalStyles = css`
/* * {
margin: 0px;
box-sizing: border-box;
font-family: "NotoSansKR", "Roboto";
} */
html {
width: 100%;
min-width: 100%;
min-height: 100%;
height: 100%;
font-size: 62.5%;
margin: 0;
}
/* ::-webkit-scrollbar {
width: 0.4rem;
}
::-webkit-scrollbar-thumb {
height: 5%;
background: skyblue;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background: #f2f2f2;
} */
@font-face {
font-family: "NotoSansKR";
font-style: normal;
src: url("/fonts/NotoSansKR-Regular.otf") format("opentype");
unicode-range: U+AC00-D7A3;
}
@font-face {
font-family: "Roboto";
font-style: normal;
src: url("/fonts/Roboto-Regular.ttf") format("truetype");
unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
}
을 입력후 10px => 1rem 으로 수치를 환산하고 전체적인 px 값을 변경하기로 했다.
오늘도 여지없이 퍼블리싱 열심히 해서 다음주 부터는 빠르게 기능을 넣고싶다.