TailwindCSS 시작하기

서론프로젝트를 진행하기 전 어떤 스택을 사용할지 정하는데 팀원이 TailwindCSS를 사용하자고 했다. Bootstrap과 같이 사전 정의된 컴포넌트가 있어서 커스텀하는 게 더 불편한 CSS 프레임워크를 생각했기에 처음에는 무한히 길어지는 className이 불편하다고 느꼈지만 프로젝트가 끝난 지금은 Styled-Components가 더 번거롭게 느껴진다.TailwindCSS란 무엇인가?Tailwind CSS는 사용자 정의 인터페이스를 신속하게 구축하기 위한 유틸리티 기반의 CSS 프레임워크다. 맞춤 설정 가능한 저수준의 CSS 프레임워크로, 원하는 대로 디자인을 구축할 수 있는 모든 구성 요소를 제공한다.위의 gif를 보면 어떻게 사용하는지 간단하게 알 수 있다.Tailwind CSS는 기존의 CSS..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms

[React/CSS] 모달 창 바깥을 클릭했을 때 모달창 꺼지게 하기

🤔 서론보통 모바일에서 많이 쓰이지만 한 번도 구현해본적 없는 기능을 구현해보려 했다. 항상 모달창에 x버튼을 두고 클릭하면 꺼지게 했는데 모바일에서 사용할 것을 대비하여 버튼 없이 기능이 작동하게 하려 한다.🥅 목표모달 창 바깥 배경을 클릭했을 때 모달 창 꺼지기👩🏻‍💻 구현전체 코드// 모달 창import React from "react";import { FiThumbsDown, FiThumbsUp } from "react-icons/fi";interface propsType { modalRef: React.ForwardedRef; modalOutsideClicked: (e: any) => void; cardId?: string; userId?: string;}export defaul..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms

[React/CSS] instagram 스토리처럼 드래그로 요소 넘기기

🤔 서론현재 나만무 프로젝트를 진행 중인데, 최근 게시물을 어떻게 보여줄 수 있을까 고민을 하다가 인스타그램의 스토리 기능이 생각났고 해당 부분의 인터랙션을 차용하려 한다.🥅 목표인스타그램 상단에는 최근 스토리를 올린 사람의 프로필이 뜬다. 터치해서 좌우를 자유롭게 움직일 수 있다.(모바일 기준) 해당 인터랙션처럼 드래그로 프로필을 움직이는 것을 구현하려 했다.👩🏻‍💻 구현전체 코드const getFriends = async () => { ... const [isMouseDown, setIsMouseDown] = useState(false); const [startX, setStartX] = useState(0); const [scrollLeft, setScrollLeft] = useSt..

• format_list_bulleted W/CSS
• · 2024. 7. 17.
• textsms