본문 바로가기

IT 공부/React-Tailwind

 (8)
[Tailwind Css] Container, Margin Article One 매월 70만원씩 5년간 저축하면 최대 5000만원 목돈을 마련할 수 있는 ‘청년도약계좌’가 가입 신청을 재개한다. 2일 금융위원회는 청년도약계좌의 7월 신청 접수를 오는 3일부터 14일까지 은행 영업일 중에 받는다고 밝혔다. 청년도약계좌는 매월 가입을 신청할 수 있는데 이달의 경우 해당 기간 영업일 중 출생연도와 관계없이 가입신청을 받는다. 청년도약계좌는 출시 초반 신청자가 몰릴 것에 대비해 5영업일 동안 출생연도 끝자리로 가입 신청일을 제한한 5부제를 적용해왔다. 11개 청년도약계좌 처리 앱으로 오전 9시∼오후 6시 30분에 비대면으로 신청하면 된다. 가입 신청자는 은행 앱에서 연령 요건, 금융소득종합과세자 해당 여부 등을 확인할 수 있다. 이달부터는 지난해 소득이 확정되면서 20..
[Tailwind Css] Colors Text Color 진하기 text-color로 색깔을 줄 수 있다. 50이 가장 연한색, 900이 가장 진한 색이다. Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 색깔 바꾸기 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학습 배경 색깔 Tailwind Css 학습 Tailwind Css 학습 Tailwind Css 학..
[Tailwind Css] alert박스 만들기(p, max-w, mx-auto) - p : padding 안쪽 여백 (현재 p-6, 24px의 여백을 위, 아래 , 오른쪽, 왼쪽 다 줬다고 생각하면 된다.) 나중에 마진을 넣을때 한결 수월하게 넣을 수 있다. - max-w : w 넓이의 최대값을 부여함.(w 값을 자동으로 부여) 이런식으로 넓이 값을 px로 고정시키지 않고 만들 수 있다. mx-auto 이런식으로 왼쪽 오른쪽 마진을 자동으로 설정해준다. 이런식으로 화면을 조정해도 right, left margin이 자동으로 일정하게 해주는 것을 확인할 수 있다.
React-Tailwind를 이용하여 캐러셀(carousel) 만들기 *carousel입니당 ㅎㅎ.. carousal로 다 만들어 놨어요^^ (오타주의) 1. 먼저 pages폴더에 carousㅁl.js파일을 만든다. 2. carousal.js 파일에 기본 세팅 export default function Carousal(){ return( ) } 3. (기본 세팅) button을 눌렀을 때, 지정 경로로 이동하도록 함. import { useNavigate } from "react-router-dom" export default function Carousal(){ let navigate = useNavigate(); return( carousal페이지 입니다. {navigate("/")}}>홈으로 이동 ) } 4. image파일 [public]에 넣기 5. image 불러..
3. navigate로 다른 페이지 이동 최종 결과물 새로운 파일 생성 1. src 카테고리 안에 'pages'라는 폴더 생성 후 js파일 생성(home.js)(나중에 page.js도 만들거니 미리 만들어 두는 게 좋을 듯) 2. home.js 기본 설정 export default function Home(){ return( ) } Router 1. 터미널에 npm install react-router-dom 2. 태그로 를 감싼다. 3. import {BrowserRouter} from 'react-router-dom'; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { B..
1. 버튼 만들기(transition + hover) // //최종 코드 export default function App(){ return( 열전환 ) } 열전환 : w넓이 32, h높이 10, 색깔 bg-blue-500, text에 '열전환'이라는 문구 표시 열전환 rounded: 테두리 둥글게 (-sm: 조금만 ,-xl: 많이, -mx: xl 과 sm의 사이, -xl2: xl보다 더 둥글게, -xl3: xl2보다 더 둥글게) text-색상: text 컬러 바꾸기 font-bold : 폰트 두껍게(sans: 폰트 종류, serif: 폰트 종류, mono: 폰트 종류/ 굵기(thin: 얇게, extralight: 매우 얇게, light: 얇게, normal: 보통, medium: 보통 -> normal과 크게 다르지 않음, semibold: 조금 굵게, ..
0. React-Tailwind 초기 세팅 React 새로운 파일 만들기 1. 터미널 npx create-react-app 폴더명 2. public에서 index.html 빼고 파일 지우기 3. src에서 App.js, index.js, index.css 빼고 지우기 Tailwind 설치하기 'Get started' 클릭 'Create React App' 클릭 터미널 : 1. cd 폴더명 2. npm install -D tailwind 3. npx tailwind init 4. content: ["./src/**/*.{js,jsx,ts,tsx}",] 삽입 @tailwind base; @tailwind components; @tailwind utilities; 5. 에 해당 코드 넣기 6. 해당 코드 삽입 export default function..
JavaScript 문법 - array/object의 값을 수정하고 싶을때 Reference Type - 참조 타입 let data1 = [1,2,3]; let data2 = data1; // data2 == data1 console.log(data1 == data2)//true 자바스크립트에서 array와 object형으로 자료를 만들면, 그 자료들은 RAM이라는 가상공간에 저장되며, array, object로 선언된 변수에는 자료를 가리키는 '메모리 주소'만 저장된다. 즉 위 코드에서 data2라는 변수에는 [1,2,3]을 가리키는 '메모리 주소'가 저장되며, data1은 data2를 그대로 복사한 것이기 때문에 data2에 있는 메모리 주소가 data1에 그대로 복사된 것이다. 따라서 [1,2,3]이라는 값을 [2,3,3]으로 변경시키면 data1, data2 안에 저장되..

티스토리툴바