tailwind 폰트 적용하는 방법styles 폴더 하위에 fonts폴더에 notoSansKR.css 파일 생성 후  font-face 붙여놓는다// notoSansKR.css@font-face { font-family: 'NotoSansKR'; font-weight: 100; font-style: normal; src: url('/fonts/NotoSansKR-Thin.ttf') format('truetype');}@font-face { font-family: 'NotoSansKR'; font-weight: 200; font-style: normal; src: url('/fonts/NotoSansKR-ExtraLight.ttf') format('truetype');}@font-face {..

meta 태그 태그는 HTML 문서의 사이에 입력하는 특수 태그로서 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용합니다.viewport - 반응 형 웹 구현Keywords - 검색엔진에 의해 검색되는 단어 지정Description - 검색 결과에 표시되는 문자 지정author - 웹 페이지의 소유자(또는 회사) 작성  OpenGraph오픈그래프는 웹페이지가 소셜 미디어 또는 오픈그래프를 활용한 사이트로 공유될때 사용되어지는 정보이다. 기본적으로 설정해야하는 og 메타태그 Naver 블로그, 카카오톡 미리보기 설정  트위터 미리보기 설정  모바일 앱 미리보기 설정    Next.js에서 meta 태그 적용하기 정적 메타 태그개인적으로 Layout에서 화면 구성을 하고..

파비콘(favicon)이란?즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 인터넷 웹 브라우저의 주소 창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 일반적으로 16*16 사이즈로 만들지만 디바이스가 다양해진 만큼 다양한 크기의 아이콘을 만드는 것이 좋다. 그 아이콘은 웹 브라우저 상단에 있는 탭에 표시되기도 하며 브라우저의 북 마크바 나 방문 기록, 검색 결과에서 페이지 url과 함께 표시되기도 한다.  파비콘 만드는 추천 사이트  Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App..

emotion은 css-in-js (JavaScript코드에서 CSS를 작성하는 방식) 라이브러리 중 하나로 다음의 특징이있다.자동적으로 vendor-prefix 를 붙여준다.기본적으로 고유한 이름을 생성한다.JavaScript와 CSS사이에 상수와 함수를 쉽게 공유할 수 있다.React 스타일 컴포넌트로 사용할 수 있는 것CSS 로드 우선 순위 이슈를 해결할 수 있다javascript runtime에서 필요한 CSS를 동적으로 만들어 적용한다. 패키지 설치 npm install --save @emotion/react// styled 방식 사용할시npm install --save @emotion/styled// 스타일을 압축하고 끌어 올려 스타일을 최적화하고 // 소스 맵과 레이블을 사용하여 더 나은 개..

모바일에서는 url 주소 창, 네비게이션 바의 높이를 뷰 포트(스크린)높이에 포함 시켜 pc에서처럼 화면에 꽉 차지 않고 실제 화면보다 크게 잡혀서 스크롤이 생긴다.  window.innerHeight 로 현재 뷰 포트 크기 가져와서 재정의 하기 next.js 에서는 최상위에 위치한 _app.js에서 적용하기//_app.jsfunction setScreenSize() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`);}useEffect(() => { setScreenSize();}); css 적용하기/* 필요한 곳에 적용 */height: calc(var(--v..

태그는 텍스트에 사용된 여백과 줄 바꿈이 모두 그대로 브라우저 화면에 나타낸다. Lorem Ipsum is simply dummy text of the printing and typesetting industry.   태그는 내부에 있는 글을 그대로 보여주기 때문에 긴 글을 일 경우 줄 바꿈이 안되고 영역을 넘어간다.그래서 pre 태그에 white-space: pre-wrap css 를 추가해줘야 자동으로 줄 바꿈이 이루어진다. Lorem Ipsum is simply dummy text of the printing and typese..

Next.js 에서 새로 고침 하면 아래와 같은 오류가 발생했다.Hydration failed because the initial UI does not match what was rendered on the server Next.js 공식 문서에 따르면 오류가 발생한 이유로는“ 텍스트 내용이 서버에서 렌더링 된 HTML과 일치하지 않습니다. "렌더 시점에 대한 이유로 발생한 거 같다. 여러 해결 방법 중 useEffect를 활용해서 해결했다. import { useState, useEffect } from 'react' export default function App() { const [mounted, setMounted] = useState(false) useEffect(() => { se..