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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » grid_intro
wiki:css:css_note:grid_intro

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:grid_intro [2021/07/02 14:49]
emblim98 만듦 		wiki:css:css_note:grid_intro [2023/01/13 18:44] (현재)
줄 1: 줄 1:
 ====== CSS Grid Intro====== ====== CSS Grid Intro======
-<WRAP left notice 80%>+<WRAP left notice 70%>
   * description : CSS Responsive Web Design- Images   * description : CSS Responsive Web Design- Images
   * author      : 오션   * author      : 오션
줄 8: 줄 8:
 <WRAP clear></WRAP> <WRAP clear></WRAP>
 \\ \\
-=====The source of this article=====+======The source of this article======
 [[https://www.w3schools.com/css/css_grid.asp|CSS Grid Intro]]\\ [[https://www.w3schools.com/css/css_grid.asp|CSS Grid Intro]]\\
 \\ \\
 ======CSS Grid Layout Module====== ======CSS Grid Layout Module======
-{{:wiki:css:css_note:grid-01.png?600 |}}\\+{{:wiki:css:css_note:grid-01.png?500 |}}\\
 \\ \\
  
줄 19: 줄 19:
 floats와 positioning을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다.\\ floats와 positioning을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다.\\
 \\ \\
 +
 ======Grid Elements====== ======Grid Elements======
 그리드 레이아웃은 하나 이상의 자식 요소가 있는 부모 요소로 구성됩니다.\\ 그리드 레이아웃은 하나 이상의 자식 요소가 있는 부모 요소로 구성됩니다.\\
줄 65: 줄 66:
 </body> </body>
 </code> </code>
-{{:wiki:css:css_note:grid-02.png?600 |}}\\ 
-\\ 
  
 +{{:wiki:css:css_note:grid-02.png?400 |}}\\
 +\\
 +\\
 +\\
 ======Display Property====== ======Display Property======
 %%HTML%% 요소는 ''%%display%%'' 속성이 ''%%grid%%'' 또는 ''%%inline-grid%%''로 설정되면 그리드 컨테이너가 됩니다.\\ %%HTML%% 요소는 ''%%display%%'' 속성이 ''%%grid%%'' 또는 ''%%inline-grid%%''로 설정되면 그리드 컨테이너가 됩니다.\\
줄 110: 줄 113:
 </body> </body>
 </code> </code>
-{{:wiki:css:css_note:grid-03.png?600 |}} +\\ 
 +{{:wiki:css:css_note:grid-03.png?400 |}} 
 +\\
 ====Example==== ====Example====
 <code css> <code css>
줄 153: 줄 157:
 </body> </body>
 </code> </code>
-{{:wiki:css:css_note:grid-04.png?600 |}}\\+ 
 +{{:wiki:css:css_note:grid-04.png?400 |}}\\ 
 +\\
 \\ \\
 \\ \\
 ======Grid Columns====== ======Grid Columns======
 그리드 아이템의 수직선(공간)은 컬럼(columns)라고 합니다.\\ 그리드 아이템의 수직선(공간)은 컬럼(columns)라고 합니다.\\
-{{:wiki:css:css_note:grid_columns.png?400|}}+{{: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]]\\ 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                | 그리드 행 사이의 간격을 지정합니다.                                                                                                             |
  
  
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/grid_intro.1625204974.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki