일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 에라토스테네스의 체
- stl
- Gap
- Codility
- 확률
- 알고리즘
- Flexbox
- CSS
- 통신사할인
- grid
- c++
- 포토샵
- margin
- skt membership
- spring
- 상태
- 소수
- c
- series
- Photoshop
- dataframe
- 백준
- SK바이오사이언스
- align-items
- 수학
- Design Pattern
- pandas
- Prefix Sums
- 강화학습
- Javascript
Archives
- Today
- Total
목록scale box-shadow (1)
sliver__
페이지: CSS로 카루셀(Carousel) 컴포넌트 구현하기
개요이번서는 자바스크립트 없이 CSS와 HTML만으로 “카루셀” 컴포넌트를 구현하는 과정을 다룹니다. 기본적인 HTML 구조를 작성한 뒤, CSS 변수와 글로벌 스타일을 적용하고, 그리드 레이아웃(Grid), 플렉스박스(Flexbox), transform: scale() 등을 활용해 이미지를 띄우고 그림자 효과를 주는 방법을 배웁니다. 마지막으로 내비게이션 버튼(이전/다음)은 위치만 잡아두고, 다음 강의에서 절대 위치(Absolute positioning)로 처리합니다.1. HTML 구조 작성최상위 컨테이너: 이미지: 테스트imonial: 내부에 .testimonial-text, .testimonial-author, .testimonial-job네비게이션 버튼: 두 개의 … Mari..
Frontend/CSS
2025. 5. 5. 21:58