-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathrecipe.html
More file actions
208 lines (187 loc) · 8.7 KB
/
recipe.html
File metadata and controls
208 lines (187 loc) · 8.7 KB
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>레시피 페이지</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
$(document).ready(function () {
$('.menu-toggle').click(function () {
$('#mobileMenu').toggleClass('show');
});
});
</script>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<a href="main.html"><img class="logo-image" src="https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/icon-image/
Logo.png" alt="잔쿡"></a>
</div>
<div class="search-box">
<input type="text" placeholder="재료를 넣어주세요..." />
</div>
<div class="icons">
<a href="/signup" title="회원가입"><img src="https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/icon-image/
014-add.png" alt="회원가입"></a>
<a href="/login" title="로그인"><img src="https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/icon-image/
015-user-1.png" alt="로그인"></a>
</div>
<button class="menu-toggle">☰</button>
<div class="mobile-menu" id="mobileMenu">
<a href="/login">로그인</a>
<a href="/signup">회원가입</a>
<a href="#">종류별 음식</a>
<a href="ingredients.html">재료로 검색</a>
<a href="#">초보용 음식</a>
<a href="cookingTime.html">조리 시간별</a>
</div>
</header>
<nav>
<ul class="nav-menu">
<li><a href="#">종류별 음식</a></li>
<li><a href="ingredients.html">재료로 검색</a></li>
<li><a href="#">초보용 음식</a></li>
<li><a href="cookingTime.html">조리 시간별</a></li>
</ul>
</nav>
<section class="step-section">
<div class="recipe-content">
<div class="left-box">
<div class="iframe-container">
<iframe width="560" height="250" src="https://www.youtube.com/embed/eIo2BaE6LxI?si=IUMhoDH_QMf7CS_O"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="info-box">
<strong>김치볶음밥</strong><br>
Ex) 맵기: 🌶🌶 / 조리시간: 15분 / 1~2인분 기준
</div>
</div>
<div class="right-box">
<div class="section-box">
<h3>필요한 재료</h3>
<ul>
<li>김치 200g</li>
<li>마요네즈 1스푼</li>
<li>간장 1스푼</li>
<li>설탕 0.5스푼 (신김치일 경우)</li>
<li>파 약간</li>
<li>양파 약간</li>
<li>공기밥 2인분</li>
<li>참치캔 1개 (선택)</li>
<li>식용유 적당량</li>
<li>참기름 1스푼</li>
<li>깨 약간</li>
<li>달걀 1개 (선택, 프라이용)</li>
<li>김가루 약간 (선택)</li>
<li>버터 1조각 (선택)</li>
</ul>
<h3>필요한 요리도구 (권장)</h3>
<ul>
<li>후라이팬</li>
<li>주걱</li>
<li>그릇</li>
</ul>
</div>
</div>
</div>
<div class="step-box">
<div class="step-text">
<p>영상 자막/상세 정보</p>
<hr><br>
<ol>
<li>김치와 파나 양파를 잘게 썰어서 준비합니다.</li><br>
<li>마요네즈 1스푼과 간장 1스푼, 신김치일 경우 설탕을 살짝 넣어 김치를 양념해줍니다.</li><br>
<li>프라이팬에 기름을 두르고 썰어둔 파를 먼저 넣어 파기름을 만듭니다.</li><br>
<li>파기름이 올라오면 양념한 김치를 넣고 볶아줍니다.</li><br>
<li>김치가 투명해질 때까지 중불로 충분히 볶아줍니다.</li><br>
<li>밥을 넣고 김치와 잘 섞이도록 골고루 볶아줍니다.</li><br>
<li>간을 보고 부족하면 간장이나 소금으로 추가 간을 맞춥니다.</li><br>
<li>밥알이 고슬고슬하게 볶아질 때까지 센불로 빠르게 볶습니다.</li><br>
<li>기호에 따라 버터를 1조각 넣어 풍미를 더할 수 있습니다.</li><br>
<li>불을 끄기 직전에 참기름과 깨를 살짝 뿌려줍니다.</li><br>
<li>접시에 담고 취향에 따라 달걀 프라이를 올려줍니다.</li><br>
<li>김치볶음밥 위에 김가루를 솔솔 뿌려 마무리합니다.</li><br>
<li>매콤한 맛을 원하면 고춧가루를 추가로 넣어도 좋습니다.</li><br>
<li>베이컨이나 햄을 추가하면 더욱 풍성한 맛을 낼 수 있습니다.</li><br>
<li>남은 김치 국물도 약간 넣으면 볶음밥 맛이 더 진해집니다.</li><br>
<li>너무 질어지지 않게 국물은 조금씩 조절해 넣습니다.</li><br>
<li>볶는 중간에 팬 바닥을 긁어주면서 밥이 눌어붙지 않게 합니다.</li><br>
<li>밥이 잘 풀어지지 않으면 뒤집개로 눌러가며 볶아줍니다.</li><br>
<li>취향에 따라 치즈를 위에 올려 녹여 먹어도 맛있습니다.</li><br>
<li>김치볶음밥 완성! 뜨거울 때 바로 맛있게 먹습니다.</li><br>
<li>남은 김치볶음밥은 김밥 재료로 활용할 수도 있습니다.</li><br>
<li>야채를 더 추가하고 싶다면 피망이나 옥수수도 좋습니다.</li><br>
<li>칼칼한 맛을 위해 청양고추를 다져서 추가할 수도 있습니다.</li><br>
<li>간을 심심하게 하고 싶다면 간장 대신 소금만 사용해도 됩니다.</li><br>
<li>김치볶음밥과 함께 먹을 계란국이나 미소된장국을 준비해도 좋아요.</li><br>
</ol>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="footer-container">
<div class="footer-top">
<div>
<h4>서비스</h4>
<ul>
<li>공지사항</li>
<li>자주 묻는 질문</li>
<li>계정 일시정지</li>
<li>고객센터</li>
</ul>
</div>
<div>
<h4>회사</h4>
<ul>
<li>회사 소개</li>
<li>채용</li>
<li>기술 블로그</li>
<li>블로그</li>
<li>광고</li>
</ul>
</div>
<div>
<h4>문의</h4>
<ul>
<li>광고 문의</li>
<li>인증 사업 문의</li>
<li>마케팅 · PR</li>
</ul>
</div>
<div>
<h4>고객센터</h4>
<ul>
<li>전화: 031-249- (24시간 연중무휴)</li>
<li>이메일(고객전용): support@jancook.com</li>
<li>민원 접수</li>
</ul>
</div>
</div>
<div class="footer-info">
<p><strong>(주)잔쿡</strong></p>
<p>사업자 등록번호: 104-98-01782 | 대표: 이동근</p>
<p>주소: 경기 수원시 영통구 광교산로 154-42</p>
<p>서비스 이용약관 | 개인정보 처리방침 | 마이데이터 서비스 이용약관</p>
</div>
<div class="footer-social">
<a href="#"><img src="icon-image/001-facebook.png" alt="Facebook" /></a>
<a href="#"><img src="icon-image/003-twitter.png" alt="Twitter" /></a>
<a href="#"><img src="icon-image/002-instagram.png" alt="Instagram" /></a>
<a href="#"><img src="https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/icon-image/
001-facebook.png" alt="Facebook" /></a>
<a href="#"><img src="https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/icon-image/
003-twitter.png" alt="Twitter" /></a>
<a href="#"><img src="https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/https://raw.githubusercontent.com/JANCOOKWebProject/Web-Programming-Projectt/main/icon-image/
002-instagram.png" alt="Instagram" /></a>
</div>
</div>
</footer>
</body>
</html>