Web-Programming-Project./recipe.html at main · ca5tlechan/Web-Programming-Project. · GitHub

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
<!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>
</head>
<body>
  <div class="container">
  <header>
    <div class="logo">
        <a href="main.html"><img class ="logo-image" src="Logo.png" alt="잔쿡"></a>
    </div>
    <div class="search-box">
        <input type="text" placeholder="재료를 넣어주세요..." />
    </div>
    <div class="icons">
        <a href="/signup" title="회원가입"><img src="014-add.png" alt="회원가입"></a>
        <a href="/login" title="로그인"><img src="015-user-1.png" alt="로그인"></a>
    </div>
  </header>

  <nav>
    <ul class="nav-menu">
        <li><a href="#">종류별 음식</a></li>
        <li><a href="#">재료로 검색</a></li>
        <li><a href="#">초보용 음식</a></li>
        <li><a href="#">조리 시간별</a></li>
    </ul>
</nav>
    <!-- 요리 순서 -->
    <section class="step-section">
    <div class="recipe-content">
      <!-- 왼쪽 박스 -->
      <div class="left-box">
        <div class="image-box">
          <video controls="controls" poster="http://via.placeholder.com/1280x720">
            <source src="Wildlife.mp4" type="video/mp4">
            <source src="Wildlife.webm" type="video/webm">
          </video>
        </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 class="step-images">
          순서에 따른 사진들 부분
        </div>
      </div>
    </section>
  </div>


  <footer class = "footer">
    잔쿡
  </footer>
</body>
</html>