tailwind

🤔 Input 안에 div 요소를 넣을 수 없어 focus를 활용한 border-color 변경이 어려워 졌다..🧐  GPT에게 도움 받기// React, Tailwind CSS, 그리고 TypeScript를 사용하여 Next.js 프로젝트에 맞게 필드의 포커스 상태에서 테두리 색상을 변경하는 방법을 설명하겠습니다.// Tailwind CSS는 유틸리티 클래스를 통해 포커스 상태의 스타일을 쉽게 제어할 수 있습니다. focus: 접두사를 사용하여 포커스 상태일 때의 스타일을 정의할 수 있습니다. 아래 코드는 필드가 포커스될 때 테두리 색상을 변경하는 방법을 보여줍니다:typescriptCopy codeimport React from 'react';interface SearchInputProps ..

🤔 NavBar라고 불리우는 네비게이션바를 두줄로 출력하는 방법퍼블리싱 작업에서 한줄인 div를 두줄로 나눠서 출력하는 방법에 대해🧐  hidden을 사용하여서 만들기 {/*내용*/} {/*내용*/}  tailwind 기준으로 크기를 지정하여 hidden을 이용하여 컨텐츠를 가리고 넣는 방식으로 진행하였다하지만 단점은 하나의 내용을 수정하려면 두개다 수정해야하는 번거로움이 발생하였다😆  flex-row flex-col 적극 사용하기크기에 따라서 flex-col과 flex-row를 사용해서 컨텐츠들을 적절히 배치해줬다div가 추가로 필요하지만 한번의 내용만 수정할 수 있어서 편리했다  {/*상단*/} {/*내용*/} ..