HTML,CSS/Excercise

ch04 video

낭구리 2021. 9. 16. 14:10
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/poster.css">
</head>
<body>
  <div id="container">
    <img src="images/tangerines.jpg" alt="레드향">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    <hr>
    <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>
    <video src="medias/salad.mp4" controls width="700"></video> -컨트롤러
    <!-- <video src="medias/salad.mp4" width="700" autoplay muted loop></video> --> 자동뮤트

    <hr>
    <h2>상품 구성</h2>
    <table>
      <caption>선물용과 가정용 상품 구성</caption>
      <colgroup>
        <col style="background-color:#eee;">
        <col>
        <col span="2" style="width:150px">
        <!-- span 속성을 사용해 합치기 전
        <col style="width:150px">
        <col 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>
</body>
</html>

'HTML,CSS > Excercise' 카테고리의 다른 글

ch04 table  (0) 2021.09.16
ch04 지원양식  (0) 2021.09.16
ch04 탐라국 이미지mp4영상/ 링크(_blank)  (0) 2021.09.16
ch04 탐라국 입춘굿  (0) 2021.09.16
ch04 ol / li  (0) 2021.09.16