sohyeon kim

💡 Next. js Pretendard 폰트 적용 1. 우선 폰트 다운 🔗 2. 폴더에 폰트 파일 넣기src/fonts/PretendardVariable.woff2 3. layout.tsx 파일에서 폰트 적용import localFont from 'next/font/local'const pretendard = localFont({ src: '../fonts/PretendardVariable.woff2', display: 'swap', weight: '100 900', variable: '--font-pretendard',})const RootLayout = ({ children,}: Readonly) => { return ( ..

💡 MUI & Shadcn UI 중 design system 선택하기 🔵 MUI : Google의 Material Design 가이드라인을 기반으로 한 React UI 라이브러리Material Design 기반 : 구글의 디자인 가이드 라인을 기반으로 한 스타일링으로, 일관되고 직관적인 UI 구현 가능컴포넌트 중심 : 버튼, 네비게이션 바 등 다양한 사전 정의된 컴포넌트 제공CSS-in-JS 방식 : 기본적으로 @emotion/react를 사용하여 CSS-in-JS 스타일링 제공반응형 디자인 지원 : 반응형 그리드 시스템과 스타일링 도구를 제공하여 다양한 화면 크기의 애플리케이션을 쉽게 구축 가능많은 컴포넌트가 준비되어 있어 빠른 개발이 가능하고, 유지 보수에 용이하며, 커뮤니티가 활발하지만일부 컴포..

💡 tailwind.. 조건에 따라 스타일링이 가능했다.. 문제 풀기 기능 구현 중 채점 후에 사용자의 답이 정답이라면 파란색으로, 오답이라면 빨간색으로 표시를 해줘야 했다! 그래서 같은 태그(컬러만 다르게 준)를 두 개 두고 정답/오답에 따라 보이게 해야 하나? 하다가 tailwind 조건부를 검색했더니.. 바로 나왔다 🥹 ! 사용법은 className 을 벡틱으로 감싸고 조건을 걸어주면 된다! ⭕️ 주관식 답 사용자가 입력한 답 === 정답 이라면 파란색으로! {usersAnswer?.answer} ⭕️ 객관식 답 사용자가 입력한 선택지 === 이 선택지(map 을 돌려서 선택지를 표시했기에 같은 옵션인지 id 로 구분)이고 is_answer true 값을 갖고 있다면 파란색으로! 처음엔 보더로만 구..

💡 tailwind 에서도 calc 사용이 가능했다! .example { font-size: calc(2vw + 10px); /* viewport width에 따라 크기 조절하면서 10px를 추가 */ padding: 20px; /* 고정된 크기로 픽셀 단위 사용 */ margin: calc(1vw + 5px) calc(2vw + 10px); /* 세로는 viewport width에 따라, 가로는 픽셀 단위로 사용 */ width: calc(50% + 20px); /* 백분율로 지정하면서 20px를 추가 */ } 원래 요렇게 쓰는 calc .. tailwind 에서 써보자! 저 바(8vh)에 보더를 주고 안에 빨간 박스(8vh)를 채워놨는데 border-box 가 적용되어 있어서 빨간 박스가 보더를 가려..

💡 tailwind 로 체크박스 커스텀하기 { handleCheckObjectAnswer(id, options, option.id); }} /> checked 됐을 때 표시될 배경색을 넣어주고, 그 위에 png 하얀색 체크 표시를 넣어줬다! 그리고 bg-no-repeat bg-center 로 이미지가 가운데 위치하도록 했다. 🥵 url 문제가 좀 있었는데.. 파일에 넣어둔 이미지를 가져오려 했는데 url 에 파일 경로를 아무리 넣어봐도 .. 적용이 안됐다. tailwind.config 에서도 넣어봤지만.. 자꾸 경로 오류가 떠서 시간만 보내다가 supabase storage 에서 URL 가져올 수 있지 않나?!?!??! 해서 이미지 올려두고 url 복사해서 넣어두니 아주 잘 표시됐다. 😭 🔗 https:..

💡 tailwind 로 그림자 효과를 넣어보자!  github 링크에 호버하면 그림자를 주고싶었다!  🎀 디자인을 바꾸고 싶다면 tailwind.config.ts 에서 설정할 수 있다.theme: { extend: { dropShadow: { DEFAULT: '2px 2px 0 #890105', }, }, }, DEFAULT 말고도 md, 3xl 등 사이즈 별로 추가할 수 있다!   🔗 https://tailwindcss.com/docs/drop-shadow Drop Shadow - Tailwind CSSUtilities for applying drop-shadow filters to an element.tailwindcss.com

💡 tailwind 로 text-shadow 를 적용시켜보자. tailwind 에 텍스트 섀도우를 검색하면 drop-shadow 가 나온다. 이걸로 폰트도 적용하는건가? 하고 클래스에 넣어봤지만 적용 안된ㄷ.. 알아보니 tailwind 에서 text-shadow 는 공식적으로 지원을 안한다고 한다. 그래도 적용하는 법이 따로 있긴 했다! 원래는 이런식으로 class 명을 넣어주는데, text-shadow 는 방식이 조금 달랐다. _x_y_blur_color 순으로 보면 된다. tailwind.config 를 수정해서 text-shadow 옵션을 직접 등록하는 방법도 있었는데, (그럼 원래 class 명처럼 깔끔하게 쓸 수 있다.) 한 곳에서 한 컬러만 쓸거라 따로 등록하진 않았다. 🔗 https://ww..

💡 Next.js 에 폰트 설정을 해보자. layout.tsx import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: Readonly) { return ( // ... 기본 설정은 inter 폰트로 되어 있다. 🌀layout 과 같은 위치에 styles/fonts.ts 추가 import { Inter, Roboto_Mono ..

💡 파일 추가 버튼을 ! 디자인해보자. HTML & CSS~ input[type=file]::file-selector-button { width: 30%; height: 30px; background-color: #e0c3ae; font-family: 'SunBatang-Light'; color: #784b31; border: none; border-radius: 10px; cursor: pointer; &:hover { transition: 0.3s; color: #fff; background-color: #b6856a; } } React ~ const FileInput = styled.input` width: 100%; margin: 5px 0; &::file-selector-button { widt..

💡 배경색 없애는 법 ~ background-color: transparent; input { height: 50px; margin-bottom: 10px; border: none; border-bottom: 1px solid red; background-color: transparent; /* 이 부분!! */ }