<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델 영역의 크기 정하고 테두리 그리기</title>
<style>
table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td {
padding:10px 20px;
}
div {
border:1px solid #222; /* 테두리 */
}
#container {
width:600px; /* 컨테이너의 너비 */
border:solid;
}
</style>
</head>
<body>
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p><b>혈액순환,감기예방</b>등에 좋은 것으로 알려져 있다.</p>
<div id="description">
<h2>레드향 샐러드 레시피</h2>
<p><strong>재료:</strong>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><strong>드레싱:</strong>올리브유 1큰술,레몬즙 2큰술,꿀 1큰술,소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기로 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향,아보카도,토마토를 넣고 드레싱을 뿌리<br>면 끝!</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>개수</th>
<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장 실습 2 (0) | 2023.03.27 |
|---|---|
| 8장 예제 -마진중첩 이해하기 (0) | 2023.03.27 |
| 7장 마무리 문제 4 (0) | 2023.03.26 |
| 7장 마무리 문제 3 (0) | 2023.03.26 |
| 7장 마무리 문제 2 (0) | 2023.03.26 |