분류 전체보기35 vue3+bootstrap5 크롬 웹스토어 vue.js devtools 검색 vscode 플러그인 vetur은 뷰2용이라서 아래설치시 비활성화 volar 볼라(뷰3용) vue vscode snippets ---------------------- npm init vue@latest project name: learn-vue3 jslint ok 프리티어 ok 라우터와 피니아 둘다 직접 설치할꺼기때문에 저기까지만 설치 npm install npm run dev components>icons> 안에 파일 안쓰는거 삭제 base.css 삭제 app.vue 임포트 된거랑 안에 내용 지우고 정리 v-bind 축약형 v-bind:title="aaTitle" :title="aaTitle" ------------------- !!!!뷰에 부트스트.. 2024. 6. 20. 인풋 삭제 버튼 표시 input delete버튼 javascript 1. 인풋에 텍스트 입력시 삭제버튼 보이기2. 삭제버튼 누르면 입력된값 삭제3. disabled 됐을때는 삭제버튼 안보이기4. value값 있을때는 삭제버튼 보이기 See the Pen Untitled by uni (@agosto) on CodePen. 2024. 6. 20. react+storybook+tailwind 타입스크립트 기반으로 스토리북과 테일윈드를 사용해서 컴퍼넌트를 만들어보았다.근데 아래와 같은 기본인풋 타입인데도 불구하고 돈을 내란다아예 새로 만드는게 나을꺼같은데 뭐가 장점인지 모르겠다스토리북은 하나 만들어 놓으면 좋겠지만 시간이 너무 오래걸린다찾아보니 mui도 있었지만 이것도 커스텀하는데 시간이 너무 오래 소요된다고 한다 npm create vite@latest project name : design-system-test select a framework : react select a variant : typescript npm install ##https://www.npmjs.com/package/jason-kang-ui 여기 링크대로 진행 1. npm install jason-kang-ui.. 2024. 6. 16. vertical card swiper 세로형 카드 스와이프 https://www.youtube.com/watch?v=B8-cTdaUuRQ현대카드 다이브 GitHub - JoniVR/VerticalCardSwiper: A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift. - JoniVR/VerticalCardSwipergithub.com 상단처럼 효과를 주고싶은데 저 링크는 앱에서 사용하는거 같아서스와이퍼 플러그인을 활용해본다. 1. 위 아래로 스와이프시 겹쳐서 수직 이동2. 오른쪽 왼쪽 .. 2024. 6. 14. 라운드 마스킹 border-radius 위아래형 이미지 아닌 css로만 왼쪽은 위 라운드 / 오른쪽은 아래 라운드로 있을때 어떻게 해야할까?이미지로 깔려면 100%?? 로해야하는데저 이미지가 계속 바뀌는 이미지라서 저렇게 통째로 자르면 안된다===>왼쪽은 그냥 일반적으로 보더레디어우스 사용해서 깔고 오른쪽은 저런모양으로 오른쪽에 깔면된다!! 신기방기 See the Pen round masking only css by uni (@agosto) on CodePen. 2024. 6. 13. 탭 접근성 javascript ## 접근성 aria-selected="true" 선택된 상태다 (aria-selected="false" 선택이 되지 않은상태다) aria-hidden="false" 보이는 상태다 (aria-hidden="true" 보이지 않는 상태다) role="tablist" 난 탭이라는 자식들을 가지고 있다 role="tab" 난 탭이라는 자식이다 aria-controls="tab-panel-1" 내가 탭일떄 선택되는 콘텐츠를 연결해준다 role="tabpanel" 나는 탭의 선택했을때 나오는 콘텐츠다 aria-labelledby="tab-1" aria-labelledby="탭1" 난 첫번째 탭의 내용을 가져오는 거다 하고 설명해주는 레이블 한글로 적어도 상관없다 이 요소가 뭔지 설명해주는 부분이다 ##javas.. 2024. 6. 13. 이전 1 2 3 4 5 6 다음
