❏ css - 이미지 갤러리 만들기

 

안녕하세요!

 

오늘은 css로 간단한 이미지 슬라이드를 만들어보도록 하겠습니다!

 

만들어 볼 친구를 먼저 만나본다면..

 

이렇게 이미지를 hover시 커지는 갤러리를 만들어보겠습니다!

 

---

✎ html

 

    <div class="gallery">
        <img src="./animal_01.jpg" alt="a1">
        <img src="./animal_02.jpg" alt="a2">
        <img src="./animal_03.jpg" alt="a3">
        <img src="./animal_04.jpg" alt="a4">
        <img src="./animal_05.jpg" alt="a5">
    </div>

 

준비물은 사진 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은 무슨 뜻이지? 하고 생각하실 수 있으신데요

 

flex에는 flex-grow, flex-shrink, flex-basis를 단축해서 단축속성을 지정할 수 있습니다.

 

그렇기 때문에 hover전 갤러리의 사진은 동일한 비율로 동일한 크기로 10px로 보이게 만들어진 것이고

 

hover시 동일한 비율과 동일한 크기로 280px까지 확대가 되어 보이는 것입니다,

 

더 자세하게 알고 싶으시다면 flex mdn을 살펴보세요!

---

 

👇👇👇 바로가기 👇👇👇 

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

 

 

잘 구동이 되는지 확인해보세요!!

---

간단한 전환효과로 만들 수 있는 이미지 갤러리이니 한번 만들어보시는 것도 좋을 것 같습니다!

오늘도 읽어주셔서 감사합니다!

(ᵔᵕᵔ)