홈플러스 메인 홈페이지 연습

 

서울대병원 연습때와 같이 다 만들지는 못하고

상품 한 섹션까지만 만들어봤다.

 

순서는 다음과 같다.

1. 선정이유
2. 만드는 과정
3. 어려웠던 점
4. 추후 개선할 점

 

---

1. 선정이유

 

이유는 간단했다.

기업페이지 연습만 하는 것 같아서 쇼핑몰을 해봐야겠다는 생각이 들었다. 

그 중에 지금까지 배운 html, css와 약간의 jquery를 활용할 수 있는 페이지를 찾아보다가

홈플러스 홈페이지가 눈에 띄어서 선정했다.

 

 

 

---

2. 만드는 과정

 

크게 header와 5개의 section으로 처리했다.

 

 

 

2-1. header 

 

먼저 header의 경우는 크게 두 파트로 나누어졌다.

 

        <div class="containers">
            <div class="top d-flex justify-content-between align-items-center">
                <h1>
                    <a href="#none"><img src="img/default_logo.png" alt="로고"></a>
                </h1>
                <div class="search">
                </div>
                <div class="icons d-flex justify-content-between">
                </div>
            </div>
            <div class="navd">
                    <ul class="d-flex mb-0 justify-content-between align-items-end">
                        
                        <li><a href="#none">카테고리</a></li>
                        <li><a href="#none">전단행사</a></li>
                        <li><a href="#none">신상품</a></li>
                        <li><a href="#none">단독특가</a></li>
                        <li><a href="#none">베스트</a></li>
                        <li><a href="#none">기획전</a></li>
                        <li><a href="#none">브랜드관</a></li>
                        <li><a href="#none">자주구매</a></li>
                        <li><a href="#none">택배배송</a></li>
                    </ul>
            </div>
        </div>

 

top과 navd로 나누어 상단에는 로고와 검색창과 아이콘들, 하단에는 네비게이션바를 배치했다. 

네비게이션 바에는 display:flex를 주었고 그와 동시에 justify-content: between, align-items:end를 주었다.

 

2-2. banner

 

배너는 플러그인 swiper를 사용했다.

 

 <section id="banner" style="border-bottom: 1px solid #eee;">
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="img/banner1.png" alt="배너1"></div>
              <div class="swiper-slide"><img src="img/banner2.png" alt="배너2"></div>
              <div class="swiper-slide"><img src="img/banner3.jpeg" alt="배너3"></div>
              <div class="swiper-slide"><img src="img/banner4.jpeg" alt="배너4"></div>
            </div>
    
          
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
    </section>

 

웹접근성 준수를 위해 alt를 꼭 삽입했다.

 

 

2-3. corner

 

 <ul class="d-flex justify-content-between align-items-center">
     <li><a href="#none"><img src="img/ic_cart.png" alt="즉시배송"><span>즉시배송</span></a></li>
     <li><a href="#none"><img src="img/ic_level.png" alt="등급혜택"><span>등급혜택</span></a></li>
     <li><a href="#none"><img src="img/ic_coupon.png" alt="이벤트/쿠폰"><span>이벤트/쿠폰</span></a></li>
     <li><a href="#none"><img src="img/ic_mobile.png" alt="모바일교환권"><span>모바일교환권</span></a></li>
     <li><a href="#none"><img src="img/ic_bakery.png" alt="베이커리"><span>몽블랑제<br>베이커리</span></a></li>
     <li><a href="#none"><img src="img/ic_chicken.png" alt="홈플델리"><span>홈플델리</span></a></li>
     <li><a href="#none"><img src="img/ic_kit.png" alt="밀키트"><span>밀키트</span></a></li>
     <li><a href="#none"><img src="img/ic_sig.png" alt="시그니처"><span>홈플러스<br>시그니처</span></a></li>
     <li><a href="#none"><img src="img/ic_meat.png" alt="산지직송"><span>산지직송</span></a></li>
</ul>

 

이 또한 쉽게 dislay:flex;를 사용했다. 

그 후 css로 span의 font-size, text-align로 정렬과 사이즈를 맞춰주었다.

일부는 :nth-child()를 사용해서 좀 더 조정해줬다.

 

 

2-4. minibanner

 

 

 

 

2-2 배너와 유사하게 넣었다.

swiper의 기본 script에 자동으로 돌아가게하는 auto 기능을 추가하였다.

autoply:{delay:숫자,} 이다.

 

<script>


  const swiper = new Swiper('.swiper', {
  // Optional parameters
  autoplay: { delay: 3000,},
  spaceBetween: 0,
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
</script>

 

 

2-5. saza

이미지인데 그냥 한 섹션 다 차지하게 했다.

지금 생각해보면 그냥 다음 섹션과 함께 처리해도 괜찮을 것 같다...

 

편하게 하려고 섹션을 나눴다...

 

 

2-6. ct

 

두개의 카테고리만 만들었다.

일일히 작업해야하기 때문이다(=힘들다)

 

가장 고생했던 곳이다.

단순 반복작업때문에가 아니라 탭 문제 때문이었다. 

 

처음에는 css로 구현했는데 나중에 보니깐 jquery로 간단하게 할 수 있는 거였다....

 

 

---

 

 

3. 어려웠던 점

 

2-6이 가장 어려웠다.

 

일단 쇼핑몰의 특징은 이미지-상품명-가격이 거의 필수적이여서 

공통적인 클래스들을 주어 :nth:child와 함께 순차적으로 css를 줬다.

이 과정에서 <span>과 <br>를 많이 쓴 점이 걸린다. 

특히 <span><span><span>...이런식으로 나열을 해서 웹표준을 어기는 것 아닐까 라는 생각이 들었다.

 

 

탭 부분이 가장 문제 였다.

처음에는 css로 짜는데 제이쿼리로 짤 수 있다고해서

나중에는 선생님의 도움을 받았다..

(그래도 css로 잘 짰다고 해주셨다)

 

 

<script>
    $(document).ready(function(){
        $(".cts > li > span").click(function(){
            $(".cts > li > span").removeClass('act');
            $(this).addClass("act")
        })
    })
</script>

<style>
    .act + ul{ display: block;}
</style>

 

원리를 이해하다면

1. act라는 클래스를 가지고 있는 span태그(타이틀)을 클릭한다.

2. .act는 .act의 형제이자 가장 중요한 상품탭(ul)을 display:block;으로 보이게 만든다.

3. 다시 제이쿼리로 돌아가서 클릭시 일단 모든 상품탭(ul)은 뺀다.

4. 그와 동시에 선택한 span태그(this)의 act클래스를 넣어주면서 상품탭(ul)을 보여준다.

 

내가 이해하기로는 이와 같다.

아직 스타일에 대한 이해가 더 필요할 것 같다...

(+는 아는데 저렇게도 쓰이는 구나 싶었다)

 

 

---

 

4. 추후 개선할 점

 

1 . 제이쿼리를 적극 활용해서 쓰자.

 

이번에도 만드는 동시에 제이쿼리를 처음 배웠어서 반영한다는 것에

좀 혼란이 있었다. 마치 저번에 공통클래스 처럼...

다음부터는 태그짤떄부터 제이쿼리를 어느정도 생각해두면서 짜면 좋을 것 같다.

 

2. css정리하면서 쓰자, 항상 절약하면서 쓰자.

 

너무 이것저것주면서 하기보다는 

공통된 부분은 묶어서 표현하는게 좋을 것같다.

 

3. 상품 정보 나열시를 좀 더 효율적인 코드로 개선해보자.

 

이 부분은 다른 사이트들을 뜯어봐야 알 것 같다.

물론 내가 모르는 코드들이 많을 것 같긴하다..

 

 

끝!