https://codesandbox.io/s/portfolio-pu8p23?file=/src/Count.js:478-485 portfolio - CodeSandbox portfolio using @emailjs/browser, @emotion/react, @emotion/styled, @mui/icons-material, @mui/material, react, react-countup, react-dom, react-router-dom codesandbox.io 스크롤이 해당 영역에 들어왔을 때 이벤트 컨트롤 가능

구현하고자 하는 기능 해당 영역에 스크롤이 도착하면 원하는 애니메이션이 작동하는 클래스를 토글시키기 사용 element.getBoundingClientRect() DOM요소의 크기와 브라우저 뷰포트를 기준으로 상대적인 위치에 대한 정보를 제공 하는 객체를 반환합니다. getBoundingClientRect는 화면에서 잡은 dom이 어디에 위치한 지 알기 위해 사용합니다. return값은 해당 dom의 width, height, top, left, right, bottom, x, y이며 width와 height는 뷰포트 왼쪽 상단을 기준으로 한다. useRef() react에서는 querySelector 등의 dom을 선택할 수 있는 메서드를 사용할 수 없기때문에 이를 대신하는 useRef()로 dom을 ..

input[type=date]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field { color:#4e4e4e; }

input[type='date']가 처음 로딩됐을 떄 placehorder의 내용으로 보여지게 하고 날짜를 선택하면 해당 날짜가 보여지게 함 HTML CSS input[type="date"] {position:relative; padding:14px; width:150px; height:30px; font-size:14px; color:#999; border:none; border-bottom:1px solid #e0e0e0;} input[type="date"]::-webkit-calendar-picker-indicator {position:absolute; top:0; left:0; right:0; bottom:0; width:auto; height:auto; color:transparent; back..

구현하고자 하는 복사 형식은 동일한 구조가 여러개 있는 리스트 형식에서 각각의 내용을 복사해야 하는 것이다. 복사할 내용 1 복사하기 // button 혹은 아이콘 등 복사할 내용 1 복사하기 // button 혹은 아이콘 등 1. document.execCommand document.execCommand()함수는 웹 표준에서 deprecated (추천하지 않음) 되어 편집기에서 사용할 경우 취소선으로 작성되지만 현재(22년 11월)까지 작동은 된다. $('.copyBtn').on('click', function(){ const copyText = $(this).silblings().text(); // 복사가 될 요소의 내용 가져오기 const textArea = document.createElemen(..

1. 패키지 설치 Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지 설치 npm i @fortawesome/fontawesome-svg-core Font Awesome에 대한 패키지 설치 Solid, Regular, Light, Brands 4개의 카테고리가 있으며 이 안에 유/무료가 있음 무료로 제공되는 카테고리는 Solid, Regular, Brands이며 필요한 것만 설치하면 됨 npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/free-regular-svg-icons npm i @fortawesome/free-brands-svg-icons 마지막으로 Font Awesome을 리액트 컴포넌트 형태로 사용할 수 있도록..