<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스 모델 영역에 여백 추가하고 중앙에 배치하기</title>
<style>
body {background-color:black;}
#container {
background-color:white;
width:600px;
padding:20px;
margin:20px auto;
}
div {
border:1px solid #222; /*테두리 */
padding:20px; /*패딩*/
margin-bottom:30px;/*마진*/
}
#description {
border-top-left-radius:30px;
border-top-right-radius:30px;
}
#package {
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
}
td,th {
border:1px solid black;
text-align:center;
padding:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="description">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
</div>
<div id="receipe">
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</div>
<div id="package">
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px">
</colgroup>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
'css' 카테고리의 다른 글
| 8장 실습 3 (0) | 2023.03.28 |
|---|---|
| 8장 예제 - 수평 내비게이션 만들기 (0) | 2023.03.27 |
| 8장 예제 -마진중첩 이해하기 (0) | 2023.03.27 |
| 8장 실습 1 (0) | 2023.03.27 |
| 7장 마무리 문제 4 (0) | 2023.03.26 |