![[2021/12/16]국비지원 HTML5 코딩툴 기본학습 8 커피빈 index 마크업](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvyNi3%2Fbtrr3jepHib%2FZXjsJpi6EIFfeI4kg8qXq0%2Fimg.jpg)
이 날은 하루종일 커피빈 홈페이지의 메인화면만 html5 마크업 한 날.
코드 보면 죄다 ul li 임을 알 수 있다.
담임강사의 코딩스타일이 그러할 뿐 굳이 ul li로만 묶지 않아도 되고,
본문 영역 나눌 때 div로 크게 묶어놓고 내용을 목록으로 했을 때
더 의미가 있거나 적절하다 싶을 때 ul li를 쓰면 될 듯 하다.
당시 사이트화면
작업 내용
<!DOCTYPE html>
<html lang="en">
<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">
<!-- topmenu -->
<div class="topmenu">
<!-- innertopmenu -->
<div class="innertopmenu">
<dl>
<dt>topmenu</dt>
<dd><a href="#">로그인</a></dd>
<dd><a href="#">매장찾기</a></dd>
<dd><a href="#">체용정보</a></dd>
<dd><a href="#">단체 및 기업구매</a></dd>
<dd><a href="#">고객서비스</a></dd>
<dd><a href="#">회원정보 안내</a></dd>
</dl>
</div>
<!-- //innertopmenu -->
</div>
<!-- //topmenu -->
<!-- innerheader -->
<div class="inner">
<h1><a href="#"><img src="markupimages/logo.png" alt="커피빈로고"></a></h1>
<ul>
<li><a href="#">BUY ONLINE</a>
<ul>
<li><a href="#">View All</a></li>
<li><a href="#">♥2021 커피빈몰 BEST AWARDS♥</a>
<ul>
<li><a href="#">재고 한정 품목</a></li>
<li><a href="#">할인 상품</a></li>
</ul>
</li>
<li><a href="#">분쇄형 커피</a>
<ul>
<li><a href="#">드립백</a></li>
<li><a href="#">소풍커피</a></li>
</ul>
</li>
<li><a href="#">파우치 커피</a>
<ul>
<li><a href="#">♥NEW♥파우치 커피</a></li>
</ul>
</li>
<li><a href="#">캡슐커피</a>
<ul>
<li><a href="#">♥NEW♥네스프레스 호환용</a></li>
<li><a href="#">CBTL 호환용</a></li>
</ul>
</li>
<li><a href="#">원두</a>
<ul>
<li><a href="#"><em>원두가이드</em></a></li>
<li><a href="#">MD's Pick</a></li>
<li><a href="#">라이트 로스트</a></li>
<li><a href="#">미디엄 로스트</a></li>
<li><a href="#">다크 로스트</a></li>
</ul>
</li>
<li><a href="#">티</a>
<ul>
<li><a href="#"><em>티 가이드</STRONG></em></a></li>
<li><a href="#">클래식티</a></li>
<li><a href="#">허브티</a></li>
<li><a href="#">프룻티</a></li>
</ul>
</li>
<li><a href="#">상품</a>
<ul>
<li><a href="#">스틱커피</a></li>
<li><a href="#">아이스 텀블러</a></li>
<li><a href="#">보온 텀블러</a></li>
<li><a href="#">머그</a></li>
<li><a href="#">파우더</a></li>
<li><a href="#">푸드</a></li>
<li><a href="#">기타상품</a></li>
</ul>
</li>
<li><a href="#">CBTL시스템</a>
<ul>
<li><a href="#">CBTL머신</a></li>
<li><a href="#">액세서리</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">MEMBER'S CLUB</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">THE COFFEEBEAN</a></li>
<li><a href="#">CBTL</a></li>
</ul>
<a href="#">검색창 열기<img src="markupimages/ico_search.png" alt="검색돋보기"></a>
<form>
<fieldset>
<legend>검색창</legend>
<label for="srch">검색어 입력</label>
<input type="search" id="srch" placeholder="검색어를 입력하세요" >
<input type="image" id="srch" src="markupimages/ico_search.png" alt="검색돋보기">
</fieldset>
</form>
</div>
<!-- //innerheader -->
</div>
<!-- //header -->
<hr>
<!-- container -->
<div id="container">
<!-- NewMenu -->
<div class="NewMenu">
<h2>신메뉴</h2>
<a href="#"><img src="markupimages/MainBanner.jpg" alt="Deep in Chocolate and Vin Chaud"></a>
<ul>
<li>스파클링 제주레몬 로제뱅쇼 레귤러 6,900원</li>
<li>마르코스 초콜릿 에스프레소 라떼 스몰 6,700원</li>
<li>제주레몬 로제뱅쇼 레귤러 6,500원</li>
</ul>
</div>
<!-- //NewMenu -->
<!-- NewEvent -->
<div class="NewEvent" title="NewEvent">
<h2>새 이벤트</h2>
<a href="#"><img src="markupimages/MainBanner_2_17.jpg" alt="특별한 시즌, 반짝이는 마그넷과 함께.
홀리데이 메탈 마그넷 2종 혜택, 12월 3일 금요일 재고 소진 시까지"></a>
<ul>
<li>Event 01 매장에서 제조음료 1잔 + 3,000원(1ea) 구매<small>(병입음료 구매시 불가)</small></li>
<li>Event 02 일반 판매 5,900원(1ea)</li>
</ul>
</div>
<!-- //NewEvent -->
<!-- MDPick -->
<div class="MDPick">
<h2>MD's Pick</h2>
<ul>
<li>
<a href="#">
<img src="markupimages/12300007.jpg" alt="2022다이어리세트보라색">
<strong>[30%할인]2022다이어리세트(퍼플)</strong>
<span>#커피빈 하면 보라색♥ 보라색하면 커피빈♥</span>
<del>24,900원</del>
<span>17,400원</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/11110042.jpg" alt="커피빈 잉글리시브렉퍼스트라떼 파우치 10개입">
<strong>커피빈 잉글리시 브렉퍼스트라떼 파우치(10개입)</strong>
<span>♥신제품 출시♥</span>
<span>15,000원</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/11110041.jpg" alt="커피빈 바닐라 라떼 파우치 10개입">
<strong>커피빈 바닐라 라떼 파우치(10개입)</strong>
<span>♥신제품 출시♥</span>
<span>15,000원</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/11110036.jpg" alt="네스프레소 전용 캡슐커피 시그니처 블렌드">
<strong>[네스프레소 전용] 캡슐커피(시그니처 블렌드)</strong>
<span>♥NEW♥</span>
<span>7,500원</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/11110037.jpg" alt="네스프레소 전용 캡슐커피 콜롬비아 다크">
<strong>[네스프레소 전용] 캡슐커피(콜롬비아 다크)</strong>
<span>♥NEW♥</span>
<span>7,500원</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/11110038.jpg" alt="네스프레소 전용 캡슐커피 디카페인 로스트블렌드">
<strong>[네스프레소 전용] 캡슐커피(디카페인 로스트 블렌드)</strong>
<span>♥NEW♥</span>
<span>7,500원</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/12500022.jpg" alt="커피빈실속선물세트A호">
<strong>[30% OFF]커피빈 실속선물세트A호</strong>
<span>♥NEW 선물세트♥</span>
<del>18,500원</del>
<span>12,950원</span>
</a>
</li>
</ul>
</div>
<!-- //MDPick -->
<!-- WhatsNew -->
<div class="WhatsNew">
<h2>What's New</h2>
<ul>
<li>
<a href="#">
<img src="markupimages/PC_B_2_5.jpg" alt="신제품사진">
<span>2021 12 Deepin Chocolate & Vin Chaud</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_Bb_4.jpg" alt="기념일에디션2">
<span>2021 12 Holiday Edition_3</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_315.jpg" alt="기념일에디션1">
<span>2021 12 Holiday Edition_1</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_313.jpg" alt="GoodforMe음료사진">
<span>2021 11 Good for Me</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_shot_21.jpg" alt="비건스테이크잉글리시머핀사진">
<span>2021 11 Plant Steak English Muffin</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_shot_19.jpg" alt="샤이닝머그사진">
<span>2021 11 Shining Mug</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_311.jpg" alt="커피와 차사진">
<span>2021 11 Coffeebean & Tea</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_309.jpg" alt="2022커피빈플레너사진">
<span>202s Coffeebean Planner</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_307.jpg" alt="가을음료사진">
<span>2021 10 One step Closer to Autumn</span>
</a>
</li>
<li>
<a href="#">
<img src="markupimages/PC_B_305.jpg" alt="가을상품사진">
<span>2021 09 Fall in a Good Mood</span>
</a>
</li>
</ul>
</div>
<!-- //WhatsNew -->
<!-- sns -->
<div class="sns">
<!-- innersns -->
<div class="innersns">
<ul>
<li><a href="#"><img src="markupimages/266201857_634010037754249_4016158323516286828_n.jpg" alt="sns1번사진" width="200" height="200"></a></li>
<li></li>
<li><a href="#"><img src="markupimages/264478190_936174077277661_3532324231894495973_n.jpg" alt="sns3번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/265095219_985906355294754_8666812367338610486_n.jpg" alt="sns4번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/265244633_577277846699934_3194659492806155558_n.jpg" alt="sns5번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/264564042_909841639898695_2875155300272628874_n.jpg" alt="sns6번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/264275790_877543689580226_4516452448556047814_n.jpg" alt="sns7번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/264794153_599389827836440_4957292729009508563_n.jpg" alt="sns8번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/264627561_3330397497196399_407490473301327869_n.jpg" alt="sns9번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/263828416_229089146012811_4733980297912646386_n.jpg" alt="sns10번사진" width="200" height="200"></a></li>
<li><a href="#"><img src="markupimages/264164982_3198986440334034_6378608792782084031_n.jpg" alt="sns11번사진" width="200" height="200"></a></li>
<li></li>
</ul>
</div>
<!-- //innersns -->
<p><a href="#">OUR INSTAGRAM - @COFFEEBEAN_KR</a></p>
</div>
<!-- //sns -->
<hr>
</div>
<!-- //container -->
<hr>
<!-- footer -->
<div id="footer">
<!-- sitemap -->
<div class="inner">
<ul>
<li><span>Buy Oneline</span>
<ul>
<li><a href="#">View All</a></li>
<li><a href="#">커피</a></li>
<li><a href="#">티</a></li>
<li><a href="#">CBTL시스템</a></li>
<li><a href="#">상품</a></li>
</ul>
</li>
<li><span>Member's Club</span>
<ul>
<li><a href="#">커피빈 멤버스 클럽</a></li>
<li><a href="#">나의 커피빈</a></li>
</ul>
</li>
<li><span>Menu</span>
<ul>
<li><a href="#">음료</a></li>
<li><a href="#">푸드</a></li>
<li><a href="#">상품</a></li>
<li><a href="#">카드</a></li>
</ul>
</li>
<li><span>Store</span>
<ul>
<li><a href="#">매장 찾기</a></li>
<li><a href="#">신규매장</a></li>
</ul>
</li>
<li><span>The Coffee Bean</span>
<ul>
<li><a href="#">커피빈 코리아</a></li>
<li><a href="#">커피빈 소식</a></li>
<li><a href="#">사회공헌</a></li>
<li><a href="#"><strong>제휴 마케팅 제안</strong></a></li>
<li><a href="#">채용안내</a></li>
<li><a href="#">신규 입점 제의</a></li>
<li><a href="#">결산공고</a></li>
</ul>
</li>
<li><span>CBTL</span>
<ul>
<li><a href="#">CBTL 가이드</a></li>
<li><a href="#">CBTL 서비스</a></li>
<li><a href="#">AS 안내</a></li>
<li><a href="#">AS 신청</a></li>
<li><a href="#">CBTL FAQ</a></li>
<li><a href="#">제품설명서</a></li>
<li><a href="#">기업용 머신</a></li>
</ul>
</li>
</ul>
</div>
<!-- //sitemap -->
<!-- innerfooter -->
<div class="innerfooter">
<ul>
<li><a href="#">홈페이지 이용약관</a></li>
<li><a href="#"><em>개인정보처리방침</em></a></li>
<li><a href="#">영상정보처리기기운영방침</a></li>
<li><a href="#">멤버스카드이용약관</a></li>
<li><a href="#">위치기반서비스 이용약관</a></li>
</ul>
<address>
<span>(주)커피빈코리아 대표이사 감종철 ㅣ 사업자등록번호 120-86-07029 ㅣ 통신판매업신고 제 2010-서울강남-00560</span>
<span>서울시 강남구 봉은사로 99길 7 ㅣ 고객센터 02-1577-4708 (09:00 - 18:00) ㅣE-mail : cbk@coffeebeankorea.com</span>
</address>
<p>© 2021. The Coffee Bean. All rights reserved.</p>
<ul>
<li><a href="#"><img src="markupimages/ico_facebook.png" alt="페이스북아이콘"></a></li>
<li><a href="#"><img src="markupimages/ico_instagram.png" alt="인스타그램아이콘"></a></li>
<li><a href="#"><img src="markupimages/ico_blog.png" alt="블로그아이콘"></a></li>
<li><a href="#"><img src="markupimages/ico_twitter.png" alt="트위터아이콘"></a></li>
</ul>
</div>
<!-- //innerfooter -->
</div>
<!-- //footer -->
</div>
</body>
</html>
결과물
더보기
90사이즈로 출력해야 스크롤바 출력이 안 되더라.
이 날이 웹개발 수업에서 순수 html5 작업의 마지막 날
17일부터 css3 들어감