<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>에그마요 예제</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
}
#contents {
width: 1000px;
text-align: center;
}
#contents .title {
/* text-align: center; */
}
#contents .intro {
/* text-align: center; */
}
#contents img {
/* text-align: center; */
}
/* first div */
.first h3 {
padding-bottom: 25px;
}
.first table {
border-collapse: collapse;
border-top: 5px solid #009223;
width: 100%;
margin-bottom: 65px;
}
.first th {
padding: 25px 35px;
border-bottom: 1px solid #009223;
color: #009223;
}
.first td {
padding: 25px 35px;
border-bottom: 1px solid #ddd;
}
.subway{
font-family: "Arial";
font-size: 25px;
font-weight: 900;
color: #009223;
}
.fresh {
font-family: "Arial";
font-size: 25px;
font-weight: 900;
color: #ffc300;
}
/* second div */
.second {
}
.second span {
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="contents">
<h1 class="title">에그마요</h1>
<p class="intro">부드러운 달걀과 고소한 마요네즈가 만나 더 부드러운 스테디셀러</p>
<img src="./images/eggmayo_img.jpg" alt="에그마요 이미지">
<div class="first">
<h3>영양성분표</h3>
<table>
<tbody>
<tr>
<th>중량(g)</th> <th>열량(kcal)</th> <th>당류(g)</th> <th>단백질(g)</th> <th>포화지방(g)</th> <th>나트륨(mg)</th>
</tr>
<tr>
<td>247</td> <td>480</td> <td>7</td> <td>17</td> <td>5</td> <td>450</td>
</tr>
</tbody>
</table>
</div>
<h2><span class="subway">SUBWAY</span> <span class="fresh">3 FRESH</span></h2>
<p>써브웨이만이 가지고 있는 세가지 원칙</p>
<div class="second">
<p>
<span>매장에서 직접 구워낸 신선한 빵</span>
매일 아침 각 매장에서 발효하고 직접 구워서 퀄러티 높은 신선한 빵을 제공합니다.
</p>
</div>
<div class="third">
<p>
<span>매일 배송되는 신선한 야채 제공</span>
매장에서 직접 손질한 야채를 당일판매 원칙으로 제공하고 있습니다.
</p>
</div>
<div class="fourth">
<p>
<span>주문과 동시에 바로 만드는 신선함</span>
주문과 동시에 만들어지는 시스템으로 직접 눈으로 신선함을 확인하실 수 있습니다.
</p>
</div>
</div>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.