[2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(2) N사 오늘의 키친 페이지 마크업
과거 한 키친 페이지의 베이킹? 부분을 마크업 해 본 날.
이 내용을 마크업 해보았다.
진짜 언제적 오늘의 키친이냐고ㅋㅋㅋㅋㅋ
이 때는 CSS3를 배우기 전이라 순수 html5로만 한 상황
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>오늘의 키친 | 네이버 요리<title>
</head>
<body>
<!-- 본문 바로가기 -->
<div id="skipNavi"><a href="#containor">본문 바로가기</a></div>
<!-- //본문 바로가기 -->
<hr>
<div id="wrap">
<!-- header -->
<div id="header">
</div>
<!-- //header -->
<hr>
<!-- container -->
<div id="container">
<!-- snb -->
<div class="snb">
<span><img src="베이킹/images/today.jpg" alt="today Kitchen"></span>
<h2><img src="베이킹/images/sidemenu_todaykitchen.gif" alt="오늘의 키친"></h2>
<ul>
<li><img src="베이킹/images/sidemenu_kitchen1.gif" alt="요리사의 밥상"></li>
<li><img src="베이킹/images/sidemenu_kitchen2.gif" alt="푸드 온 키워드"></li>
<li><img src="베이킹/images/sidemenu_kitchen3_1_on.gif" alt="키친피플을 만나다"></li>
<li><img src="베이킹/images/sidemenu_kitchen4.gif" alt="초간단 5분 요리"></li>
<li><img src="베이킹/images/sidemenu_kitchen5.gif" alt="온라인쿠킹클래스"></li>
<li><img src="베이킹/images/sidemenu_kitchen6.gif" alt="스페셜데이"></li>
<li><img src="베이킹/images/sidemenu_kitchen7.gif" alt="내 몸을 위한 요리"></li>
</ul>
<h3><img src="베이킹/images/Login_title.jpg" alt="Client Login"></h3>
<form action="/" method="post">
<fieldset>
<legend>로그인</legend>
<ol>
<li>
<label for="userID">아이디</label>
<input type="text" id="userID" size="10" required>
</li>
<li>
<label for="userPW">비밀번호</label>
<input type="password" id="userPW" size="10" required>
<input type="image" src="베이킹/images/go_login.jpg" alt="로그인표시">
</li>
</ol>
</fieldset>
</form>
</div>
<!-- //snb -->
<hr>
<!-- content -->
<div id="content">
<h2>
<img src="베이킹/images/title.jpg" alt="10.01.13, 달콤행복 베이킹 쿠쿠이의
레시피 10, 건강한 재료를 사용하는 쿠쿠이의 베이킹을 소개합니다.">
</h2>
<h3>블로거 소개</h3>
<dl>
<dt>블로거|<strong>쿠쿠이</strong></dt>
<dd>
<img src="베이킹/images/p.jpg" alt="접시 위 쿠키사진">
베이킹을 할수록 행복 지수가 높아져 달콤한 매력에 빠져 있어요.
마법의 베이킹에서 빠져나오는 대신, 행복한 베이킹의 매력을 많은 분들과
느끼고 공유하고 싶어 시작했어요. 건강하게 먹거리를 만드는 베이킹 속으로
함께해요.
</dd>
</dl>
<h3>질문과 답변</h3>
<dl>
<dt>닉네임에 얽힌 사연이 있나요?</dt>
<dd>
예전에 하와이에 잠시 살았던 적이 있는데요, 그때 Kukui st.
(쿠쿠이 스트리트)에 살았어요. 사실 쿠쿠이는 쿠쿠이 나무(Candlenut Tree)를
말하는 것인데요, 저는 그 나무를 생각해서 닉네임을 지었기보다는 하와이
Kukui st.에 살았던 추억을 오래 간직하고자 닉네임을 쿠쿠이로 짓게 되었답니다.
</dd>
<dt>처음으로 요리를 즐기게 된 계기가 있으신가요?</dt>
<dd>
어릴 때부터 항상 건강에 좋은 요리, 베이킹 또는 음료에 많은 관심이 있었어요.
그러다 3년 전에 '내 손으로 직접 건강한 베이킹에 도전해보자'는 생각에
갑작스럽게 시작하게 되었답니다. 사먹는 것보다 맛도 좋고 건강하니 식구들도
좋아하고요, 주변 분들에게 선물하면 참 좋아하시더라고요. 베이킹으로 작은 마음을
나눌 수 있다는 즐거움에 빠져 베이킹을 더욱 사랑하게 되었습니다.
</dd>
<dt>어떤 요리를 주로 하시며, 가장 좋아하는 요리는 무엇인가요?</dt>
<dd>
베이킹을 가장 많이 하고, 가장 좋아하는 것도 베이킹에요. 베이킹 중에서는
치즈케이크와 발효빵 종류를 많이 만들고요. 치즈케이크는 고급스러운 선물로
좋고 맛도 좋아 식구들도 가장 좋아하는 아이템이에요. 또한 아침에 빵을 먹는
쿠쿠이네 식구들을 위해 발효빵도 많이 굽는 편이랍니다.</dd>
<dt>나만의 특별한 요리 비법이 있다면?</dt>
<dd>
특별한 비법이라기 보다는 건강을 위해, 레시피에 비해 최대한 설탕을 줄이고
설탕도 유기농 비정제 설탕을 사용하고 있어요. 혹은 설탕 대신 메이플 시럽이나
꿀을 사용하기도 하고요. 밀가루도 수입산이 아닌 우리 밀가루를 사용하고 항상
통밀가루를 섞어서 사용하려고 노력해요. 사실, 신선하고 좋은 재료를 쓰면 그만큼
맛이 좋아지더라고요. 하지만 무엇보다 중요한 것은 베이킹을 할 때 정성과 사랑을
가득 담아 하는 것이라 생각해요. 같은 레시피로 만들어도 사랑과 정성이 가득하면
빵이 더욱 맛있어 지는 것을 확연히 느꼈기 때문에, 가장 특별한 요리 비법은
무엇보다 사랑과 정성이라고 믿고 있답니다.
</dd>
</dl>
<h3><img src="베이킹/images/recipe.jpg" alt="내 최고의 recipe"></h3>
<dl>
<dt>브라우니 치즈케이크</dt>
<dd>
<img src="베이킹/images/001.jpg" alt="브라우니 치즈케이크">
진하고 달콤한 브라우니와 촉촉하고 부드러<br>
운 치즈케이크를 한 번에 즐길 수 있는 세련<br>
되고 맛있는 케이크랍니다. 여성 분들이 좋아<br>
해요.<br>
<a href="#" title="브라우니 치즈케이크">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>사워크림 초콜릿 케이크</dt>
<dd>
<img src="베이킹/images/002.jpg" alt="사워크림 초콜릿 케이크">
촉촉하면서도 진한 초콜릿 맛이 일품인 케이크에<br>
요. 견과류가 토핑으로 잔뜩 올려져 있어서 몸에<br>
도 좋고 보기에도 좋은 케이크랍니다.<br>
<a href="#" title="사워크림 초콜릿 케이크">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>천사가 먹는 엔젤 푸드 케이크</dt>
<dd>
<img src="베이킹/images/003.jpg" alt="엔젤 푸드 케이크">
새하얀 속 살이 눈부셔 천사가 먹는다는 엔젤<br>
푸드 케이크. 달걀 흰자만으로 만들어 칼로리<br>
도 적고, 쫄깃하면서도 부드러운 케이크랍니다.<br>
<a href="#" title="엔젤 푸드 케이크">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>크림치즈 올리브 머핀</dt>
<dd>
<img src="베이킹/images/004.jpg" alt="크림치즈 올리브 머핀">
크림치즈와 올리브가 만나 매력이 있는 머핀이에<br>
요. 촉촉하고 부드러워 머핀이 아니라 컵케이크<br>
를 먹는 듯한 착각이 드는 머핀이지요.<br>
<a href="#" title="크림치즈 올리브 머핀">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>오렌지 마멀레이드 커스터드 빵</dt>
<dd>
<img src="베이킹/images/005.jpg" alt="오렌지 마멀레이드 커스터드 빵">
커스터드 크림과 오렌지 마멀레이드가 만나<br>
서 맛이 한 층 업그레이된 상큼한 크림빵이에<br>
요, 질리지 않고 맛있는 빵이랍니다.<br>
<a href="#" title="오렌지 마멀레이드 커스터드 빵">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>요구르트 후르츠 브레드</dt>
<dd>
<img src="베이킹/images/006.jpg" alt="요구르트 후르츠 브레드">
요구르트의 천연 효모를 이용해서 만든 건강빵이<br>
에요. 견과류와 건과일이 많이 들어가 더욱 건강<br>
에 좋은 천연 효모 빵이랍니다.<br>
<a href="#" title="요구르트 후르츠 브레드">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>통밀 메이플 쿠키</dt>
<dd>
<img src="베이킹/images/007.jpg" alt="통밀 메이플 쿠키">
버터도 설탕도 들어가지 않았지만 통밀의 고<br>
소한 맛과 바삭한 맛을 한껏 느낄 수 있는 건<br>
강 쿠키에요. 못난이 얼굴로 재밌는 쿠키랍니다.<br>
<a href="#" title="통밀 메이플 쿠키">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>고소한 검은깨 스틱 (No 버터)</dt>
<dd>
<img src="베이킹/images/008.jpg" alt="검은깨 스틱">
버터가 들어가지 않아 맛이 깔끔하고 건강도 챙<br>
길 수 있는 검은깨 스틱이에요. 검은깨의 고소함<br>
이 입 안에 가득 남는 매력적인 쿠키지요.<br>
<a href="#" title="검은깨 스틱">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>콘밀 비스코티</dt>
<dd>
<img src="베이킹/images/009.jpg" alt="콘밀 비스코티">
바삭하게 씹히는 맛이 일품인 비스코티에요,<br>
콘밀이 들어가 바삭하고 피스타치오가 들어<br>
가 고소하며, 크랜베리의 맛이 일품이지요.<br>
<a href="#" title="콘밀 비스코티">레시피 보기</a>
</dd>
</dl>
<dl>
<dt>살살 녹는 메이플 크림치즈 푸딩</dt>
<dd>
<img src="베이킹/images/010.jpg" alt="메이플 크림치즈 푸딩">
입에 넣으면 살살 녹는 맛이 일품인 메이플 크림<br>
치즈 푸딩이에요. 바닐라빈이 직접 들어가 은은<br>
한 바닐라향이 솔솔 새어 나온답니다.<br>
<a href="#" title="메이플 크림치즈 푸딩">레시피 보기</a>
</dd>
</dl>
<form action="/" method="post">
<fieldset>
<legend>블로그 담기</legend>
<label for="copy">
<img src="베이킹/images/blog.gif" alt="오늘의 키친을 내 블로그나
카페에 담아가세요!">
</label>
<span>
<input type="image" src="베이킹/images/btn1.gif" alt="주소복사">
<input type="image" src="베이킹/images/btn2.gif" alt="블로그/카페 담기">
</span>
</fieldset>
<fieldset>
<legend>덧글 남기기</legend>
<label for="reply"><img src="베이킹/images/bg_reply_box.gif" alt="덧글 남기기,
글자 수 500자로 제한되며 욕설, 비방글은 삭제 됩니다"></label>
<textarea cols="100" rows="5" id="reply"></textarea>
<input type="image" src="베이킹/images/btn_reply_write.gif" alt="등록하기">
</fieldset>
</form>
</div>
<!-- //content -->
<hr>
</div>
<!-- //container -->
<hr>
<!-- footer -->
<div id="footer">
</div>
<!-- //footer -->
</div>
</body>
</html>
![[2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(2) N사 오늘의 키친 페이지 마크업](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdjIqHc%2Fbtrr1MPlyxm%2FfC8gUAxoeGO0E2GMzgkkXk%2Fimg.jpg)
