프로젝트소개

HTML, CSS을 이용해 아이템들을 나열하고, JavaScirpt에서 동적으로 받아온 데이터 버튼을 이용해 색상별, 아이템별로 필터링 할 수있는 기능을 갖춘 간단한 온라인 쇼핑몰 미니게임을 구현한 클론코딩 프로젝트입니다.

작성된 내용은 드림코딩 쇼핑몰 미니게임 클론 코딩 & 코드 리뷰를
참고하여 정리한 것 입니다.
(https://academy.dream-coding.com/courses/mini-shopping)

1. HTML Mark Up

모든 프로젝트를 진행할 때 계획하는 것이 가장 중요하며 이로 인해 기능이 구현되었을 때 접근하기 용이해진다. 이번 프로젝트의 html 마크업은 크게 3개의 영역으로 나눌 수 있다.

• Logo
• Button (img, color)
• Item list (img, text)

위의 세가지 영역을 바탕으로 HTML 마크업을 진행한다.

Logo

    <!--Logo-->
    <img src="img/logo.png" alt="Logo" class="logo" />

Buttons

    <!--Buttons-->
    <section class="buttons">
      <button class="btn">
        <img src="img/blue_t.png" alt="tshirt"
        class="imgBtn" />
      </button>
      <button class="btn">
        <img src="img/blue_p.png" alt="pants"
        class="imgBtn" />
      </button>
      <button class="btn">
        <img src="img/blue_s.png" alt="skirt"
        class="imgBtn" />
      </button>

btn이라는 class를 주어 전체적으로 btn을 꾸며줄수 있게하고, 후에는 세부적으로 나누어 꾸며줄 수 있는 역할을 하게한다.

    <button class="btn colorBtn blue">Blue</button>
    <button class="btn colorBtn yellow">Yellow</button>
    <button class="btn colorBtn pink">Pink</button>
   <section> 

색상을 나타내는 버튼도 마찬가지로 버튼태그를 사용해 만들고, colorBtn과 각자 색상을 세분화하는 class를 준다. 마지막으로 두 그룹을 buttons class를 준 섹션으로 묶었다.

Items

    <ul class="items">
      <li class="item">
        <img src="img/blue_t.png" alt="tshirt" class="item__thumnail" />
        <span class="item__description">male, large</span>
      </li>
    </ul>

순서가 상관없는 ul 태그를 이용해 list를 만든다. 이 부분은 후에 JS를 이용하여 동적으로 기능하도록 구현하지만 스타일링을 위해 임의로 작성해두었다.

결과

그 결과를 확인해보면 이미지와 버튼, 텍스트가 나열된 혼란스러운 화면을 확인 할 수 있는데 이러면 전체적인 HTML 마크업이 완성된 것이다. 그리고 다음 단계에서 스타일링을 해준다!