프론트엔드 관련/프로젝트13 [NextJS] 반응형 디자인을 해보자!! - Grid편 (ft. tailwind CSS) 서론 여태까지 프로젝트에서 데스크탑 화면만 구성해봤지만, 사실 반응형 디자인은 어렵지 않다.tailwind css나 mui 등을 사용할 때, 반응형 디자인을 쉽게 할 수 있게 지원해주기 때문에 그렇게 어렵진 않다. 이번엔 grid를 사용해서 반응형 디자인을 할건데, tailwind css를 사용해 보자. 계획먼저, tailwind css에서 반응형 디자인은 어떻게 하는지 찾아보자. sm, md, lg 등을 추가하는 것으로 반응형 디자인을 간단하게 설계할 수 있는데, 보통 width 그럼 이제 Grid로 어떻게 할까? 먼저 Grid를 알아보자. 가로를 기준으로 Grid Item들을 배치할 거면, grid-templates-columns 속성을 활용하면 된다.간단하게 classname에 gird-cols-$.. 2025. 2. 17. [NextJS] 컴포넌트 재사용성을 높이자!! (ft. tailwind CSS) 서론 {/* 타이틀 */} 배고프다 14,000원 {/* 정가 */} 20,000원 35% 테일윈드 CSS를 사용하여 작업한 컴포넌트인데, 이 컴포넌트에서 반복이 너무 많고, 최대한 줄일 부분이 보여서 재사용성을 높여보자! 기준 정하기 먼저, 할인된 가격과 정가, 그리고 할인률. 이 세 가지의 기준으로 나눌 수 있으니, 조건부 스타일링으.. 2025. 2. 17. [Sejong Reuse Hub] 2024/06 당시 작업했던 결과물 Home 페이지 네비게이션 바게시글:게시판 이동글쓰기 : 게시글 작성Map : 재활용 수거함 & 게시글 위치 확인Map 페이지페이지의 왼쪽 버튼을 클릭하면, 폐건전지 수거함, 폐형광등 수거함, 의류 수거함 등의 위치를 지도로 표시해 줍니다.교환, 거래 등이 이루어지는 게시글의 위치를 확인할 수 있습니다.마커 클릭 시, 게시글의 내용을 확인 할 수 있습니다.게시판 페이지게시판: 게시글을 카드 형식으로 확인 할 수 있습니다.게시글: 제목,내용,위치를 등록하여 제품을 교환 및 거래 할 수 있습니다.단일 게시글 확인: 게시글의 내용을 확인할 수 있으며, 댓글을 통해 제품 교환 및 거래를 신청 할 수 있습니다.Home 페이지 2025. 1. 10. 국민체육진흥공단 공모전 결과물 결과는 아쉽게 수상을 못했다. 2024. 12. 13. [React] 카카오맵 도로명 주소를 통한 위치 정보 검색(존재하지 않는 위치정보 포함) 기술 환경React, Vite, Typescript, react-kakao-maps-sdk, Maps Javascript API(Google)카카오맵 도로명 주소를 통한 위치 정보 검색세간에 나와있는 도로명 주소를 통한 위치 정보 검색은 다음과 같다.물론 매개변수 타입은 따로 정의되어있지 않아, 내가 찾아보면서 따로 추가하였다.function getPositionFromAddress(searchAddress: string) { const geocoder = new kakao.maps.services.Geocoder(); const callback = function ( result: Array, status: kakao.maps.services.Status, pagination: ka.. 2024. 12. 11. [React] 비대화형 요소(td, div)에 마우스 이벤트(onFocus, onBlur) 넣기 HTML 요소 포커스 HTML에서 , , , 와 같은 요소는 대화형 요소는 기본적으로 포커싱이 된다.그러나 대화형 요소가 아닌 비대화형 요소(div, td, ul, li, span, p...)는 포커싱이 발생하지 않는다. 즉, onFocus와 onBlur 이벤트가 발생하지 않는다. 비대화형 요소에 onFocus, onBlur 이벤트를 발생시키고 싶으면 2가지 방법이 있다. 1. tabIndex 속성 활용2. 직접 마우스 이벤트 제어 직접 하나씩 알아보자 tabIndex 속성tabIndex 속성은 요소의 종류와는 무관하게 포커스 가능함을 나타내는 속성이다.Tab 키를 사용하는 연속적인 키보드 탐색(tab 탐색)에서 어느 순서에 위치할 지 지정한다. tabIndex=-1로 표현되는 음의 정수 값은 tab.. 2024. 9. 23. 이전 1 2 3 다음
