2023년 2월 19일 (일) 18:51 판

삼각김밥 레시피

김밥 재료 준비하기
밥을 삼각김밥 모양으로 구성하기
김밥에 담을 재료를 골라 넣기
삼각김밥 말아내기

@@ 1번째 줄: / 1번째 줄: @@
-== 삼각김밥 레시피 ==
+<html>
+<div class="foldable">
+  <button class="fold-btn" onclick="fold()">▼</button>
+  <button class="unfold-btn" onclick="unfold()">▲</button>
+  <div class="fold-content">
+    <h1>삼각김밥 레시피</h1>
+    <ul>
+      <li>김밥 재료 준비하기</li>
+      <li>밥을 삼각김밥 모양으로 구성하기</li>
+      <li>김밥에 담을 재료를 골라 넣기</li>
+      <li>삼각김밥 말아내기</li>
+    </ul>
+  </div>
+</div>
-=== 재료 ===
+<style>
-* 김밥용 밥: 2컵
+.foldable {
-* 김: 5장
+  overflow: hidden;
-* 참치캔: 1캔
+  transition: height 0.5s;
-* 계란: 2개
+  height: 50px;
-* 당근: 1/2개
+}
-* 양파: 1/2개
+.fold-content {
-* 소금: 약간
+  display: none;
-* 참기름: 약간
+}
+.unfold-btn {
+  display: none;
+}
+</style>
-=== 조리 방법 ===
+<script>
-# 김밥용 밥을 준비한다.
+function fold() {
-# 당근, 양파를 채썬다. 계란 2개를 풀어서 부친다.
+  var foldable = document.querySelector('.foldable');
-# 참치캔을 국자로 떠서 기름은 빼고 참치고기만 따로 둔다.
+  var foldBtn = document.querySelector('.fold-btn');
-# 불에 팬을 올려서 참치고기, 양파, 당근을 볶는다. 소금으로 간을 한다.
+  var unfoldBtn = document.querySelector('.unfold-btn');
-# 불을 끄고 참기름을 조금 넣고 볶은 재료에 밥을 넣어 섞는다.
+  var content = document.querySelector('.fold-content');
-# 김을 깨끗이 닦고 불에 올려서 달궈준다.
+  foldable.style.height = '50px';
-# 김 위에 밥을 얇게 펴서 올려놓고, 중앙에 계란 부친 것을 올린다.
+  content.style.display = 'none';
-# 밥을 세모 모양으로 접는다. (좌우, 아래위로 접으면서 밥을 조금씩 눌러준다.)
+  foldBtn.style.display = 'block';
-# 삼각김밥을 참치, 계란 부위를 위로 하도록 올려준다.
+  unfoldBtn.style.display = 'none';
+}
-=== 팁 ===
+function unfold() {
-* 김은 깨끗이 닦아서 불에 올리면 김이 부풀어 편해진다.
+  var foldable = document.querySelector('.foldable');
-* 밥은 조금 차게 만들면 밥이 눌리기 편하다.
+  var foldBtn = document.querySelector('.fold-btn');
-* 삼각김밥이 뜨거울 때는 조금 식혀서 먹으면 맛있다.
+  var unfoldBtn = document.querySelector('.unfold-btn');
+  var content = document.querySelector('.fold-content');
+  foldable.style.height = content.offsetHeight + 'px';
+  content.style.display = 'block';
+  foldBtn.style.display = 'none';
+  unfoldBtn.style.display = 'block';
+}
+</script>
+</html>

연습장:Sakura/1: 두 판 사이의 차이

2023년 2월 19일 (일) 18:51 판

삼각김밥 레시피