[CSS ] 19. 카드 리스트 + 필터 UI + 뱃지/칩이 글은 카드 UI를 리스트/갤러리 형태로 구성하고,필터 버튼(칩)과 뱃지/태그를 함께 배치하는 예제를 정리한 글이다.예제는 CodePen 결과 화면을 iframe으로 불러와티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.예제 구성 필터 UI: 칩(Chip) 버튼 스타일 보기 전환 UI: segmented 버튼 스타일 카드 리스트: Grid 기반 3열 → 2열 → 1열 반응형 뱃지/태그: badge / tag 컴포넌트예제 실행 화면정리 필터 UI는 버튼을 칩 형태로 만들고 active 상태를 분리하면 된다. 카드는 Grid로 배치하면 반응형 열 전환이 쉽다. 뱃지/태그는 재사용 컴포넌트로 만들면 효율이 좋다. 실제 필터 동작은 Ja..
[CSS ] 18. UI 예제 (탭 / 아코디언 / 페이지네이션)이 글은 자주 사용되는 UI 구성 요소 3가지를 예제로 정리한 글이다.예제는 CodePen 결과 화면을 iframe으로 불러와티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.예제 구성 탭 메뉴: :target을 이용한 CSS only 탭 아코디언: details/summary 기반 접기/펼치기 페이지네이션: active 상태 표시예제 실행 화면정리 탭은 해시(#)와 :target을 이용해 JS 없이도 동작 흐름을 이해할 수 있다. 아코디언은 details/summary로 구현하면 접근성과 구현 난이도가 좋다. 페이지네이션은 active 클래스로 현재 상태를 표현한다. 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
[CSS ] 17. UI 예제 (모달 / 드롭다운 / 토스트)이 글은 자주 사용되는 UI 컴포넌트 3가지를CSS 중심으로 구성한 예제이다.예제는 CodePen 결과 화면을 iframe으로 불러와티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.예제 구성 모달: :target을 이용한 CSS only 모달 드롭다운: details/summary 기반 메뉴 토스트: animation 기반 알림 표시예제 실행 화면정리 :target을 사용하면 JS 없이도 모달을 제어할 수 있다. details/summary는 접근성과 구현 난이도가 좋은 드롭다운 방법이다. 토스트는 position + animation으로 간단히 구현할 수 있다. 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
[CSS ] 16. 미니 페이지 3종 (상품 / 댓글 / 알림)이 글은 실전에서 자주 사용하는 UI 구성 요소를HTML과 CSS로 구현한 예제이다.예제 구성 상품 카드: 이미지 + 정보 + 버튼 댓글: 프로필 + 내용 + 액션 알림: 리스트 형태 알림 UI예제 실행 화면정리 Flex는 카드 내부 정렬에 유용하다. 리스트 UI는 padding과 border로 구분감을 준다. 반응형은 구조를 바꾸지 않고 방향만 전환해도 충분하다.
[CSS ] 15. 미니 페이지 2종 (로그인 / 프로필)이 글은 HTML 구조와 CSS 스타일을 이용해간단한 카드형 미니 페이지 2종을 만든 예제이다.예제는 CodePen 결과 화면을 iframe으로 불러와티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.예제 구성 로그인 카드: 입력창 + 버튼 + hover 프로필 카드: 프로필 영역 + 통계 영역(Grid) + 버튼 반응형: 화면 크기에 따라 2열 → 1열로 변경예제 실행 화면정리 입력 요소는 width: 100%로 맞추면 정렬이 깔끔하다. Grid는 카드 내부(통계 영역) 구성에도 유용하다. 반응형은 Media Query로 열 개수를 조절하는 방식이 간단하다. 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
[CSS ] 14. 미니 페이지 반응형 템플릿이 글은 미니 페이지 예제를 기반으로화면 크기에 따라 레이아웃이 변경되는반응형 템플릿을 정리한 글이다.CSS Media Query를 사용하여데스크톱과 작은 화면에서구성이 어떻게 달라지는지를 확인한다.1. 예제에서 확인할 항목 전체 페이지 레이아웃 구조 Grid / Flex 기반 배치 화면 크기에 따른 카드 배치 변화 메뉴 영역 반응형 처리2. 반응형 구성 개요 넓은 화면 : 카드 영역 다열 배치 중간 화면 : 카드 영역 2열 배치 작은 화면 : 카드 영역 1열 배치3. 미니 페이지 반응형 예제 실행 화면아래는 CodePen 결과 화면이다.브라우저 너비를 줄이거나 늘려레이아웃 변화를 직접 확인할 수 있다.4. 정리 반응형은 하나의 HTML 구조를 ..
[CSS ] 13. HTML + CSS 미니 페이지 예제이 글은 HTML 구조와 CSS 스타일을 함께 적용한간단한 미니 페이지 예제를 정리한 글이다.페이지 구성은 header / main / footer 형태이며,CSS는 레이아웃(배치), 여백, 테두리, hover 반응을 포함한다.1. 예제에서 확인할 항목 전체 레이아웃을 영역 단위로 나누는 방법 header에서 로고/메뉴 배치 main에서 카드 목록을 Grid로 배치 버튼 hover로 간단한 반응 추가 화면이 좁아질 때 카드 배치 변화2. 페이지 구조 header : 상단 영역(브랜드, 메뉴) main : 본문 영역(제목/설명 + 카드 목록) footer : 하단 정보 영역3. 미니 페이지 예제 실행 화면아래는 CodePen 결과 화면이..
[CSS ] 12. Grid 레이아웃 예제 모음이 글은 Grid 레이아웃을 예제로 정리한 글이다.예제는 CodePen 결과 화면을 iframe으로 불러와티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.예제 목록 기본 3열 Grid 고정 + 유동 (200px + 1fr) gap 예제 grid-column / grid-row grid-template-areas예제 실행 화면정리 Grid는 행과 열 기반으로 화면을 구성한다. grid-template-columns/rows로 격자 구조를 만든다. gap은 아이템 사이 간격을 조절한다. grid-column, grid-row로 특정 아이템의 범위를 지정한다. grid-template-areas로 영역 단위 배치를 만들 수 있다.