shopping website 클론코딩

shopping website 클론코딩

---

✍️ 상세기능

• 헤더를 화면 상단에 붙이기
  sticky position을 사용하면 됩니다! 🤭 헤더 영역의 position 속성을 sticky로, top 속성을 0으로 설정해 줍니다!

✍️ 코드

css

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    background: #E3E6F3;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    z-index: 999;
    position: sticky;
    top: 0;
    left: 0;
}

---

---

• hover
  이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환 효과입니다 😎
  
  

✍️ 코드

html

<section id="product1" class="section-p1">
    <h2>Featured Products</h2>
    <p>summer collection new morden design</p>
    <div class="pro-container">
        <div class="pro">
            <img src="img/products/f1.jpg" alt="">
            <div class="des">
                <span>adidas</span>
                <h5>cartoon astronaut t-shirts</h5>
                <div class="star">
                    <i class="uil uil-star"></i>
                    <i class="uil uil-star"></i>
                    <i class="uil uil-star"></i>
                    <i class="uil uil-star"></i>
                    <i class="uil uil-star"></i>
                </div>
                <h4>$78</h4>
            </div>
            <a href="#"><i class="uil uil-shopping-cart cart"></i></a>
        </div>
      </div>
 </section>

css

#product1 .pro {
    width: 23%;
    min-width: 250px;
    padding: 10px 12px;
    border: 1px solid #cce7d0;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
    margin: 15px 0;
    transition: 0.2 ease;
    position: relative;
}

#product1 .pro:hover {
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.3);
}

---

• 클릭 시 메인 이미지 변환
  자바스크립트로 작은 이미지 클릭 시 메인 이미지로 변환! onclick 속성을 사용하면 됩니다 😄
  
  

✍️ 코드

html

<section id="prodetails" class="section-p1">
        <div class="single-pro-image">
            <img src="img/products/f1.jpg" width="100%" id="MainImg" alt="">
            <div class="small-img-group">
                <div class="small-img-col">
                    <img src="img/products/f1.jpg" width="100%" class="small-img" alt="">
                </div>
                <div class="small-img-col">
                    <img src="img/products/f2.jpg" width="100%" class="small-img" alt="">
                </div>
                <div class="small-img-col">
                    <img src="img/products/f3.jpg" width="100%" class="small-img" alt="">
                </div>
                <div class="small-img-col">
                    <img src="img/products/f4.jpg" width="100%" class="small-img" alt="">
                </div>
            </div>
        </div>
</section>

css

#prodetails {
    display: flex;
    margin-top: 20px;
}


#prodetails .single-pro-image{
    width: 40%;
    margin-right: 50px;
}

.small-img-group {
    display: flex;
    justify-content: space-between;
}

.small-img-col {
    flex-basis: 24%;
    cursor: pointer;
}

javascript

<script>
        var MainImg = document.getElementById("MainImg")
        var smallimg = document.getElementsByClassName("small-img")


        smallimg[0].onclick = function(){
            MainImg.src = smallimg[0].src
        }
        smallimg[1].onclick = function(){
            MainImg.src = smallimg[1].src
        }
        smallimg[2].onclick = function(){
            MainImg.src = smallimg[2].src
        }
        smallimg[3].onclick = function(){
            MainImg.src = smallimg[3].src
        }
    </script>

---

Retrospect 🧐

잼나부러 ㅎ 웹사이트 만드는 거 넘 신기허당..🤩 html과 css 위주인데도 이리 신기하다뉫..!! 🤩🤩🤩