일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- FOR문
- JS
- 공공데이터 활용
- 리액트
- 아코디언카드만들기
- 개발일지
- HTML
- 미세먼지
- Js 내장객체
- JavaScript
- 공공데이터
- Illustrator2022
- 자바스크립트
- react
- open api
- 미세먼지알림사이트만들기
- 자바스크립트 내장객체
- CSS
- 제이쿼리
- 일러스트 입체글자
- useState
- css속성
- module.css
- 바닐라자바스크립트
- css 속성
- 20231221
- jQuery
- 메뉴바만들기
- 퍼블리싱
- position
Archives
- Today
- Total
목록flex단축속성 (1)
김코드의 웹디자인 세상

안녕하세요! 오늘은 css로 간단한 이미지 슬라이드를 만들어보도록 하겠습니다! 만들어 볼 친구를 먼저 만나본다면.. 이렇게 이미지를 hover시 커지는 갤러리를 만들어보겠습니다! ✎ html 준비물은 사진 5장이 필요합니다! 이미지태그로 나열해 주신 후 하나의 div로 묶어주세요! ✎ css .gallery{ display: flex; width: 440px; height: 200px; } .gallery img{ min-width: 0; flex: 1 1 10px; object-fit: cover; opacity: 0.5s; transition: 0.5s; } .gallery img:hover{ flex: 1 1 280px; opacity: 1; } 여기서 flex: 1 1 10px은 무슨 뜻이지? 하..
⊹ ⠀𝙲𝚂𝚂, 𝚂𝙲𝚂𝚂
2023. 1. 13. 15:04