CSS3 [리액트] tailwindcss style components 하는 설치방법 테일윈즈 스타일 컴포넌트 설치하는 방법 테일윈즈를 쓰다보면 편리하기는 한데 코드가 지저분해지는 현상이 생긴다 이럴 때 테일윈즈 스타일 컴포넌트를 사용해주면 편할 것 같아서 자주 사용하려고 한다 설치방법은 아래와 같다 npm i -D tailwind-styled-components 터미널에 테일윈드 컴포넌트를 설치해준다 import React from "react"; import tw from "tailwind-styled-components"; const Container = tw.div` flex items-center justify-center flex-col w-full bg-indigo-600 ` render( Use the Container as any other React Component ).. 2023. 3. 23. [자바스크립트] 3d 카드 만들기 Element.getBoundingClientRect() / mousemove event 인터렉티브 웹사이트 만들때 자주 쓰이는 요소 포트폴리오 웹사이트나 배너를 인터렉티브하게 만들고 싶을 때 어떻게 하면 좋을까? Element.getBoundingClientRect()란? 자바스크립트에 내장된 함수이다. 아이템 요소의 크기와 뷰포트에서 상대적인 위치를 알려주는 DOMRect 객체를 반환한다 저 엘리먼트가 움직여줄 카드라고 생각해보자 내 마우스를 클릭할 때마다 마우스 클릭을 알고 그에 맞춰서 카드가 기울여지는 것이다 그럴려면 내 마우스 위치를 알아야겠지? 이 함수를 사용하면 왼쪽 여백 X좌표와 위쪽 여백 Y좌표 엘리먼트 width 값과 height 값을 구할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClie.. 2023. 3. 21. CSS - 컬러 참고하기 좋은 사이트 Flat UI CLASS / Paletteon / Material Design 컬러툴 웹사이트나 앱 만들 때 컬러 쓰기가 참 어렵다 - 하나씩 볼 때는 이쁜데 조합해서 보면 금방 촌스러워진다 적절한 배합으로 예쁘게 #포트폴리오 웹사이트를 만들고 싶다면 이제 유용한 사이트들에 도움을 받으면 될 것 같당 1. FLAT UL COLORS 나라별로 팔레트로 나뉘어있다 그 나라 컬러를 대표하는건지 의문스럽긴 하지만 예쁜 컬러를 한눈에 볼 수 있어서 좋다 원하는 컬러를 클릭하면 자동으로 복사되고 VSC에 붙여놓기하면 된다! 완전 편하고 좋당 https://flatuicolors.com/ Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicolors.com 2. Pale.. 2022. 8. 23. 이전 1 다음
