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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Grid Intro======
<WRAP left notice 70%>
  * description : CSS Responsive Web Design- Images
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-02 Fri
</WRAP>
<WRAP clear></WRAP>
\\
======The source of this article======
[[https://www.w3schools.com/css/css_grid.asp|CSS Grid Intro]]\\
\\
======CSS Grid Layout Module======
{{:wiki:css:css_note:grid-01.png?500 |}}\\
\\

======Grid Layout======
%%CSS Grid Layout Module%%은 행(rows)과 열(columns)이 있는 그리드 기반 레이아웃 시스템을 제공하여,\\
floats와 positioning을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다.\\
\\

======Grid Elements======
그리드 레이아웃은 하나 이상의 자식 요소가 있는 부모 요소로 구성됩니다.\\

====Example====
<code css>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color:#2196F3;
      padding: 10px;
    }
    .grid-item {
      background-color: rgba(255, 255, 255,0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <h1>Grid Elements</h1>

  <p>
     A Grid Layout must have a parent element with the <em>display</em> property 
     set to <em>grid</em> or <em>inline-grid</em>.</p>

  <p>
     Direct child element(s) of the grid container automatically becomes grid items.
  </p>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
</code>

{{:wiki:css:css_note:grid-02.png?400 |}}\\
\\
\\
\\
======Display Property======
%%HTML%% 요소는 ''%%display%%'' 속성이 ''%%grid%%'' 또는 ''%%inline-grid%%''로 설정되면 그리드 컨테이너가 됩니다.\\

====Example====
<code css>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;  /* 3개의 컬럼(세로 열)을 만들고, 자동으로 3개의 로우(가로 행)가 생성 */
      background-color: #2196F3;
      padding: 10px;
    }

    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <h1>The display Property:</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

  <p>
     Set the <em>display</em> property to <em>grid</em> to make a block-level grid container.
  </p>
</body>
</code>
\\
{{:wiki:css:css_note:grid-03.png?400 |}}
\\
====Example====
<code css>
  <style>
    .grid-container {
      display: inline-grid;
      grid-template-columns: auto auto auto;  /* 3개의 컬럼(세로 열)을 만들고, 자동으로 3개의 로우(가로 행)가 생성 */
      background-color: #2196F3;
      padding: 10px;
    }

    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <h1>The display Property:</h1>
  <div class="grid-container">
    <!-- .grid-item$*9 엔터 클릭하면 아래와 같이 -->
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

  <p>
     Set the <em>display</em> property to <em>inline-grid</em> 
     to make a block-level grid container.
  </p>
</body>
</code>

{{:wiki:css:css_note:grid-04.png?400 |}}\\
\\
\\
\\
======Grid Columns======
그리드 아이템의 수직선(공간)은 컬럼(columns)라고 합니다.\\
{{:wiki:css:css_note:grid_columns.png?400|}}\\
\\
ref : The source of this png file is [[https://www.w3schools.com/css/css_grid.asp|CSS Grid Intro]]\\
\\

======Grid Rows======
그리드 아이템의 수평선(공간) 로우(rows)라고 합니다.\\
{{:wiki:css:css_note:grid_rows.png?400|}}\\
\\
ref : The source of this png file is [[https://www.w3schools.com/css/css_grid.asp|CSS Grid Intro]]\\



======Grid Gaps======
각각의 컬럼/로우 사이의 공간을 갭(gaps)이라고 합니다.\\
{{:wiki:css:css_note:grid_gaps.png?400|}}\\
\\
아래의 속성들을 사용하여 캡 사이즈를 조정할 수 있습니다.\\
   * ''%%grid-column-gap%%''
   * ''%%grid-row-gap%%''
   * ''%%grid-gap%%''

====Example====
''%%grid-column-gap%%'' 속성은 컬럼(세로 열) 사이의 간격을 설정합니다.\\

<code css>
  <style>
    .grid-container {
      display: grid; 
      grid-column-gap: 50px;
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }

    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <h1>The grid-column-gap Property:</h1>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>

  </div>

  <p>Use the <em>grid-column-gap</em> property to adjust the space between the columns.</p>
</body>
</code>

{{:wiki:css:css_note:grid-05.png?400|}}\\
\\
====Example====
''%%grid-row-gap%%'' 속성은 로우(rows, 가로 행) 사이의 간격을 설정합니다.\\

<code css>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #2196f3;
      padding: 10px;
      grid-row-gap: 50px;
    }

    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>

</head>
<body>
  
  <h1>The grid-row-gap Property:</h1>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

  <p>Use the <em>grid-row-gap</em> property to adjust the space between the rows.</p>
</body>
</code>

{{:wiki:css:css_note:grid-06.png?400|}}\\
\\
====Example====
''%%grid-gap%%'' 속성은 ''%%grid-row-gap%%'' 및 ''%%grid-column-gap%%'' 속성에 대한 속기 속성(shorthand property)입니다.\\

<code css>
  <style>
    .grid-container {
      display: grid;
      grid-gap: 50px 100px; /* rows and columns in order */
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <h1>The grid-gap Property:</h1>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

  <p>Use the <em>grid-gap</em> property to adjust the space between the columns <em>and</em>the rows.</p>

</body>
</code>
\\
{{:wiki:css:css_note:grid-07.png?400|}}\\
\\
====Example====
''%%grid-gap%%'' 속성을 사용하여 행 간격과 열 간격을 하나의 값으로 설정할 수도 있습니다:\\
<code css>
  <style>
    .grid-container {
      display: grid;
      grid-gap: 50px; /* one value for both rows and columns */
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <h1>The grid-gap Property:</h1>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

  <p>Use the <em>grid-gap</em> property to adjustthe space between the columns <em>and</em>the rows.</p>

</body>
</code>

{{:wiki:css:css_note:grid-08.png?400|}}\\
\\
======Grid Lines======
컬럼 사이의 라인들을 컬럼 라인(column lines)이라고 합니다.\\
{{:wiki:css:css_note:grid_lines.png?400|}}\\
\\
그리드 컨테이너 내부에 그리드 아이템을 위치시킬 때 라인 넘버를 참조합니다.\\

====Example====
컬럼 라인 1에 그리드 아이템을 위치시키고, 컬럼 라인 3에서 종료하게 합니다.\\
<code css>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }

    .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }

    .item1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }
  </style>
</head>
<body>
  
  <h1>Grid Lines</h1>

  <div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
  </div>

  <p>You can refer to line numbers when placing grid items.</p>

</body>
</code>

{{:wiki:css:css_note:grid-09.png?400|}}\\
\\
====Example====
로우 라인 1에 그리드 아이템을 위치시키고, 로우 라인 3에서 종료하게 합니다.\\
<code css>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }

    .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }

    .item1 {
      grid-row-start: 1;
      grid-row-end:3;
    }
  </style>
</head>
<body>

  <h1>Grid Lines</h1>

  <div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
  </div>

  <p>You can refer to line numbers when placing grid items.</p>
</body>
</code>

{{:wiki:css:css_note:grid-10.png?400|}}\\
\\
======All CSS Grid Properties======
^ Property               ^ Description                                                                                                                      ^
| column-gap             | 컬럼(열) 사이의 간격을 지정합니다.                                                                                                             |
| gap                    | 행 간격 및 열 간격 속성에 대한 속기 속성                                                                                                         |
| grid                   | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns 및 grid-auto-flow 속성에 대한 속기 속성  |
| grid-area              | 그리드 아이템의 이름을 지정합니다. 즉 이 속성은 grid-row-start, grid-column-start, grid-row-end 및 grid-column-end 속성에 대한 속기 속성입니다.                   |
| grid-auto-columns      | 기본 컬럼 크기를 지정합니다.                                                                                                                 |
| grid-auto-flow         | 자동 배치된 항목이 그리드에 삽입되는 방법을 지정합니다.                                                                                                  |
| grid-auto-rows         | 기본 행 크기를 지정합니다.                                                                                                                  |
| grid-column            | grid-column-start 및 grid-column-end 속성에 대한 속기 속성                                                                                 |
| grid-column-end        | 그리드 아이템을 종료할 위치를 지정합니다.                                                                                                          |
| grid-column-gap        | 컬럼 사이의 간격의 크기를 지정합니다.                                                                                                            |
| grid-column-start      | 그리드 아이템을 시작할 위치를 지정합니다.                                                                                                          |
| grid-gap               | grid-row-gap 및 grid-column-gap 속성에 대한 속기 속성                                                                                      |
| grid-row               | grid-row-start 및 grid-row-end 속성에 대한 속기 속성                                                                                       |
| grid-row-end           | 그리드 아이템을 종료할  위치를 지정합니다.                                                                                                         |
| grid-row-gap           | 행 사이의 간격 크기를 지정합니다.                                                                                                              |
| grid-row-start         | 그리드 아이템을 시작할 위치를 지정합니다.                                                                                                          |
| grid-template          | grid-template-rows, grid-template-columns 및 grid-areas 속성에 대한 속기 속성                                                              |
| grid-template-areas    | 명명된 그리드 아이템을 사용하여, 열과 행을 표시하는 방법을 지정합니다.                                                                                         |
| grid-template-columns  | 열의 크기와 그리드 레이아웃의 열 수를 지정합니다.                                                                                                     |
| grid-template-rows     | 그리드 레이아웃의 행 크기를 지정합니다.                                                                                                           |
| row-gap                | 그리드 행 사이의 간격을 지정합니다.                                                                                                             |
























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

사용자 도구

사이트 도구

문서 도구
