일반적으로 모달 닫기 버튼 외에 모달 영역 밖을 클릭 시 닫을 수 있어야 된다.  모달 열고 닫기 기본형useState를 활용해 클릭하는 버튼을 이전 값에 반대되는 값이 들어오게 해서 true면 모달 창이 보이고 false면 닫히게 만들었다.export default function Modal() { const [modal, setModal] = useState(false); return ( setModal((prev) => !prev)}> 버튼 {modal && ( 모달 )} );}  모달 영역 외 클릭시 모달 닫기 useRef를 사용하여 modalBtnRef와 modalRef를 생성하여 modalBtnRef**(모달..

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에서 화면 구성을 하고..