HTML & CSS

먼저 폰트를 적용한 프로젝트의 기술 버전은 다음과 같습니다.Next.js 15 (Page Router)Tailwind v4Typescript 5 💬 폰트 파일 다운로드하기제가 사용할 폰트는 'Pretendard'와 '이롭게 바탕체'였습니다.공식 사이트에서 웹 폰트를 다운로드하고, 'woff' 파일을 프로젝트에 추가합니다.저는 다음과 같은 폴더 구조로 폰트 파일을 저장했습니다. (./src/assets/fonts) 💬 localFont 불러오기프로젝트의 뼈대가 되는 '_app.tsx' 파일에 Next.js의 'next/font' 모듈을 임포트 하고 폰트를 로드합니다.import localFont from 'next/font/local';// 프리텐다드 폰트const pretendard = localFo..

🔖 메타 데이터(metadata)란메타데이터(metadata)란 '데이터에 대한 데이터(정보)'라는 의미로, 어떤 데이터를 설명하고 관리하기 위해 사용됩니다.원본 데이터의 특성, 속성, 구조, 유형 등에 대한 정보를 담고 있습니다.- 출처 사이트메타 데이터에는 어떤 목적을 위한 정보가 포함되느냐에 따라 다양한 종류가 존재합니다.아래는 메타 데이터의 몇 가지 예시입니다.기술적 메타 데이터: 파일의 형식, 크기, 생성일 등관리 메타 데이터: 데이터 소유자, 접근 권한, 보안 설정 등서술적 메타 데이터: 데이터에 대한 내용인 제목, 설명, 키워드 등메타 데이터는 사용자가 아닌 검색 엔진에게 웹 페이지의 정보를 제공하기 위해 사용되는 데이터이므로검색 엔진이 해당 웹 페이지의 주제와 내용을 잘 파악하는 데 중요..

🍎 설치하기1) 터미널에서 아래의 명령어를 입력하여 'tailwind-scrollbar-hide'라는 이름의 플러그인을 설치합니다.# npm 사용 시npm install tailwind-scrollbar-hide# yarn 사용 시yarn add tailwind-scrollbar-hide 2) 설치한 플러그인의 이름을 'tailwind.config.js' 파일의 플러그인 목록에 추가해줍니다.// tailwind.config.jsmodule.exports = { content: [], theme: { extend: {}, }, plugins: [ require('tailwind-scrollbar-hide') //  🍎 사용하기'scrollbar-hide' 클래스명은 테일윈드가 기본으로..

아래는 테일윈드 v3 기준으로 작성된 글입니다.2025년 1월 22일에 v4가 정식 출시되었고, 기본 설정 방법에 변화가 생겼으니 설치 방법은 공식 문서를 참고해주시길 바랍니다. (가능하면 추후 업데이트 하겠습니다.)유용한 도구들은 여전히 유효합니다. 🔮 설치하기1) 테일윈드를 사용하고자 하는 디렉토리에서 터미널을 켭니다. 2) 터미널에서 아래의 명령어를 입력하여 tailwindcss, postcss, autoprefixer를 설치합니다.npm install -D tailwindcss postcss autoprefixer 3) 터미널에서 아래의 명령어를 입력하여 'tailwind.config.js'와 'postcss.config.js' 파일을 생성합니다.npx tailwindcss init -p 4) ..