먼저 만들고자 하는 화면을 간략하게 그려봤다.
엘리님이 하신 건 버튼과 items의 크기가 다른데 나는 logo까지 하나로 통일된 사이즈를 주고 싶어서
contents로 한 번에 묶었다.
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>온라인 쇼핑몰 미니게임</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<script async src= "./js/main.js"></script>
<div class= "contents">
<div class="logo"> <img src="./imgs/imgs/logo.png" alt="" ></img>
</div>
<section class= "buttons">
<button class="imgBtn" alt="tshirts" >
<img src="./imgs/imgs/blue_t.png" data-key="type" data-value="tshirts">
</button>
<button class="imgBtn" >
<img src="./imgs/imgs/blue_s.png" alt="skirts" data-key="type" data-value="skirt" >
</button>
<button class="imgBtn">
<img src="./imgs/imgs/blue_p.png" alt="pants" data-key="type" data-value="pants">
</button>
<button class= "colorBtn blue" data-key="color" data-value="blue">Blue</button>
<button class= "colorBtn yellow" data-key="color" data-value="yellow">Yellow</button>
<button class= "colorBtn pink" data-key="color" data-value="pink">Pink</button>
</section>
<ul class= "items">
</ul>
</div>
</body>
</html>data-로 시작되는 custom data attribute는 이번에 배운 것으로
이 프로젝트에서는 이를 통해 버튼을 눌렀을 때 key에 따라 value에 해당하는 item들을 보여줄 수 있다.
https://www.sitepoint.com/use-html5-data-attributes/
How to Use HTML5 Data Attributes - SitePoint
Today we look at how to use HTML5 data attributes.
www.sitepoint.com
'Front' 카테고리의 다른 글
| Webpack과 Babel 기본 설정(1)- Create-react-app를 사용하지 않는다면! (2) | 2021.01.01 |
|---|---|
| React Framework를 사용하는 이유 (0) | 2020.12.13 |
| [반응형헤더만들기] html, css (0) | 2020.11.27 |
| [온라인쇼핑몰미니게임] css (0) | 2020.11.24 |
| [JSON] 서버통신의 시작 (0) | 2020.11.23 |
