본문 바로가기
반응형

front end4

Draggable Table, 아이템을 드래그 할 수 있는 테이블 만들기, 테이블 셀 드래그 앤 드롭 See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. 1. Bootstrap 을 CDN 으로 가져와 스타일링을 했고2. Sortable 이라는 CDN 으로 테이블의 아이템을 드래그앤드랍으로 이동시킬 수 있도록 구현3. 나눈 채로 저장을 하려면   // Get all items in Picked Zoneconst pickedItems = Array.from(pickedZone.querySelectorAll('.draggable-item')).map(item => item.dataset.id);// Get all items in List Zoneconst listItems = Array.from(listZone.querySelectorAll('.. 2025. 2. 26.
소셜 공유 버튼 구현, 공유하기 버튼 내가 초대코드를 보내 다른 사람이 가입을 하는 주소를 보내거나 할 때에, 언제까지 내가 주소복사로 공유를 할 수는 없습니다내 기기에 깔려있는 Social 앱들을 통해 공유하는 방법을 알아보겠습니다  See the Pen social share button by Junho Yoon (@junhoyoon95) on CodePen. 이렇게 하면 항상 클립보드에 주소 넣고 복사해 보내는 것과 다르게, 곧바로 share를 할 수 있어 편합니다 여기서 미리보기로는 작동이 잘 안될 수도 있으나, 직접 해당 코드를 edit 해보시거나 사용해보시면 구현을 확인할 수 있습니다 2024. 12. 5.
리뷰 별점주기 구현하기, Star rating ui html See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen. 위는 1점씩 줄 때의 ui 입니다. 만일 0.5 단위로 주고 싶다면 See the Pen star rating half by Junho Yoon (@junhoyoon95) on CodePen. 여러운게 아니니, 빠르게 해결하고 다음 문제를 해결하러 가시죠 2024. 11. 27.
CSS 없이 HTML 로만 텍스트에 밑줄긋기, 취소선 긋기. See the Pen by Junmannn (@Junmannn) on CodePen. 2021. 8. 11.
반응형