|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online Shopping</title>
<link rel="stylesheet" href="style.css" />
<script src="src/main.js" defer></script>
</head>
<body>
<!--Logo-->
<img src="img/logo.png" alt="Logo" class="logo"> <!--img.logo 클래스 적용 항상! alt: 사진이 보이지 않을 때 보이는 정보 -->
<!--Buttons-->
<section class="buttons"> <!--버튼을 감싸는 section.buttons 클래스도 꼭!!-->
<button class="btn"> <!--button.btn 클래스-->
<img src="img/blue_t.png" alt="tshirt" class="imgBtn" data-key="type" data-value="tshirt" /> <!--img.imgBtn-->
</button> <!--data-뒤에 type과 value 지정해주면 설정한 의미 데이터만 보여진다-->
<button class="btn">
<img src="img/blue_p.png" alt="pants" class="imgBtn" data-key="type" data-value="pants" />
</button>
<button class="btn">
<img src="img/blue_s.png" alt="skirt" class="imgBtn" data-key="type" data-value="skirt" />
</button>
<button class="btn colorBtn blue" data-key="color" data-value="blue" >Blue</button> <!--클래스에 btn color로 다르게 한다-->
<button class="btn colorBtn yellow" data-key="color" data-value="yellow" >Yellow</button> <!--클래스를 bule, yellow, pink 다르게 한다-->
<button class="btn colorBtn pink" data-key="color" data-value="pink" >Pink</button>
</section>
<!--Items-->
<ul class="items"> <!--순서 없는 목록 ul.items-->
<!--<li class="item"> 리스트 li.item 하나 만든다-->
<!--<img src="" alt="" class="item__thumbnail"> 리스트 안에 들어갈 이미지 -->
<!--<span class="item__description"></span> 리스트 안에 설명글-->
<!--</li> 리스트 부분은 데이터이므로 JSON 파일로 옮긴다-->
</ul>
</body>
</html>
|
cs |
HTML까지 완성 후 페이지
'클론 코딩' 카테고리의 다른 글
| 드림코딩 : 미니 쇼핑몰 게임 만들기 - 4. JS 동적 연동 (main.js), 완성본 (0) | 2020.10.22 |
|---|---|
| 드림코딩 : 미니 쇼핑몰 게임 만들기 -3. JSON 데이터 저장 (0) | 2020.10.22 |
| 드림코딩 : 미니 쇼핑몰 게임 만들기 -2. CSS 꾸미기 (0) | 2020.10.22 |
| 드림 코딩 : 반응형 유튜브 만들기 (by HTML, CSS) (0) | 2020.09.23 |
| 드림 코딩 : 반응형 헤더 만들기 (0) | 2020.09.21 |