혜야의 코딩스토리

[HTML&CSS] 카페 메뉴판 ☕ 본문

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

[HTML&CSS] 카페 메뉴판 ☕

hyeya_ 2022. 6. 7. 23:25

HTML 수업 2일차

이틀동안 배운 태그를 이용해서 카페 메뉴판을 만들었다.

허접하지만... 이틀동안 배운 태그를 나름 활용해봤다 ㅋㅋ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meow Cafe</title>
</head>

<body>
 <h1 style="color: #8B4F1D;">&nbsp;&nbsp;&nbsp; 🧡Welcome to Meow🐱 Cafe!!🧡</h1>
 <figure>
 <img alt="" src="https://image5jvqbd.fmkorea.com/files/attach/new/20200131/3842645/789350980/2658302006/ea8408159b3577f19b7e7b9a0b1142c6.jpg" width="450" height="400">
 </figure>

 <p style="font-size: 17px">
 &nbsp;&nbsp;&nbsp; 하우스 로스팅 원두의 신선한 커피를 맛보고 싶다면<br>
 &nbsp;&nbsp;&nbsp; 공인 1급 바리스타가 최고급 원두만을 직접 엄선한 <strong><i>냥카페☕</i></strong>로 오세요.
 </p>
 
 <table style="border: 4px solid #8B4F1D; width:80%;">
 <tr rowspan="6">
  <th style="color:#8B4F1D; font-size: 25px" colspan="3">Coffee</th>
  <th  style="color:#8B4F1D; font-size: 25px" colspan="3">Tea & Ade</th>
 </tr>

 <tr>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-coffee01.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>에스프레소</i></td>
  <td style="font-size: 17px"><i>3500</i></td>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-tea03.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>캐모마일</i></td>
  <td style="font-size: 17px"><i>4000</i></td>
 </tr>
 
 <tr>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-coffee05.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>아메리카노</i></td>
  <td style="font-size: 17px"><i>4100</i></td>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-tea01.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>얼그레이</i></td>
  <td style="font-size: 17px"><i>4000</i></td>
 </tr>
 
 <tr>
   <td><img src="http://beecoffeekorea.com/_img/sub/menu-coffee02.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>카페라떼</i></td>
  <td style="font-size: 17px"><i>4500</i></td>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-tea04.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>페퍼민트</i></td>
  <td style="font-size: 17px"><i>4000</i></td>
 </tr>
 
 <tr>
   <td><img src="http://beecoffeekorea.com/_img/sub/menu-coffee03.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>카페모카</i></td>
  <td style="font-size: 17px"><i>5000</i></td>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-drink03.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>자몽에이드</i></td>
  <td style="font-size: 17px"><i>5000</i></td>
 </tr>
 
 <tr>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-coffee04.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>바닐라라떼</i></td>
  <td style="font-size: 17px"><i>5000</i></td>
  <td><img src="http://beecoffeekorea.com/_img/sub/menu-drink08.png" width="120" height="120"></td>
  <td style="font-size: 17px"><i>레몬에이드</i></td>
  <td style="font-size: 17px"><i>5000</i></td>
 </tr>
 </table>

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

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

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