SCSS

기술

스크롤2026-09-119종

홈페이지 스크롤 효과 9가지 — 애플 페이지처럼 되는 CSS

홈페이지 스크롤 효과는 페이지를 내리는 손가락 하나에 화면이 반응하게 만드는 장치로, 애플 제품 페이지가 이 분야의 기준입니다. 자바스크립트 라이브러리 하나도 없이 CSS만으로 가로 패널·고정 장면 교체·단어 채움·

읽기

버튼2026-09-11

css 버튼 디자인은 버튼의 색과 모양, 마우스를 올렀을 때와 눌렀을 때의 반응까지 코드 몇 줄로 정하는 일이다. 어느 랜딩 페이지에서 본 캔디 같은 그라데이션 버튼, 손끝에 꾹 눌리는 입체 버튼을 내 사이트에 그대

피드백2026-09-11

뱃지 디자인 UI는 상품 썸네일이나 이름 옆에 작게 붙어 지금 상태를 알려주는 라벨 장식이다. NEW·세일·인증·품절처럼 사진 없이 코드 몇 줄로 만들 수 있고, 움직임 하나만 더하면 복붙 몇 줄로도 훨씬 눈에 띈다

gallery2026-09-11

이미지 비교 슬라이더는 사진 한 장 위에 다른 사진을 겹쳐 놓고, 경계선을 움직이면 전과 후가 갈라져 보이는 UI입니다. 리모델링·시술 후기 페이지에서 흔히 보지만 클릭 한 번에 바로 켜지는 동작이라 CSS만으로는

선택 UI2026-09-11

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

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

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

피드백2026-09-119종

CSS 홀로그램 효과는 각도에 따라 빛이 다르게 반사되는 홀로그램 재질을, CSS 그라디언트와 애니메이션만으로 흉내 내는 기법입니다. 포켓몬 카드처럼 빛나는 표면을 눈으로는 자주 보지만 막상 코드로 옮기려면 막막한

gallery2026-09-119종

이미지 갤러리 CSS는 사진 여러 장을 그리드나 워터폴 모양으로 배치하고 호버·클릭에 반응하게 만드는 레이아웃 기법입니다. 핀터레스트에 저장해 둔 그 갤러리처럼 예쁘지만, 막상 코드로 옮기려면 그리드 수식과 크롭 처

스크롤2026-09-109종

CSS 헤더 고정은 스크롤해도 페이지 위쪽 메뉴 줄이 화면에 그대로 붙어 있게 만드는 기능으로, position: sticky 한 줄이면 충분합니다. 여기 아홉 개는 그냥 붙어만 있는 헤더를 넘어, 스크롤하는 동안