오늘은 복습을 하기 위해 요리 레시피를 주제로 html 문서를 만들어봤는데 ,, 기획을 간단하게 해서 금방 만들었다,,
다음에 할땐 더 구체적으로 기획해서 연습해봐야겠다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>백종원-요리 레시피</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/reveiw.css">
</head>
<body>
<div id="wrap">
<h1>< 백종원의 레시피 ></h1>
<hr>
<div class="recipe-1">
<div class="kimchi-stew">
<h2>김치찌개</h2>
<span>
돼지고기, 김치, 설탕, 간장, 대파, 다진마늘
</span>
<p>
1. 돼지고기는 찌개용으로 먹기좋은 크기로 준비한다. <br>
2. 김치는 먹기 좋게 잘 썰어서, 다진마늘, 설탕 각 큰 숟갈 1스푼 넣고 냄비에 들기름 두르고 볶아준다. <br>
3. 2번 냄비에 물을 적당량 부어서 끓인다. <br>
4. 1번의 돼지고기를 넣고, 된장 반스푼 정도를 넣어 돼지 잡내를 잡고, 간도 한다. <br>
5. 간장 살짝 넣어서 간 맞춘다. <br>
tip) 이 때 같이 넣으면 더 맛있는 재료들을 파만 빼고 다 넣어주면 됩니다. <br>
6. 중불 정도에서 푹~ 끓여준다. <br>
7. 마지막 불끄기 전에 파를 올려준다. <br>
</p>
</div>
<div class="bean-paste-stew">
<h2>된장찌개</h2>
<span>
된장 1/3컵(60g) 물 약4컵(750mL) 간마늘 1/2큰술(8g) 육수용멸치 10마리(20g) 애호박 1/2개(130g)
양파 1/2개(80g) 느타리버섯 1컵(80g) 대파 2/3컵(60g) 청양고추 2개(14g) 홍고추 1/2개(7g) 두부 1/2모(180g)
</span>
<p>
1. 애호박, 양파, 두부는 먹기 좋은 크기로 잘라 준비한다. <br>
2. 느타리버섯은 찢어서 준비한다. <br>
3. 청양고추, 홍고추, 대파는 1cm 정도 두께로 썰어 준비한다. <br>
4. 멸치는 머리, 내장을 제거하고 3등분 정도로 찢어 준비한다. <br>
5. 냄비에 손질한 멸치, 물, 양파를 넣어 끓인다. <br>
6. 육수가 끓으면 느타리버섯, 애호박, 간마늘, 된장을 넣는다. <br>
7. 된장 육수가 끓어오르면 대파, 청양고추, 홍고추를 넣어 끓인다. <br>
8. 찌개가 끓으면 두부를 넣고 1분 정도 끓여 완성한다. <br>
</p>
</div>
</div>
<div class="border"></div>
<div class="recipe-2">
<div class="braised-spicy-chicken">
<h2>닭볶음탕</h2>
<span>
닭 2마리, 감자 4개, 양파 2분의 1개, 버섯 3개,
양파 2분의 1개, 고추 1개, 대파 1개, 설탕 3큰술, 간장 4큰술, 액젓 1큰술, 고춧가루 5큰술, 후추가루
</span>
<p>
1. 일단 닭과 야채를 깨끗하게 씻어주세요. (닭은 흐르는 물에, 불순물 꼭 제거해주시구요. 재료는 먹기 좋게 잘라주세요) <br>
2. 닭을 끓는 물에 5분 데친 후 차가운 물로 헹궈줍니다. <br>
3. 큰 냄비에 닭과 물 적당히, 황설탕을 넣고 5분정도 끓여주세요. <br>
여기서 팁은, 백종원 레시피 - 설탕을 먼저 넣!고 끓여주시면 됩니다ㅎㅎ 그래야 간이 더 잘 스며들더라구요! <br>
4. 다음 15분정도 감자와 양파를 중간불에서 끓여주시구요~! <br>
5. 진간장 넣고, 약간의 액젓도 추가 가능합니다. 마지막으로 다진마늘 조금 넣어주시구요! <br>
6. 마지막으로 남은 채소와 고춧가루 넣고 끓여주시면 됩니다. <br>
</p>
</div>
<div>
<h2>떡볶이</h2>
<span>
떡볶이떡 2컵(200g), 대파1/2대, 물2컵(400ml), 어묵1줌, 통깨약간
양념장 : 고추장1큰술, 설탕3큰술, 간장2큰술, 고춧가루1큰술
</span>
<p>
1. 떡볶이떡 2컵을 준비하고 대파는 어슷하게 썬다. <br>
2. 어묵은 1줌 준비해 주세요. <br>
3. 냉동실 떡은 따뜻한 물에 담궈 부드럽게 해주고<br>
4. 어묵은 어떤 종류의 어묵이든 다~ 좋아요. <br>
5. 떡 2컵과 물 2컵을 후라이팬에 붓고<br>
6. 고추장 1큰술을 듬뿍떠서 풀어 주세요.<br>
7. 이어서 설탕3큰술과 간장2큰술을 넣어요.<br>
8. 설탕의 양은 입맛에 따라 조절해 보세요.<br>
9. 여기에 어묵을 넣고 끓여 주세요.<br>
10. 국물이 절반으로 졸면 대파 1/2대를 어슷하게 썰어 넣어요.<br>
11. 굵은 고춧가루 1큰술 넣고 섞어 마무리 해요.<br>
</p>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
#wrap {
margin: 10px;
}
#wrap h1 {
text-align: center;
font-size: 30px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
#wrap h2 {
font-size: 15px;
font-weight: bold;
background-color: coral;
color: #fff;
padding: 8px;
margin-bottom: 10px;
}
#wrap span {
display: block;
border: 1px solid #000;
padding: 8px;
}
#wrap p {
display: block;
margin-top: 10px;
margin-bottom: 20px;
}
.recipe-1 {
width: 48%;
height: auto;
float: left;
margin: 13px;
}
.border {
display: block;
border-right: 1px solid #000;
height: 1500px;
position: absolute;
left: 50%;
margin-right: -3px;
}
.recipe-2 {
width: 48%;
height: auto;
float: right;
margin: 13px;
}
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_36] CSS로 카카오 실습 꾸미기 (0) | 2021.03.17 |
|---|---|
| [코딩 공부_35] bem class명 규칙 (0) | 2021.03.16 |
| [코딩 공부_33] css, 가로·세로 중앙정렬하기 (0) | 2021.03.13 |
| [코딩 공부_32] wiki.html을 css로 꾸며보자 (0) | 2021.03.12 |
| [코딩 공부_31] CSS 박스 모델 (0) | 2021.03.11 |
댓글