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

  • 최근 수정 시각: 2023년 2월 19일 (일) 18:35
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
< 연습장:Sakura
← 이전 편집다음 편집 →
시각위키텍스트
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
<html>
<html>
<div class="mw-collapsible">
<div id="triangle">
   <div class="mw-collapsible-heading">삼각김밥 레시피</div>
   <div class="top"></div>
   <div class="mw-collapsible-content">
   <div class="fill"></div>
    <ol>
  <div class="bottom"></div>
      <li>김밥 굽기용 김 준비하기.</li>
      <li>새우, 당근, 계란, 양파 등을 먹기 좋은 크기로 채썰기.</li>
      <li>밥을 미리 잡아 손바닥에 얇게 펴고 조금 식힌 후 조금씩 덜어내며 작은 사이즈로 만들기.</li>
      <li>김 위쪽에 밥을 올리고 가운데에 채소와 계란, 그리고 소금, 후추 등으로 간한 새우 등을 얹기.</li>
      <li>맨 아랫부분을 시작으로 김을 굽듯이 굴려 올리면서 곧게 눌러 삼각형 모양으로 만들기.</li>
      <li>마지막 끝 부분은 밥과 김을 찢어내거나 김끼리 물어 붙여 밀어주면 끝!</li>
    </ol>
  </div>
</div>
</div>
<style>
#triangle {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.top, .fill, .bottom {
  width: 100%;
  height: 0;
  position: absolute;
  transition: height 0.5s ease-out;
}
.top {
  border-style: solid;
  border-width: 0 50px 86.6px 50px;
  border-color: transparent transparent #f00 transparent;
  top: 0;
  left: 0;
}
.fill {
  background-color: #f00;
  top: 50%;
  left: 0;
}
.bottom {
  border-style: solid;
  border-width: 86.6px 50px 0 50px;
  border-color: #f00 transparent transparent transparent;
  bottom: 0;
  left: 0;
}
#triangle.open .top {
  height: 50%;
}
#triangle.open .fill {
  height: 50%;
}
#triangle.open .bottom {
  height: 0;
}
</style>
<script>
var triangle = document.getElementById("triangle");
triangle.addEventListener("click", function() {
  triangle.classList.toggle("open");
});
</script>
</html>
</html>

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