문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Examples - CSS Templates ======
<WRAP left notice 70%>
  * description : %%CSS%% Templates 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-12 Mon
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article====
[[https://www.w3schools.com/css/css_templates.asp|CSS Templates]]\\


=====CSS Layout Templates=====

%%CSS%%로 반응형 스타터 템플릿을 만들었습니다.\\
\\
모든 프로젝트에서 자유롭게 수정, 저장, 공유 및 사용할 수 있습니다.\\

=====Header, equal columns and footer=====

====Using float====
<code css>
  <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>
</code>

====Using flexbox====
<code css>
<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>
</code>

====Using grid====
<code css>
<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>
</code>















{{tag>오션, CSS Templates}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
