차이

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

--- wiki:css:css_note:grid_intro [2021/07/02 15:55]
emblim98 [The source of this article]
+++ wiki:css:css_note:grid_intro [2023/01/13 18:44] (현재)
@@ 줄 11: / 줄 11: @@
 [[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?500 |}}\\
 \\
-\\
-\\
+======Grid Layout======
-\\
-=====Grid Layout=====
 %%CSS Grid Layout Module%%은 행(rows)과 열(columns)이 있는 그리드 기반 레이아웃 시스템을 제공하여,\\
 floats와 positioning을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다.\\
 \\
-=====Grid Elements=====
+======Grid Elements======
 그리드 레이아웃은 하나 이상의 자식 요소가 있는 부모 요소로 구성됩니다.\\
@@ 줄 73: / 줄 71: @@
 \\
 \\
-=====Display Property=====
+======Display Property======
 %%HTML%% 요소는 ''%%display%%'' 속성이 ''%%grid%%'' 또는 ''%%inline-grid%%''로 설정되면 그리드 컨테이너가 됩니다.\\
@@ 줄 169: / 줄 167: @@
 \\
 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=====
+======Grid Gaps======
 각각의 컬럼/로우 사이의 공간을 갭(gaps)이라고 합니다.\\
 {{:wiki:css:css_note:grid_gaps.png?400|}}\\
@@ 줄 189: / 줄 185: @@
    * ''%%grid-row-gap%%''
    * ''%%grid-gap%%''
-\\
 ====Example====
 ''%%grid-column-gap%%'' 속성은 컬럼(세로 열) 사이의 간격을 설정합니다.\\
@@ 줄 367: / 줄 363: @@
 {{:wiki:css:css_note:grid-08.png?400|}}\\
 \\
-=====Grid Lines=====
+======Grid Lines======
 컬럼 사이의 라인들을 컬럼 라인(column lines)이라고 합니다.\\
 {{:wiki:css:css_note:grid_lines.png?400|}}\\
+\\
 그리드 컨테이너 내부에 그리드 아이템을 위치시킬 때 라인 넘버를 참조합니다.\\
@@ 줄 465: / 줄 462: @@
 {{:wiki:css:css_note:grid-10.png?400|}}\\
 \\
-=====All CSS Grid Properties=====
+======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                | 그리드 행 사이의 간격을 지정합니다.                                                                                                             |

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

사용자 도구

사이트 도구

차이

문서 도구