sliver__

1. 내비게이션 컴포넌트기본 메뉴 + 서브메뉴상단 바에 링크만 두거나, 링크에 호버/클릭 시 작은 박스 형태의 서브메뉴를 띄움확장된 서브메뉴더 많은 링크나 설명을 담기 위해 큰 박스로 팝업전체 너비 패널로 펼쳐 페이지 전체에 메뉴·설명을 제공사이드바 내비게이션 & 오버레이 메뉴IBM·Apple처럼 아이콘·이미지를 곁들인 메뉴모바일·데스크톱 모두에서 페이지 위에 전체 네비게이션 오버레이세컨더리 내비게이션현재 주 메뉴 항목 아래에 추가 메뉴 바 배치큰 사이트 구조에서 사용자 위치 파악 및 이동 편의 제공2. 히어로 섹션 트렌드텍스트 ↔ 이미지 분할 레이아웃배경 이미지 위 텍스트 (5년 전 인기, 현재는 감소 추세)텍스트 상단 → 이미지 하단이 세 가지를 혼합한 하이브리드도 가능3. 푸터(Footer)사이트맵..

개요이번서는 자바스크립트 없이 CSS와 HTML만으로 “카루셀” 컴포넌트를 구현하는 과정을 다룹니다. 기본적인 HTML 구조를 작성한 뒤, CSS 변수와 글로벌 스타일을 적용하고, 그리드 레이아웃(Grid), 플렉스박스(Flexbox), transform: scale() 등을 활용해 이미지를 띄우고 그림자 효과를 주는 방법을 배웁니다. 마지막으로 내비게이션 버튼(이전/다음)은 위치만 잡아두고, 다음 강의에서 절대 위치(Absolute positioning)로 처리합니다.1. HTML 구조 작성최상위 컨테이너: 이미지: 테스트imonial: 내부에 .testimonial-text, .testimonial-author, .testimonial-job네비게이션 버튼: 두 개의 … Mari..

이번 글에서는 지난 글에서 만든 HTML 구조에 CSS Grid와 Flexbox를 결합하여 아코디언 항목(layout)을 완성하는 방법을 살펴봅니다. 또한, JavaScript 없이 CSS 클래스만으로 열림(open) 상태를 제어하는 트릭을 상세히 다룹니다.1. .item 컨테이너 스타일링그림자(Shadow).item { box-shadow: 0 0 10px rgba(0,0,0,0.1);}내부 여백(Padding).item { padding: 24px;}상단 강조선열린(open) 상태에만 초록색 4px border-top 추가2. CSS Grid로 3열 레이아웃 구성.item에 Grid 적용첫 번째 열(auto): 번호 너비두 번째 열(1fr): 제목과 확장 영역세 번째 열(auto): 아이콘.ite..

이번 글에서는 JavaScript 없이 HTML과 CSS만으로 아코디언(Accordion) 컴포넌트를 만드는 과정을 자세히 설명합니다. VS Code 멀티 커서, Heroicons SVG 활용, Flexbox의 gap 등을 적용해 깔끔하고 확장 가능한 구조를 설계합니다.1. 프로젝트 초기 설정스타일링 방식컴포넌트별 외부 파일 대신 태그로 자체 포함2. HTML 마크업 구조 01 상품 반품 기한은 어떻게 되나요? … 반품 요청 후 30일 이내에 상품을 보내주시면 됩니다. 주문일로부터 30일 포장 훼손 시 반품 불가 .accordion : 전체 컨테이너.item : 개별 아코디언 섹션.number, .text, ..

지난 섹션에서 배운 타이포그래피, 컬러, 이미지, 아이콘, 그림자, 테두리 곡률, 화이트스페이스, 시각적 계층 구조는“무엇을 그려야 하는지”를 알려주었다면,이 섹션은 **“그린 것들을 어떻게 배치해서 실제 작동하는 페이지로 만드는지”**의 로드맵입니다.🔍 전체 워크플로우기본 요소(Elements) 정의텍스트(헤딩·단락): 의미 단위마다 스타일 통일버튼: 상태(hover, focus, disabled)까지 설계이미지: srcset, 레이지 로딩, ARIA 텍스트입력(form) 요소: 유효성·접근성 메시지태그/뱃지: 상태·카테고리 표시컴포넌트(Components) 설계널리 쓰이는 UI 블록을 Atomic하게 재사용BEM·Atomic CSS·Tailwind 등으로 모듈화레이아웃 패턴(Layout Patter..

요약UX(User Experience) 디자인은 **인터페이스가 어떻게 보이는지(UI)**를 넘어, **사용자가 어떻게 느끼고 작동하는지(UX)**를 설계하는 과정입니다. 이 강의에서는 UX의 핵심 개념, UI와의 관계, 사용자·비즈니스 목표 정렬, 흔히 범하기 쉬운 실수와 실전 UX 가이드를 통해 사용자가 쉽게 목표를 달성하도록 돕는 방법을 다룹니다.1. UX 디자인이란 무엇인가?“Design is not just what it looks and feels like. Design is how it works.” — Steve JobsUI(보이는 부분): 레이아웃·타이포·컬러·버튼 등 외형적 요소UX(작동 방식): 네비게이션 흐름, 기능 사용성, 목표 달성 효율성UX 디자인 목표: 사용자가 원하는 바(목..