CSS만

기술

gallery2026-09-119종

이미지 갤러리 CSS 9종 — 메이슨리부터 라이트박스까지

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

읽기

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

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

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

스크롤2026-09-10

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

피드백2026-09-109종

CSS 텍스트 효과는 제목이나 문장이 화면에 나타날 때 함께 움직이는 연출로, 코드를 몰라도 파일을 그대로 붙이면 바로 쓸 수 있습니다. 이 아홉 가지는 해킹 화면처럼 문장이 풀리는 순간을 노려, 헥스 코드나 이진수

피드백2026-09-109종

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

피드백2026-09-109종

CSS 텍스트 애니메이션은 제목이나 문장이 화면에 나타나거나 강조될 때 함께 움직이는 효과로, 코드를 몰라도 파일을 그대로 붙이면 바로 쓸 수 있습니다. 제목 하나로 눈길 끄는 그 짧은 순간을 만드는 아홉 가지 방법

랜딩 섹션2026-09-109종

프로모션 페이지 섹션 템플릿은 카운트다운 히어로부터 신청 폼까지 캠페인 랜딩에 필요한 구성 요소를 통째로 담은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 아홉 개 중 하나는 실제 목표 시각까지 매초 줄어드는 카운트

랜딩 섹션2026-09-109종

프로젝트 포트폴리오 템플릿은 그리드·케이스 스터디·경력·연락 폼 같은 개인 포트폴리오 페이지 구성 요소를 통째로 담은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 히어로부터 쇼케이스 푸터까지, 아홉 개 중 하나는 탭