혜야의 코딩스토리

[HTML&CSS] 나만의 웹 페이지 만들기 1☕ - 메뉴 소개 본문

꿈 : 멋진 개발자 🧸/HTML & CSS

[HTML&CSS] 나만의 웹 페이지 만들기 1☕ - 메뉴 소개

hyeya_ 2022. 6. 8. 23:43

오늘은 HTML&CSS 3일차 ㅎㅎㅎ

스타벅스 웹페이지의 메뉴 소개를 최대한 따라해봤다.

온갖 태그 활용했으나 허접하다ㅋㅋㅋㅋ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Starbucks JEJU</title>
<style type="text/css">
thead {
  background-color: #E6F5ED;
}
tfoot {
  background-color: #E6F5ED;
}
a:hover { /* 마우스가 올라갈 때 */
	text-decoration: none;
	color: #00592D;
}
</style>
</head>

<body>
<table style="width: 100%">
 <thead>
  <tr>
   <td><a href="https://www.starbucks.co.kr/index.do" target="_blank"><img alt="스타벅스 로고" src="https://t1.daumcdn.net/cfile/tistory/99857F4F5E738F472F" width=100 height=100></a></td>
   <td style="text-align: center; color: #00592D"><a href="https://www.starbucks.co.kr/coffee/index.do"><strong>COFFEE</strong></a></td>
   <td style="text-align: center;"><a href="https://www.starbucks.co.kr/menu/index.do"><strong>MENU</strong></a></td>
   <td style="text-align: center;"><a href="https://www.starbucks.co.kr/store/index.do"><strong>STORE</strong></a></td>
   <td style="text-align: center;"><a href="https://www.starbucks.co.kr/responsibility/index.do"><strong>RESPONSIBILITY</strong></a></td>
   <td style="text-align: center;"><a href="https://www.starbucks.co.kr/msr/index.do"><strong>STARBUCKS REWARDS</strong></a></td>
   <td style="text-align: center;"><a href="https://www.starbucks.co.kr/whats_new/index.do"><strong>WHAT'S NEW</strong></a></td>
  </tr>
 </thead>
</table>

<h2>콜드 브루</h2>

<table style="width:100%">
 <tr>
  <td  rowspan="8"><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=9200000002672" target="_blank">
  <img alt="제주 비자림 콜드브루" src="https://image.istarbucks.co.kr/upload/store/skuimg/2022/03/[9200000002672]_20220311105512013.jpg" width="420" height="500"></a></td>
 </tr>
 <tr>
  <td style="font-style: oblique; font-size: 20px;"><strong>제주 비자림 콜드브루</strong><br>
  Jeju Forest Cold Brew </td>
  <td><input type="button" value="나만의 음료로 등록☕"></td>
 </tr>
 <tr>
  <td >제주 천년의 숲 비자림을 연상시키는 음료로 제주 유기농 말차와 콜드 브루가
  제주 특화 콜드 브루 음료</td>
 </tr>
 <tr>
  <td>제품 영양 정보</td>
  <td>Grande(그란데) / 473ml(16 fl oz)</td>
 </tr>
 <tr>
  <td>1회 제공량(kcal)&nbsp;&nbsp;&nbsp;340</td>
  <td>나트륨(mg)&nbsp;&nbsp;&nbsp;340</td>
 </tr>
 <tr>
  <td>포화지방(g)&nbsp;&nbsp;&nbsp;8</td>
  <td>당류(g)&nbsp;&nbsp;&nbsp;43</td>
 </tr>
 <tr>
  <td>단백질(g)&nbsp;&nbsp;&nbsp;10</td>
  <td>카페인(mg)&nbsp;&nbsp;&nbsp;105</td>
 </tr>
 <tr></tr>
 <tfoot>
  <tr>
   <td colspan="3">알레르기 유발요인 : 우유</td>
  </tr>
 </tfoot>
</table>
<hr>
<p>제주 천년의 숲 비자림을 연상시키는 음료로 제주 유기농 말차와 콜드 브루가 조화로운 제주 특화 콜드 브루 음료</p>

 <p><em>(스타벅스 매장 음악🎵)</em></p>
 <audio autoplay controls>
  <source src="../audio/bgm.wav" type="audio/mpeg">
 </audio>

 <p><em>주변 추천 카페 : 💚Meow Cafe🐱💚</em></p>
 <a href="meow_cafe.html" target="_blank">Meow Cafe에 방문하려면 클릭</a> <br>

</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'꿈 : 멋진 개발자 🧸 > HTML & CSS' 카테고리의 다른 글

[HTML&CSS] 스타벅스 제주 홈페이지 만들기  (0) 2022.06.21
[HTML&CSS] 스타벅스 제주 홈페이지 ☕ - 회원 가입  (0) 2022.06.11
[HTML&CSS] 맥모닝 웹 페이지 만들기 🍔🍟🥤  (0) 2022.06.10
[HTML&CSS] 카페 메뉴판 ☕  (0) 2022.06.07
'꿈 : 멋진 개발자 🧸/HTML & CSS' Related Articles more