금융권 개발 일지 블로그

목차■ 미디어쿼리PC보다 모바일을 사용하는 시간이 긴 요즘 같은 시대에 반응형을 대응하지 않는다면 조금 아쉽죠.화면의 크기에 따라 css를 바꿀 수 있는 미디어쿼리입니다.노랑(default), 남색(sm), 파랑(md), 빨강(lg), 회색(xl) Responsive Design - Tailwind CSSUsing responsive utility variants to build adaptive user interfaces.tailwindcss.com■ hover, focus, 입력폼의 상태 나타내기아래 링크는 hover과 focus보다 입력폼의 상태나 다른 예시 코드가 많아서 참고하기 좋더라구요.입력폼 비활성화 [바로가기] Username 입력 검증 [바로가기] E..

목차■ flexflex부모에게 flex를 주면 자식이 수평으로 나열됩니다. 01 02flex-1이때, 자식에게 flex-1을 주면 해당 자식이 최대한의 너비를 갖습니다.flex-1인 자식이 2개 이상이면 너비를 공평하게 나눠 갖습니다. 01 02 03 04 Flex - Tailwind CSSUtilities for controlling how flex items both grow and shrink.tailwindcss.com■ Grid - 세로로 나열grid   grid-flow-col : 위에서 아래로 나열grid-rows-숫자 : 행(row) 개수 (1~12까지 있음)grap-숫자 : 항목(item) 간 간격 (1~12까지 있음) 01 02 03 04 05 ..

설치는 따로 포스팅해 놓았습니다. [기록/환경세팅] React-App에 Tailwind CSS 라이브러리 추가하기Tailwind CSS는 CSS 라이브러리입니다. 더보기 🗨️ CSS 라이브러리가 뭔가요? HTML 스타일에 대해서 CSS로 하나 하나 적는 거에 대해 고충을 느껴 보신 분이라면, '누가 CSS 좀 대신 작성해 주면 안 될까subin2022.tistory.com 본문의 기본 기능과 캡처한 이미지는, 제가 생각하기에 자주 사용되는 키워드를 선별한 것입니다. 추가적인 기능 이용이 필요할 경우 공식 문서에서 확인하시면 됩니다.목차■ 컬러차트 : [컬러명]-[숫자]사용 예시는 'TailwindCSS 사용법 정리(고급 기능)'의 미디어쿼리를 참고해 주세요. [바로가기]색상 관련 클래스명은 공식문서 중..