바닐라 JS

기술

이메일 템플릿 디자인 9종 — 웰컴부터 보안 알림까지

이메일 템플릿 디자인은 완성된 뉴스레터 하나를 예쁘게 꾸미는 일이 아니라, 웰컴·영수증·비밀번호 재설정처럼 서비스가 실제로 자동 발송하는 아홉 가지 "거래형" 메일 종류별로 나눠 만드는 일입니다. 아홉 개 중 하나는

읽기

입력 UI2026-09-11

입력창 디자인은 전화번호, 카드 번호, 수량, 태그처럼 회원가입·결제 폼에서 자주 보이지만 순수 HTML만으로는 제대로 동작하지 않는 입력 위젯을 말합니다. 아홉 개 중 다섯 개(태그·자동늘어남·드래그드롭·재전송타이

선택 UI2026-09-11

세그먼트 컨트롤은 iOS 설정 화면에서 자주 보이는, 여러 선택지 중 하나를 고르면 배경 알약이 그 칸으로 미끄러져 가는 탭 전환 버튼입니다. 세그먼트 컨트롤부터 칩 필터·이모지 리액션·컬러 스와치까지, 이름은 몰라

스와이프 삭제는 리스트 항목을 옆으로 밀면 뒤에 숨어 있던 삭제 버튼이 드러나는 동작으로, 인스타·배민 앱에서 본 그 동작입니다. 이 글은 스와이프 삭제를 포함해 당겨서 새로고침·드래그 정렬·고정 헤더·페이지네이션까

로그인 화면 디자인은 이메일·비밀번호 칸과 버튼 몇 개로 끝나는 것 같지만, 실제로는 카드 재질·화면 분할·단계 진행·오류 알림까지 아홉 가지 결정이 쌓여 만들어집니다. 그중 하나는 팝업 모달 대신 이미 열린 화면

대시보드 사이드바 하나, 통계 카드 한 줄, 알림 드롭다운 하나처럼 완성된 관리자 페이지 전체가 아니라 화면 한 조각만 그대로 가져다 붙이는 대시보드 위젯 아홉 개를 모았습니다. 아홉 개 중 하나는 숫자가 실제로 세

피드백2026-09-109종

CSS 입력창 애니메이션은 클릭하기 전·클릭한 순간·값을 다 채운 뒤까지 브라우저가 이미 쥐고 있는 :focus :focus-within :placeholder-shown :valid :invalid 상태를 그대로

피드백2026-09-099종

CSS 카드 애니메이션은 카드 컴포넌트가 마우스나 포커스에 반응해 뜨거나 빛나거나 기울어지는 짧은 시각 변화를 말합니다. 카드 호버 효과 아홉 가지를 한 번에 모았고, 커서 좌표가 필요한 두 개는 JS를 10줄 안팎

입력 UI2026-09-099종

인증번호 입력 UI는 6자리 숫자를 한 칸씩 나눠 받는 폼 부품으로, 다음 칸 이동부터 붙여넣기·오류 처리까지 한 번에 챙겨야 동작이 매끄러워집니다. 아홉 개 중 하나는 화면에 아무것도 안 보여도 실제로는 코드를 통

전환2026-09-099종

CSS 모달 팝업 애니메이션 아홉 개를 한 번에 모았습니다. 확인창부터 바텀 시트, 팝오버, 겹쳐 열리는 모달까지 실무에서 자주 쓰는 장면을 아홉 가지로 나눠 담았고, 전부 transform과 opacity만(배경