sliver__

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

CSS Grid는 이차원(2D) 레이아웃을 위해 설계된 CSS 모듈로, 컨테이너를 행(row)과 열(column) 로 나누고 그 안에 아이템을 자유롭게 배치할 수 있게 해 줍니다.Flexbox가 1차원 레이아웃에 특화된 반면, Grid는 복잡한 그리드 구조를 더 적은 코드로 구현할 수 있어 UI 설계의 혁신을 가져왔습니다.핵심 용어Grid Container: display: grid 또는 inline-grid를 선언한 부모 요소Grid Items: 컨테이너의 직속 자식 요소들Grid Lines: 행과 열을 나누는 가상의 선, 1부터 열 개수+1, 행 개수+1까지 번호 매김Grid Cells: 교차하는 그리드 라인 사이의 사각 영역(셀)Grid Tracks: 하나의 행(row track) 또는 열(colu..

CSS Grid는 이차원(2D) 레이아웃을 위한 최신 CSS 모듈로, 단 몇 줄의 코드만으로도 복잡한 구조를 쉽게 구현할 수 있습니다.display: grid를 통해 그리드 컨테이너를 선언하고, grid-template-columns/grid-template-rows로 열과 행(track) 의 크기를 직접 설정합니다.또한 gap 속성으로 열·행 간격(gutter)을 일괄 지정할 수 있으며, column-gap과 row-gap을 통해 축별로 서로 다른 간격도 정의할 수 있습니다.1. Grid 컨테이너 선언하기.container { display: grid;}grid 또는 inline-grid 값을 주면 해당 요소가 그리드 컨테이너가 되고,그 직속 자식들이 그리드 아이템이 됩니다.이 선언만으로는 시각적 변..

안녕하세요! 이번 포스팅에서는 Flexbox를 실습하며 아이템 정렬과 간격 주는 방법을 좀 더 깊이 배워보겠습니다. 1. 기본 정렬 복습justify-content: 주 축(main axis, 기본 가로) 방향 정렬center → 가로 중앙flex-start → 왼쪽 정렬 (기본값)space-between 등 다양한 옵션 존재align-items: 교차 축(cross axis, 기본 세로) 방향 정렬center → 세로 중앙flex-start → 위쪽 정렬stretch → 컨테이너 높이에 맞춰 늘이기 (기본값).container { display: flex; justify-content: flex-start; /* 수평 정렬 */ align-items: center; /* 수직 중..