ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Web Building] 5. Web Data Page - 웹 페이지 제작 강좌
      Web/Web Building 2015. 6. 12. 14:37


       

      Web Building - Adding a Data Page


      1. What We Will Do

       이번 장에서:
       - 웹 사이트에 데이터 페이지를 추가합니다.


      2. Edit The Style Sheet

       demoweb 폴더에, site.css 스타일 시트를 수정합니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      table {
          width:100%;
      }
      table, th , td {
          border: 1px solid grey;
          border-collapse: collapse;
          padding: 5px;
      }
      th {
          text-align: left; 
      }
      table tr:nth-child(odd) {
          background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
          background-color: #ffffff;
      }
      		cs
       


      3. Create a Data Page

       demoweb 폴더에, customers.html을 생성합니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      <!DOCTYPE html>
      <html>
       
          <head>
            <meta charset="utf-8"/>
            <title>Customers</title>
            <link href="site.css" rel="stylesheet">
          </head>
       
          <body>
       
              <div id="main">
              <h1>Customers</h1>
       
              <table>
              <tr>
                <th>Name</th>
                <th>City</th>
                <th>Country</th>
              </tr>
              <tr>
                <td>Alfreds Futterkiste</td>
                <td>Berlin</td>
                <td>Germany</td>
              </tr>
              <tr>
                <td>Berglunds snabbkop</td>
                <td>Lulea</td>
                <td>Sweden</td>
              </tr>
              <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Mexico D.F.</td>
                <td>Mexico</td>
              </tr>
              <tr>
                <td>Ernst Handel</td>
                <td>Graz</td>
                <td>Austria</td>
              </tr>
              <tr>
                <td>FISSA Fabrica Inter. Salchichas S.A.</td>
                <td>Madrid</td>
                <td>Spain</td>
              </tr>
              <tr>
                <td>Galeria del gastronomo</td>
                <td>Barcelona</td>
                <td>Spain</td>
              </tr>
              <tr>
                <td>Island Trading</td>
                <td>Cowes</td>
                <td>UK</td>
              </tr>
              <tr>
                <td>Koniglich Essen</td>
                <td>Brandenburg</td>
                <td>Germany</td>
              </tr>
              <tr>
                <td>Laughing Bacchus Wine Cellars</td>
                <td>Vancouver</td>
                <td>Canada</td>
              </tr>
              <tr>
                <td>Magazzini Alimentari Riuniti</td>
                <td>Bergamo</td>
                <td>Italy</td>
              </tr>
              <tr>
                <td>North/South</td>
                <td>London</td>
                <td>UK</td>
              </tr>
              <tr>
                <td>Paris specialites</td>
                <td>Paris</td>
                <td>France</td>
              </tr>
              <tr>
                <td>Rattlesnake Canyon Grocery</td>
                <td>Albuquerque</td>
                <td>USA</td>
              </tr>
              <tr>
                <td>Simons bistro</td>
                <td>København</td>
                <td>Denmark</td>
              </tr>
              <tr>
                <td>The Big Cheese</td>
                <td>Portland</td>
                <td>USA</td>
                </tr>
              <tr>
                <td>Vaffeljernet</td>
                <td>Arhus</td>
                <td>Denmark</td>
              </tr>
              <tr>
                <td>Wolski Zajazd</td>
                <td>Warszawa</td>
                <td>Poland</td>
              </tr>
              </table>
       
              <footer id="foot01"></footer>
              </div>
       
              <script src="script.js"></script>
       
          </body>
      </html>
      		cs

       




       



      * W3School을 통해 제작된 강좌입니다.


      저작자표시

      'Web > Web Building' 카테고리의 다른 글

      [Web Building] 8. Web AppML - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 7. Web Http - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 6. Web Navigation - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 4. Web JavaScript - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 3. Web CSS - 웹 페이지 제작 강좌  (0) 2015.06.12
      [Web Building] 2. Web HTML - 웹 페이지 제작 강좌  (0) 2015.06.12

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바