HTML&CSS/실습

HTML 실습 - 이미지삽입

yunajoe 2023. 1. 22. 11:53

 

 

나의풀이 

 

<!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>Document</title>

  <style>
    #container{
      margin-left:auto;
      margin-right:auto;
      width:500px;

    }  
      table, tr, th, td {
        border: solid 2px; 
        border-collapse: collapse;  
      }    
      th, td {
      padding:10px;
    }
  </style>  
</head>
<body>
  <img src="./images/top.jpg" width="100%" height="25%">
  <div id="container">
    <h1>탐라국 입춘굿</h1>
    <p>탐라국 입춘굿놀이는 전국적으로 유일하게 입춘날 벌어지는 축제이자 제주도의 문화축제 중에서 유일하게 전통시대부터 존재했던 축제이다.</p>
    <br>
    <p>제주에서 입춘은 새천 드는 날</p><br>
    <p>신구간이 끝나 하늘의 1만 8000신이 지상으로 내려와 새해 일들을 시작하는 때이다</p>
    <br>
    <p>자세한 정보보기</p>
    <h3>일정</h3>
    <ol>
      <li>입춘맞이</li>
      <li>낭쉐코시</li>
      <li>기리굿</li>
      <li>열림굿</li>
      <li>입춘굿</li>
    </ol>  
    <h3>먹거리</h3>
    <table>
      <tbody>
        <tr>
          <th>입춘 천냥 국수</th>
          <td>11:00 ~ 16:00</td>
          <td>목관아 주차장</td>
        </tr> 
        <tr>
          <th>제주 향토 음식</th>
          <td>10:30 ~ 17:00</td>
          <td>관덕정 마당</td>
        </tr>  
      <tr>
        <th>입춘 주전부리</th>
        <td>10:30 ~ 17:00</td>
        <td>관덕정 마당</td>
      </tr> 
      <tr>
        <th>차 나눔</th>
        <td>10:30 ~ 17:00</td>
        <td>관덕정 마당</td>
      </tr> 
    </tbody>
    </table>
</div>   
</body>
</html>

 

 

 

해설풀이

<!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>Document</title>
  <style>
    #container{
      width:800px; 
      margin: auto; 
    }

    table, th, td {
      border: solid 1px #222;
      border-collapse: collapse;
    }

    th, td{
      padding:10px;
    }


  </style>
</head>
<body>
  <img src="./images/top.jpg" alt="" width="100%">
  <div id="container">
    <ol>
      <li>입춘맞이 : 1/27(월) ~ 1/31(금)</li>
      <li>낭쉐코사 : 2/1(토)</li>
      <li>거리굿 : 2/2(일)</li>
      <li>열림굿 : 2/3(월)</li>
      <li>입춘굿 : 2/4(화)</li>
    </ol>
    <h2>먹거리</h2>
    <table>  
      <tr>
        <th>입춘 천냥 국수</th>
        <td>11:00 ~ 16:00</td>
        <td>목관아 주차장</td> 
      </tr> 
      <tr>
        <th>제주 향토 음식</th>
        <td>10:30 ~ 17:00</td>
        <td>관덕정 마당</td>  
      </tr> 
      <tr>
          <th>입춘 주전부리</th>
          <td>10:30 ~ 17:00</td>
          <td>관덕정 마당</td>
      </tr> 
      <tr>
        <th>차 나눔</th>
        <td>10:30 ~ 17:00</td>
        <td>관덕정 마당</td>
      </tr>      
    </table> 
</div>   
</body>
</html>