<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아메리카노1</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
color: #000;
background-color: #cccccc;
}
div {
margin: 50px auto; /* 상하 50px, 좌우 auto */
padding: 50px;
width: 700px;
border:5px solid #fff;
}
h1 {
color: #cc1400;
font-size: 40px;
}
h2 {
margin-top: 30px;
padding: 10px 20px;
background-color: #fff;
font-size: 20px;
}
ul {
padding: 10px 30px;
}
table {
/* border-collapse: 값; 값 = collapse(선을 중첩시킴), seperate(선을 분리시킴, 기본 값) */
border-collapse: collapse;
border: 1px solid #fff;
width: 100%; /* div 크기와 같게 설정*/
}
caption {
/* font-weight: 값; 100, 200, 300, 400, 500 , 600(Bold), 700, 800, 900, lighter, bold, bolder, normal(기본 굵기) */
font-weight: 600; /* 600 대신 bold로도 가능 */
text-align: right;
}
th {
padding: 10px;
color: #fff;
background-color: #999;
border: 1px solid #fff;
}
td {
padding: 10px;
border: 1px solid #fff;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>아메리카노 Americano</h1>
<p>진한 에스프레소의 맛과 향을 부드럽게 즐길 수 있는 아메리칸 스타일의 커피</p>
<h2>Health Point</h2>
<ul>
<li>에스프레소에는 발암물질 제거</li>
<li>신장활동 촉진</li>
<li>당수치 조절</li>
</ul>
<table>
<caption>제품영양정보 (Regular 사이즈 기준)</caption>
<tr>
<th> </th>
<th>칼로리</th>
<th>당류</th>
<th>단백질</th>
<th>포화지방</th>
<th>나트륨</th>
<th>카페인</th>
</tr>
<tr>
<th>HOT</th>
<td>15 Kcal</td>
<td>1g</td>
<td>1g</td>
<td>0g</td>
<td>0mg</td>
<td>105mg</td>
</tr>
<tr>
<th>ICED</th>
<td>15 Kcal</td>
<td>1g</td>
<td>1g</td>
<td>0g</td>
<td>0mg</td>
<td>105mg</td>
</tr>
</table>
</div>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.