Moong

storybook에서 sass 파일을 불러올 때 에러가 나는 경우 추가적인 설정을 해주어야 합니다! 1. 라이브러리 설치 (storybook/addon-styling, sass) @storybook/addon-styling 와 sass를 설치합니다. # yarn yarn add -D @storybook/addon-styling sass # npm npm install -D @storybook/addon-styling sass 2. main.ts addons에 sass 추가하기 .storybook > main.ts addons에 sass를 추가해주면 됩니다. // main.ts import type { StorybookConfig } from "@storybook/react-webpack5"; const ..

이번엔 React 와 Sass를 이용하여 다크모드 / 라이트 모드 테마를 적용하는 법에 대해 이야기 해보겠습니다 🌕 테마를 설정하는 데는 크게 1. theme object 사용하기 / 2. 함수 사용하기 두 가지 방법이 있습니다. 우선 두 가지 방법을 설명하는 데에 앞서, 테마를 적용하는 원리에 대해 알아보겠습니다! Scss에 테마 정보 알리기 - body 태그에 class를 넣었다 뺐다 하기 scss 파일에서 현재 테마가 어떤 것인지 알기 위해서는 class로 그 정보를 알려주어야 합니다. 따라서 상단에 존재하는 body 태그의 class에 테마 정보를 넣는 것이죠! 지금 현재 어떤 LIGHT 또는 DARK 테마인지에 대한 정보는 저는 기본 테마를 dark 모드로 할 예정이라 body 태그에 LIGHT..

화면 너비에 따라 요소들이 완벽하게 똑같은 비율로 늘고, 줄도록 만들고 싶을 때가 있죠! 그럴 때를 위해 제가 만든 유용한 sass 함수들을 소개시켜드리도록 하겠습니다 길이 단위 종류 우선 웹에서 사용하는 길이 단위의 종류에는 무엇이 있는지 살펴보겠습니다. 단위 종류 설명 절대적 / 상대적 길이 단위 px 픽셀 (1px = 1/96th of inch) 절대 em 글꼴 크기 / 부모의 x배를 나타냄 상대 rem 글꼴 크기 / html 크기의 x배를 나타냄 상대 vw 화면 너비의 x%만큼의 크기를 나타냄 상대 vh 화면 높이의 x%만큼의 크기를 나타냄 상대 % 부모의 x%만큼의 크기를 나타냄 상대 여기에서 우리는 화면 너비에 따라 크기가 변하도록 만들어야 하므로, 화면 너비와 관련이 있는 단위인 vw 를 사..