![]()
🤔 Input 안에 div 요소를 넣을 수 없어 focus를 활용한 border-color 변경이 어려워 졌다..🧐 GPT에게 도움 받기// React, Tailwind CSS, 그리고 TypeScript를 사용하여 Next.js 프로젝트에 맞게 필드의 포커스 상태에서 테두리 색상을 변경하는 방법을 설명하겠습니다.// Tailwind CSS는 유틸리티 클래스를 통해 포커스 상태의 스타일을 쉽게 제어할 수 있습니다. focus: 접두사를 사용하여 포커스 상태일 때의 스타일을 정의할 수 있습니다. 아래 코드는 필드가 포커스될 때 테두리 색상을 변경하는 방법을 보여줍니다:typescriptCopy codeimport React from 'react';interface SearchInputProps ..
![]()
🤔 PC 화면에서는 모든 컨텐츠를 보여주지만 모바일 화면에서 특정 컨텐츠를 드래그하면서 스크롤바를 안보이게 하는작업구글링을 통해 구현하려다가 간단하게 구현할 방법이 없을까 고민해보았다 참고한 블로그https://jihyundev.tistory.com/33 리액트로 만들어보는 마우스 드래그 좌우스크롤 컴포넌트최근 프로젝트에서 모바일에서만 노출되던 화면을 PC 환경에서 그대로 띄워줘야 할 일이 생겼다. 이때 신경써야 할 부분 중 하나가 바로 좌우스크롤이었다. 기존 모바일 브라우저 환경에서는 터jihyundev.tistory.comhttps://wnsdufdl.tistory.com/518🧐 라이브러리를 활용https://www.npmjs.com/package/tailwind-scrollbar-hide..
🤔 NavBar라고 불리우는 네비게이션바를 두줄로 출력하는 방법퍼블리싱 작업에서 한줄인 div를 두줄로 나눠서 출력하는 방법에 대해🧐 hidden을 사용하여서 만들기 {/*내용*/} {/*내용*/} tailwind 기준으로 크기를 지정하여 hidden을 이용하여 컨텐츠를 가리고 넣는 방식으로 진행하였다하지만 단점은 하나의 내용을 수정하려면 두개다 수정해야하는 번거로움이 발생하였다😆 flex-row flex-col 적극 사용하기크기에 따라서 flex-col과 flex-row를 사용해서 컨텐츠들을 적절히 배치해줬다div가 추가로 필요하지만 한번의 내용만 수정할 수 있어서 편리했다 {/*상단*/} {/*내용*/} ..
