SCSS

기술

버튼2026-09-119종

css 버튼 hover 효과 모음 9종 — 수상작에서 반복되는 기법

css 버튼 hover 효과 모음은 마우스를 올렸을 때 버튼이 어떻게 반응하는지를 기법별로 나눠 정리한 것입니다. 아홉 개 중 하나는 누르는 순간 버튼 폭이 원으로 줄어 스피너가 돌고, 끝나면 체크가 그려진 뒤 원래

읽기

피드백2026-09-11

태그 UI 디자인은 상태·카테고리·우선순위 같은 정보를 작은 알약이나 칩 모양으로 압축해 보여주는 장식이다. 온라인 점 하나, 우선순위 색 하나만 봐도 상태를 바로 알 수 있고, 움직임을 더하면 그대로 붙여서 훨씬

embed2026-09-11

블로그 위젯 디자인은 본문 옆이나 아래에 따로 붙어 공유·후기·문의 같은 한 가지 일을 대신하는 작은 카드다. 실제 유튜브·X·구글맵 API 를 불러오지 않고도 그 모양만 CSS 로 흉내 내면, 코드를 몰라도 복붙

아코디언 리스트는 목록 행을 클릭했을 때 그 자리에서 높이가 부드럽게 늘어나며 상세 내용이 펼쳐지는 UI로, 별도 페이지 이동 없이 리스트 화면 안에서 정보를 더 보여주고 싶을 때 씁니다. 리스트 한 줄을 눌렀을 때

본인인증 화면은 사용자가 본인임을 증명하기 위해 권한 요청부터 인증번호 입력, 로그아웃 확인까지 거치는 일련의 UI 조각을 말합니다. 아래 아홉 개는 서버 쪽 인증 로직이 아니라 이 흐름에서 반복되는 화면 패턴만 애

대시보드 컴포넌트는 완성된 관리자 화면을 통째로 붙이지 않고 헤더·피드·캘린더처럼 화면 조각 하나만 그대로 옮겨 쓰는 UI 부품입니다. 아홉 개 중 하나는 Ctrl(⌘)+K로 여는 커맨드 팔레트인데, 방향키로 실제로

선택 UI2026-09-119종

달력 선택 UI는 시작일과 종료일처럼 값 하나가 아니라 범위·묶음을 고르게 해주는 선택 도구입니다. 세그먼트 컨트롤이나 색상 스와치처럼 이미 다뤘던 낱개 선택지 말고, 날짜 범위·가격대·아바타·사이즈+수량·검색 드롭

gallery2026-09-119종

포트폴리오 갤러리는 사진이나 작업물을 격자로 늘어놓고, 마우스를 올리거나 클릭했을 때 확대·정렬·전환이 일어나는 화면입니다. 핀터레스트에 저장해 둔 그 포트폴리오 갤러리를 아홉 가지 방식으로 나눠 그대로 코드로 드립

로딩2026-09-119종

로딩페이지 디자인은 서비스가 켜지는 첫 순간에 사용자에게 "기다리고 있네"라고 말해주는 화면입니다. 기본 스피너 하나로도 되지만, 파스텔 링이나 차오르는 물처럼 예쁜 로딩 화면은 복붙 몇 줄로 사이트 인상을 바꿔 놓

전환2026-09-119종

CSS 화면 전환 효과는 페이지를 새로 불러오지 않고 한 화면 안에서 무엇이 다른 모습으로 바뀔 때, 그 바뀜을 부드럽게 눈에 보여 주는 장치입니다. 장이 바뀌듯 화면이 바뀌는 순간마다 붙일 수 있는 아홉 가지를 전