목차

CSS Examples - CSS Templates

  • description : CSS Templates
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-07-12 Mon


The source of this article

CSS Templates

CSS Layout Templates

CSS로 반응형 스타터 템플릿을 만들었습니다.

모든 프로젝트에서 자유롭게 수정, 저장, 공유 및 사용할 수 있습니다.

Using float

  <style>
    * {
      box-sizing: border-box;
    }
 
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
 
    /* Style the header */
    .header {
      background-color: #f1f1f1;
      padding: 30px;
      text-align: center;
      font-size: 35px;
    }
 
    /* Create three equal columns that floats next to each other */
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 300px;/* Should be removed. Only for demonstration */
    }
 
    /* Clear floats afterthe columns */
    .row:after {
      content:"";
      display: table;
      clear: both;
    }
 
    /* Style the footer */
    .footer {
      background-color: #f1f1f1;
      padding: 10px;
      text-align: center;
    }
 
    /* Responsive layout - makes the three columns stack on top of 
    each other instead of next to each other. */
    @media (max-width: 600px) {
      .column{
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <h2>CSS Template using Float</h2>
  <p>
    In this example, we have created a header, three qeual columns and a footer. 
    On smaller screens, the columns will stack on top of each other.
  </p>
  <p>Resize the browser window to see the responsive effect.</p>
 
  <div class="header">
    <h2>Header</h2>
  </div>
 
  <div class="row">
  <div class="column" style="background-color:#aaa">Column 1</div>
  <div class="column" style="background-color:#bbb">Column 2</div>
  <div class="column" style="background-color:#ccc">Column 3</div>
  </div>
 
  <div class="footer">
    <p>Footer</p>
  </div>
 
</body>

Using flexbox

<style>
    * {
      box-sizing: border-box;
    }
 
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
 
    /* Style the header */
    .header {
      background-color: #f1f1f1;
      padding: 30px;
      text-align: center;
      font-size: 35px;
    }
 
    /* Container for flexboxes */
    .row {
      display: -webkit-flex;
      display: flex;
    }
 
    /* Create three equal columns that sits next to each other*/
    .column{
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      padding: 10px;
      height: 300px;  /* Should be removed. Only for demonstration */
    }
 
    /* Style the footer */
    .footer {
      background-color: #f1f1f1;
      padding: 10px;
      text-align: center;
    }
 
    /* Responsive layout - makes the three columns stack 
    on top of each other instead of next to each other */
    @media (max-width: 600px) {
      .row {
        -webkit-flex-direction: column;
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
 
  <h2>CSS Template using Flexbox</h2>
  <p>
    In this example, we have created a header, three equal columns and a footer. 
    On smaller screens, the columns will stack on top of each other.
  </p>
  <p>Resize the browser window to see the responsive effect.</p>
  <p>
    <strong>Note:</strong> 
    Flexbox is not supported in Internet Explorer 10 and earlier versions.
  </p>
 
  <div class="header">
    <h2>Header</h2>
  </div>
 
  <div class="row">
    <div class="column" style="background-color: #aaa;">Column 1</div>
    <div class="column" style="background-color: #bbb;">Column 2</div>
    <div class="column" style="background-color: #ccc;">Column 3</div>
  </div>
 
  <div class="footer">
    <p>Footer</p>
  </div>
 
</body>

Using grid

<style>
    * {
      box-sizing: border-box;
    }
 
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
 
    /* Style the header */
    .header {
      grid-area: header;
      background-color: #f1f1f1;
      padding: 30px;
      text-align: center;
      font-size: 35px;
    }
 
    /* The grid container */
    .grid-container {
      display: grid;
      grid-template-areas:
        'header header header header header header'
        'left left middle middle right right'
        'footer footer footer footer footer footer';
      /* grid-column-gap: 10px; - if you want gap between the columns */
    }
 
    .left,
    .middle,
    .right {
      padding: 10px;
      height: 300px;  /* Should be removed. Only for demonstration */
    }
 
    /* Style the left column */
    .left {
      grid-area: left;
    }
 
    /* Style the right column */
    .middle {
      grid-area: middle;
    }
 
    /* Style the right */
    .right {
      grid-area: right;
    }
    /* Style the footer */
    .footer {
      grid-area: footer;
      background-color: #f1f1f1;
      padding: 10px;
      text-align: center;
    }
 
    /* Responsive layout - makes the three columns stack 
    on top of each other instead of next to each other. */
    @media (max-width: 600px) {
      .grid-container {
        grid-template-areas:
         'header header header header header header'
         'left left left left left left'
         'middle middle middle middle middle middle'
         'right right right right right right'
         'footer footer footer footer footer footer';
      }
    }
 
 
  </style>
</head>
<body>
 
  <h2>CSS Template using Grid</h2>
  <p>
    In this example, we have created a header, three equal columns and a footer. 
    On Smaller screens, the columns will stack on top of each other.
  </p>
  <p>Resize the browser window to see the responsive effect.</p>
  <p>
    <strong>Note:</strong> 
    The Grid layout Module is not supported in Internet Explorer or Edge 15 and earlier versions.
  </p>
 
  <div class="grid-container">
    <div class="header">
      <h2>Header</h2>
    </div>
 
    <div class="left" style="background-color: #aaa;">Column 1</div>
    <div class="middle" style="background-color: #bbb;">Column 2</div>
    <div class="right" style="background-color: #ccc;">Column 3</div>
 
    <div class="footer">
      <p>Footer</p>
    </div>
  </div>
 
</body>
, ,