랜딩 페이지

용도

스크롤2026-09-119종

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

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

읽기

버튼2026-09-11

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

i18n2026-09-11

홈페이지 다국어 처리는 번역문을 언어팩 파일에 넣었다고 끝나지 않는다. 키가 한쪽에만 있으면 영어판 버튼이 빈 채로 남고, 자리표시자가 어긋나면 이름이 빠진 인사말이 나간다. 여기 아홉 가지 검사를 브라우저 콘솔에

gallery2026-09-11

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

뉴모피즘 디자인은 카드나 버튼의 배경색을 화면 배경과 거의 같게 두고, 밝은 그림자와 어두운 그림자를 반대 방향으로 얹어 색이 아니라 그림자만으로 입체감을 만드는 스타일입니다. 이름도 모르고 어떻게 만드는지도 몰랐던

gallery2026-09-119종

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

HUD 디자인은 게임이나 SF 영화 속 조준경·레이더처럼, 화면 위에 좌표·상태 수치를 얹어 마치 나를 지켜보고 있는 듯한 인상을 주는 인터페이스 스타일입니다. 이 편은 그 감시 카메라 감성을 실제로 돌아가는 랜딩

Y2K 웹 디자인은 2000년대 CD·홀로그램 포장지의 크롬 금속광과 무지개 반사를 다시 불러온 홈페이지 스타일입니다. CD 뒷면에 번지던 무지개가, 이번엔 버튼과 헤드라인 글자 안으로 들어왔습니다. 아홉 개 부품

네오브루탈리즘 UI는 두꺼운 먹색 테두리와 번짐 없는 직각 그림자, 채도 높은 원색 블록으로 화면을 가감 없이 드러내는 디자인 스타일입니다.

피드백2026-09-109종

CSS 카드 효과는 마우스를 올리거나 카드를 선택했을 때 상품·포스트 카드가 살짝 움직이면서 정보를 더 보여주는 짧은 시각 변화입니다. 상품·포스트 카드에 바로 붙일 수 있는 아홉 가지를 실제로 렌더링해서 모았고,