본문 바로가기

분류 전체보기35

react vite 비트 이미지 최적화 방법 원래는 이미지 불러올떄 이렇게 쓰는데 div>        img src={"/emotion1.png"} />        img src={"/emotion1.png"} />        img src={"/emotion1.png"} />        img src={"/emotion1.png"} />        img src={"/emotion1.png"} />      div> vite 이미지를 최적화하기 위해서는 이렇게 불러와놓고 하단에 넣어주는 형식으로 해야하는데만약 이미지가 100개면 다 이런식으로 하면 너무 많을꺼 같아서 다른방법을 찾아보았다.import emotion1 from './assets/emotion1.png';import emotion2 from './assets/emotion2.. 2024. 6. 9.
flex gap을 써서 간격 조절하는법 1. flex써서 %로 간격을 맞출경우 부모에게 gap을 줄 경우2. width: calc(33.333% - 13.4px);20px(gap) * 2(3개일때 2군데 여백) / 3열  => 40/3=13.333 (올림 해준다)     See the Pen flex gap % by uni (@agosto) on CodePen. 2024. 6. 7.
깃 초기설정 깃 커밋할때 내이름 설정git config --global user.email "you@example.com" git config --global user.name "Your Name" 2024. 6. 3.
vuetify2 뷰티파이2는 이미 서비스가 끝나서 뷰티파이3나 퀘이사를 공부해야하지만뷰티파이 강좌가 2버젼이라서 한번 사용해보기로 함  -------------------vue2 (vutify2) 뷰티파이2 사이트 https://v2.vuetifyjs.com/en/mdi아이콘 https://pictogrammers.com/library/mdi/샘플이미지무료 사이트 https://pixabay.com/ko/인프런 강좌(무료) : Vuetify Admin Template 만들기 - 기본편 (Based Vue2) 짐코딩 https://www.inflearn.com/course/lecture?courseSlug=%EB%B7%B0%ED%8B%B0%ED%8C%8C%EC%9D%B4-%EC%96%B4%EB%93%9C%EB%AF%BC-.. 2024. 6. 2.
날짜 스와이프 모바일앱에 보면 날짜를 스와이프하는 형식 See the Pen 스와이프로 날짜선택하기 by uni (@agosto) on CodePen. 2024. 5. 30.
레이어팝업 웹접근성 포커스 이동 1. 버튼 클릭했을때 레이어팝업 가져오기2. 닫기를 눌렀을때 포커스를 클릭한 버튼으로 이동3. 딤 눌렀을때 닫힘 * 제이쿼리See the Pen 레이어팝업 by uni (@agosto) on CodePen.* 자바스크립트See the Pen 레이어팝업 javascript by uni (@agosto) on CodePen.이 코드는 jQuery를 사용하지 않고 순수 자바스크립트를 사용하여 동일한 기능을 구현합니다. 주요 변경 사항은 다음과 같습니다:$("id")  => document.getElementById를 사용하여 요소를 선택합니다.document.createElement를 사용하여 새로운 요소를 만듭니다.element.style.display를 사용하여 요소의 표시 상태를 변경합니다.eleme.. 2024. 5. 29.