개발/코딩
코드 작성, 디버깅, 리팩터링, 테스트 자동화에 AI를 활용하는 실전 흐름을 정리합니다.
388 posts
못 읽은 카카오톡 정리하는 기능은 어떻게 AI로 만들 수 있을까?
1. 카카오톡 모든 메세지를 알림으로 띄운다. 2. 안드로이드폰으로 카카오톡으로 오는 모든 메세지를 훅으로 보낸다 3. 내 서버 홈페이지에서 일별로 혹은 마지막 메세지 간의...
AI 에이전트 스킬을 찾고 활용하는 방법
AI 에이전트 스킬을 찾고 활용하는 방법 AI 에이전트에서 말하는 스킬은 특정 업무를 더 잘 처리하도록 만든 작은 작업 패키지입니다. 보통 하나의 폴더 안에 SKILL.md...
SVG 이미지 최적화 가이드
# SVG 이미지 최적화 가이드 SVG 파일 용량을 줄이는 두 가지 방법을 정리합니다. ## 1. npx 명령어로 즉시 압축 (권장) ### 설치 없이 바로 사용...
transition: 100ms;
transition: 100ms;이 속성은 CSS에서 트랜지션(transition) 효과를 지정하는 것으로, 요소의 속성이 변경될 때 100ms(밀리초) 동안 부드럽게...
게시판 리스트를 CSS Grid로 만들어 보자(designed by Claude)
디자인을 처음에 잘 몰라서 클로드에게 물어봤습니다.클로드가 디자인 설계를 해줬습니다. (만들고나서 보니 이 간단한 것도 잘 생각이 나지 않는 수준인거 같아서 머리가 잘 안...
글자 넘어가는 효과 html js, 세로로 글자 올라가는 효과, 텍스트롤링
참조https://cjw0701.tistory.com/58https://codepen.io/hajaran/pen/BmbJLzhttps://openuri.net/entry/ja...
Aspect Ratio를 알아보자
https://velog.io/@planic324/Aspect-Ratio를-알아보자📌 aspect-ratio 속성값 설명aspect-ratio는 CSS에서 요소의 가로와...
한글자씩 나타나는 타이핑 효과 6가지 예제
https://codepen.io/eond/pen/ogNGOrWhttps://codepen.io/eond/pen/XJWeQLmhttps://codepen.io/eond/pen...
다양한 구성이 매력적인 슬라이더, Flicking (Carousel /Slider)
Flicking은 네이버가 만든 믿을 수 있고 유연하며 확장 가능한 캐러셀입니다. 사용하기 쉬운 플러그인이 포함되어 있습니다. Angular, React, Vue 및...
Flexbox로 왼쪽과 오른쪽 정렬하기: .left, .right 클래스를 활용한 레이아웃 정리 팁
안녕하세요! 오늘은 Flexbox를 사용해서 왼쪽과 오른쪽에 요소들을 정렬하는 방법에 대해 간단하게 공유하려고 합니다.특히 **margin-left: auto;**나...
SNS 공유 버튼
참조코드<div class="sns-share-buttons"> <!-- 네이버 블로그 공유 --> <a...
스크롤 스내핑 효과 구현하기
구현한...
CSS Grid를 배워보는 링크
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rowshttps://developer.mozilla.org/...
swiper random shuffle
https://shra.ru/2021/03/peremeshivaem-slajjdy-pered-nachalom-raboty-v-swiper-js/
swiper.js 숫자 페이징
https://codepen.io/eond/pen/bGKKOYE
swiper.js 기본 템플릿 코드
https://codepen.io/eond/pen/bGKKevy See the Pen Untitled by eond (@eond) on CodePen. 출처 :...
safari select background glory style
맥북 사파리를 쓰다보니 사파리에서의 select 태그는 모양이 좀 다르더군요.background:...
css 글자 나누기
word-break: keep-all;
SVG PATH EDITOR (코드로 SVG 패스 만들기)
SVG PATH EDITOR(이하 'SPE')는 브라우저에서 직접 점을 찍고 PATH 커브를 지정할 수 있습니다.처음 브라우저를 열면 칼이 나오는데 좌측 상단 PATH...
ckeditor5
https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/predefined-bu...