[JavaScript - 실습] Making a Shopping Mall Mini Game (1)
프로젝트소개
HTML, CSS을 이용해 아이템들을 나열하고, JavaScirpt에서 동적으로 받아온 데이터 버튼을 이용해 색상별, 아이템별로 필터링 할 수있는 기능을 갖춘 간단한 온라인 쇼핑몰 미니게임을 구현한 클론코딩 프로젝트입니다.
작성된 내용은 드림코딩 쇼핑몰 미니게임 클론 코딩 & 코드 리뷰를
참고하여 정리한 것 입니다.
(https://academy.dream-coding.com/courses/mini-shopping)
1. HTML Mark Up
HTML, CSS을 이용해 아이템들을 나열하고, JavaScirpt에서 동적으로 받아온 데이터 버튼을 이용해 색상별, 아이템별로 필터링 할 수있는 기능을 갖춘 간단한 온라인 쇼핑몰 미니게임을 구현한 클론코딩 프로젝트입니다.
작성된 내용은 드림코딩 쇼핑몰 미니게임 클론 코딩 & 코드 리뷰를
참고하여 정리한 것 입니다.
(https://academy.dream-coding.com/courses/mini-shopping)
모든 프로젝트를 진행할 때 계획하는 것이 가장 중요하며 이로 인해 기능이 구현되었을 때 접근하기 용이해진다. 이번 프로젝트의 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 마크업이 완성된 것이다. 그리고 다음 단계에서 스타일링을 해준다!
Author And Source
이 문제에 관하여([JavaScript - 실습] Making a Shopping Mall Mini Game (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hikoand/JavaScript-실습-Making-a-Shopping-Mall-Mini-Game저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)