금융권 개발 일지 블로그

목차■ 미디어쿼리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 사용법 정리(고급 기능)'의 미디어쿼리를 참고해 주세요. [바로가기]색상 관련 클래스명은 공식문서 중..

■ 문제상황Tailwind를 처음 적용할 때 Unknown at rule @tailwind 경고 표시가 뜹니다.■ 해결방법아래처럼 해결할 수 있습니다.*참고 포스팅 [VSCODE] tailwind 설치 후 vscode에서 "Unknown at rule @tailwind" css warning 끄기vscode 기본 설정 상태라면 tailwind 설치 후 vscode에서 css syntax warning을 뿜어냅니다. 이럴 땐, vscode 설정 창을 열고 (단축키: ctrl + , ) unknown으로 검색하면 "Unknown At Rules" 항목을 "warning"에서 "ignore"로 변hiperzstudio.tistory.com감사합니다.

Tailwind CSS는 CSS 라이브러리입니다.더보기🗨️ CSS 라이브러리가 뭔가요?HTML 스타일에 대해서 CSS로 하나 하나 적는 거에 대해 고충을 느껴 보신 분이라면, '누가 CSS 좀 대신 작성해 주면 안 될까?'라는 생각을 한 번쯤은 해보셨을 겁니다. TailwindCSS가 '누가 대신 작성한 CSS'를 모아놓은 소스 코드입니다.첫 번째 사진과 같은 스타일을 적용하기 위해 CSS를 직접 적는다면 두 번째 사진처럼 html로 구조를 만들고, css로 style을 작성해 주어야 합니다. 하지만 CSS 라이브러리를 이용한다면, html로 구조를 만들고 css는 class명 안에 이미 정의된 이름으로 작성할 수 있습니다. 자세한 설명은 공식 문서에서 확인할 수 있습니다. Utility-First F..