달력 선택 UI 9종 — 복붙하면 되는
달력 선택 UI는 시작일과 종료일처럼 값 하나가 아니라 범위·묶음을 고르게 해주는 선택 도구입니다. 세그먼트 컨트롤이나 색상 스와치처럼 이미 다뤘던 낱개 선택지 말고, 날짜 범위·가격대·아바타·사이즈+수량·검색 드롭
읽기폼·입력
용도
회원가입 폼 디자인 입력창 9가지 — 붙이면 바로 되는 코드
회원가입 폼 디자인에서 사람이 처음으로 손대는 곳은 버튼이 아니라 입력창입니다. 여기 아홉 개는 이메일 칸부터 지우기 버튼까지 회원가입 화면에 실제로 들어가는 입력창이고, 코드를 붙이면 그대로 움직입니다.
입력창 디자인 9가지 — 복붙하면 되는 폼 위젯
입력창 디자인은 전화번호, 카드 번호, 수량, 태그처럼 회원가입·결제 폼에서 자주 보이지만 순수 HTML만으로는 제대로 동작하지 않는 입력 위젯을 말합니다. 아홉 개 중 다섯 개(태그·자동늘어남·드래그드롭·재전송타이
세그먼트 컨트롤 선택 UI 9종 — 복붙하면 되는
세그먼트 컨트롤은 iOS 설정 화면에서 자주 보이는, 여러 선택지 중 하나를 고르면 배경 알약이 그 칸으로 미끄러져 가는 탭 전환 버튼입니다. 세그먼트 컨트롤부터 칩 필터·이모지 리액션·컬러 스와치까지, 이름은 몰라
로그인 화면 디자인 9가지 — 복붙 가능한 카드 UI
로그인 화면 디자인은 이메일·비밀번호 칸과 버튼 몇 개로 끝나는 것 같지만, 실제로는 카드 재질·화면 분할·단계 진행·오류 알림까지 아홉 가지 결정이 쌓여 만들어집니다. 그중 하나는 팝업 모달 대신 이미 열린 화면
CSS 흔들리는 애니메이션 9종 — 폼 에러 표시
비밀번호를 잘못 입력했을 때 입력창이 좌우로 흔들리는 걸 본 적 있으신가요? 그 동작이 바로 css 흔들리는 애니메이션입니다 — 자바스크립트 없이 CSS 코드 몇 줄만으로 폼이 틀렸다는 걸 눈에 띄게 알려줍니다. 아
CSS 입력창 검색창 포커스 애니메이션 9종 — 한 줄 복붙으로
CSS 입력창 애니메이션은 클릭하기 전·클릭한 순간·값을 다 채운 뒤까지 브라우저가 이미 쥐고 있는 :focus :focus-within :placeholder-shown :valid :invalid 상태를 그대로
CSS 체크박스 커스텀 라디오 애니메이션 9종 — 한 줄 복붙으로
CSS 체크박스 커스텀은 브라우저 기본 네모난 체크박스·동그란 라디오의 <input> 은 지우지 않고 그대로 둔 채, 옆에 놓은 도형만 :checked 하나로 다시 그리는 방법입니다. 아홉 개를 모았고, 그중 하나는
CSS 토글 스위치 9종 — 한 줄 복붙으로
CSS 토글 스위치는 <input type="checkbox"> 하나로 실제 켜고 끌 수 있으면서 트랙과 노브의 위치·색·아이콘만 다르게 꾸민 컨트롤입니다. 아홉 가지를 모았고 전부 transform·opacity
CSS 툴팁 말풍선 9종 — 한 줄 복붙으로
CSS 툴팁 말풍선은 버튼이나 아이콘에 커서를 올리거나 포커스를 두었을 때 짧은 설명을 그 옆에 띄우는 작은 말풍선으로, 이 글은 자바스크립트 없이 대부분 순수 CSS로 돌아가는 아홉 가지 방식을 모았습니다. 아홉