const StyledRadio = styled.input.attrs({ type: 'checkbox' })` -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 50%; outline: none; cursor: pointer; &:checked { background-color: #22d3ee; // 체크 시 원형 색깔 background-clip: content-box; //컨텐츠 영역만 색칠(원래는 컨텐츠+패딩 색칠) padding:2px; // 보더와 컨텐츠 사이 빈공간 생성 }`;
프론트엔드
https://mui.com/material-ui/getting-started/installation/ mui를 꼭 npm한 후 진행 import * as React from "react"; import { useTheme } from "@mui/material/styles"; import Box from "@mui/material/Box"; import MobileStepper from "@mui/material/MobileStepper"; import SwipeableViews from "react-swipeable-views"; import { autoPlay } from "react-swipeable-views-utils"; import styled from "styled-components"; ..
import styled from 'styled-components'; // 기본 스타일 const Button = styled.button` background-color: ${(props) => (props.primary ? 'blue' : 'green')}; color: ${props => props.color || 'black'}; /* props로 전달된 color 값이 없으면 기본값은 검정색 */ padding: 10px; border: none; `; // 예제에서 사용할 컴포넌트 const MyComponent = () => { return ( {/* primary prop이 true인 경우 파란색 배경, 그렇지 않으면 녹색 배경 */} Primary Button Secondary Butt..
// eslint-disable-next-line react-hooks/exhaustive-deps 추가 // 예시 useEffect(() => { calcSumApplication(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [allApplication]);
모든 시간 두자리로 만들기 ////////// 현재 시간 반환 함수(모든 수 두자리) const currentTime = () => { // 현재 시각을 나타내는 JavaScript Date 객체 생성 const t = new Date(); // 년, 월, 일, 시, 분, 초 추출 const year = t.getFullYear(); const month = String(t.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 1을 더하고, padStart로 두 자리로 만듭니다. const day = String(t.getDate()).padStart(2, "0"); // 일도 padStart로 두 자리로 만듭니다. const hours = String(t.getHou..
arr="01012345678" replaceArr = arr.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3"); console.log(replaceArr); //010-1234-5761 반환
