개발/코딩
코드 작성, 디버깅, 리팩터링, 테스트 자동화에 AI를 활용하는 실전 흐름을 정리합니다.
389 posts
dashboard 종류
shadcn-adminhttps://www.shadcn.io/template/satnaing-shadcn-adminuntitleduihttps://www.untitledui....
못 읽은 카카오톡 정리하는 기능은 어떻게 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...
dashboard 종류
shadcn-adminhttps://www.shadcn.io/template/satnaing-shadcn-adminuntitleduihttps://www.untitledui.com/react/components/dashboardsheroui-prohttps://heroui.pro/...
못 읽은 카카오톡 정리하는 기능은 어떻게 AI로 만들 수 있을까?
1. 카카오톡 모든 메세지를 알림으로 띄운다. 2. 안드로이드폰으로 카카오톡으로 오는 모든 메세지를 훅으로 보낸다 3. 내 서버 홈페이지에서 일별로 혹은 마지막 메세지 간의 간격으로 주제별로 묶은 뒤, AI API를 활용하여 해당 텍스트를 요약한다.
AI 에이전트 스킬을 찾고 활용하는 방법
AI 에이전트 스킬을 찾고 활용하는 방법 AI 에이전트에서 말하는 스킬은 특정 업무를 더 잘 처리하도록 만든 작은 작업 패키지입니다. 보통 하나의 폴더 안에 SKILL.md 파일이 있고, 필요하면 참고자료, 템플릿, 스크립트, 예제 파일이 함께 들어갑니다. 문서 작성, PPT...
SVG 이미지 최적화 가이드
# SVG 이미지 최적화 가이드 SVG 파일 용량을 줄이는 두 가지 방법을 정리합니다. ## 1. npx 명령어로 즉시 압축 (권장) ### 설치 없이 바로 사용 ```bash # 단일 파일 압축 npx svgo input.svg -o output.svg # 폴더 내 모든 SVG...
transition: 100ms;
transition: 100ms;이 속성은 CSS에서 트랜지션(transition) 효과를 지정하는 것으로, 요소의 속성이 변경될 때 100ms(밀리초) 동안 부드럽게 변화하도록 설정하는 것이다.기본 문법:css코드 복사transition: [속성] [지속시간] [타이밍 함수]...
게시판 리스트를 CSS Grid로 만들어 보자(designed by Claude)
디자인을 처음에 잘 몰라서 클로드에게 물어봤습니다.클로드가 디자인 설계를 해줬습니다. (만들고나서 보니 이 간단한 것도 잘 생각이 나지 않는 수준인거 같아서 머리가 잘 안 돌아가는거 같군요. )https://codepen.io/eond/pen/gbOLppx처음엔 반응형으로...
글자 넘어가는 효과 html js, 세로로 글자 올라가는 효과, 텍스트롤링
참조https://cjw0701.tistory.com/58https://codepen.io/hajaran/pen/BmbJLzhttps://openuri.net/entry/javascript-공지사항-텍스트-세로-롤링이건 타이핑 효과네요https://uiweb.tistory.com/45
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/ZYEXeOZhttps://codepen.io/eond/pen/zxYEZGVhttps://codepen.i...
다양한 구성이 매력적인 슬라이더, Flicking (Carousel /Slider)
Flicking은 네이버가 만든 믿을 수 있고 유연하며 확장 가능한 캐러셀입니다. 사용하기 쉬운 플러그인이 포함되어 있습니다. Angular, React, Vue 및 모든 주요 프레임 워크 지원합니다.메인슬라이드 또는 최신글 스킨에 적용할 수...
Flexbox로 왼쪽과 오른쪽 정렬하기: .left, .right 클래스를 활용한 레이아웃 정리 팁
안녕하세요! 오늘은 Flexbox를 사용해서 왼쪽과 오른쪽에 요소들을 정렬하는 방법에 대해 간단하게 공유하려고 합니다.특히 **margin-left: auto;**나 **형제 선택자(~)**를 활용한 방법으로 정렬을 할 때 유용한 팁이 될 것입니다.문제 상황우리는 여러 개의...
SNS 공유 버튼
참조코드<div class="sns-share-buttons"> <!-- 네이버 블로그 공유 --> <a href="https://share.naver.com/web/shareView.nhn?url=https://eond.com&title={TITLE}"...
스크롤 스내핑 효과 구현하기
구현한...
CSS Grid를 배워보는 링크
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rowshttps://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layouthttps://yamoo9.gitbook.io/css...
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. 출처 : https://lpla.tistory.com/147위 기본에서 추가로 마우스 올리면 정지, 마우스 떼면 다시...
safari select background glory style
맥북 사파리를 쓰다보니 사파리에서의 select 태그는 모양이 좀 다르더군요.background:...
css 글자 나누기
word-break: keep-all;
SVG PATH EDITOR (코드로 SVG 패스 만들기)
SVG PATH EDITOR(이하 'SPE')는 브라우저에서 직접 점을 찍고 PATH 커브를 지정할 수 있습니다.처음 브라우저를 열면 칼이 나오는데 좌측 상단 PATH 입력칸을 지우면 모두 지워집니다.그리고 COMMANDS에 보면 M, C, Z라고 나오는데M은 좌표 시작점, C는...
dashboard 종류
못 읽은 카카오톡 정리하는 기능은 어떻게 AI로 만들 수 있을까?
AI 에이전트 스킬을 찾고 활용하는 방법
SVG 이미지 최적화 가이드
transition: 100ms;
게시판 리스트를 CSS Grid로 만들어 보자(designed by Claude)
글자 넘어가는 효과 html js, 세로로 글자 올라가는 효과, 텍스트롤링
Aspect Ratio를 알아보자
한글자씩 나타나는 타이핑 효과 6가지 예제
다양한 구성이 매력적인 슬라이더, Flicking (Carousel /Slider)
Flexbox로 왼쪽과 오른쪽 정렬하기: .left, .right 클래스를 활용한 레이아웃 정리 팁
SNS 공유 버튼
스크롤 스내핑 효과 구현하기
CSS Grid를 배워보는 링크
swiper random shuffle
swiper.js 숫자 페이징
swiper.js 기본 템플릿 코드
safari select background glory style
css 글자 나누기