✏️기록하는 즐거움
반응형
article thumbnail
[TailwindCSS] Tailwind CSS 동적 스타일링 적용법 (+ 주의사항)
Retrospective/Project 2024. 11. 2. 00:19

📙 개요Tailwind를 사용하여 모달을 만드는 도중, 모달 닫기 버튼의 위치가 제대로 적용되지 않았다.분명 아까까지는 잘 적용됐는데 갑자기 아래로 가있는 닫기 버튼을 보자 당황할 수 밖에 없었다😭 📙 문제 파악 - 현재 컴포넌트 코드 살펴보기"use client";import { useRouter } from "next/navigation";import Icon from "./Icon";interface Props { size: number; right: number; top: number;}export default function CloseButton({ size, right, top }: Props) { const router = useRouter(); const handleClic..

article thumbnail
[NextJS] NextJS 14버전 로컬 파일 폰트 적용하기
WEB/NextJS 2024. 10. 23. 15:56

📙 로컬 파일로 Nextjs 폰트 적용하는 기본적인 방법로컬파일(.ttf, .woff, …)을 Nextjs 폰트로 적용하기 위해서는 기본적으로 아래의 방법을 사용한다. 🟡 app/layout.tsx에 next/font 를 사용하여 변수를 선언하고, className에 전달// app/layout.tsximport localFont from "next/font/local";const suit = localFont({ src: "../../public/fonts/SUIT-Regular.ttf", display: "swap", variable: "--font-suit",});const suitBold = localFont({ src: "../../public/fonts/SUIT-Bold.ttf", ..

반응형