====== CSS Grid Intro====== * description : CSS Responsive Web Design- Images * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-02 Fri \\ ======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====

Grid Elements

A Grid Layout must have a parent element with the display property set to grid or inline-grid.

Direct child element(s) of the grid container automatically becomes grid items.

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

The display Property:

1
2
3
4
5
6
7
8
9

Set the display property to grid to make a block-level grid container.

\\ {{:wiki:css:css_note:grid-03.png?400 |}} \\ ====Example====

The display Property:

1
2
3
4
5
6
7
8
9

Set the display property to inline-grid to make a block-level grid container.

{{: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%%'' 속성은 컬럼(세로 열) 사이의 간격을 설정합니다.\\

The grid-column-gap Property:

1
2
3
4
5
6
7
8
9

Use the grid-column-gap property to adjust the space between the columns.

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

The grid-row-gap Property:

1
2
3
4
5
6
7
8
9

Use the grid-row-gap property to adjust the space between the rows.

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

The grid-gap Property:

1
2
3
4
5
6
7
8
9

Use the grid-gap property to adjust the space between the columns andthe rows.

 \\ {{:wiki:css:css_note:grid-07.png?400|}}\\ \\ ====Example==== ''%%grid-gap%%'' 속성을 사용하여 행 간격과 열 간격을 하나의 값으로 설정할 수도 있습니다:\\

The grid-gap Property:

1
2
3
4
5
6
7
8
9

Use the grid-gap property to adjustthe space between the columns andthe rows.

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

Grid Lines

1
2
3
4
5
6
7
8

You can refer to line numbers when placing grid items.

 {{:wiki:css:css_note:grid-09.png?400|}}\\ \\ ====Example==== 로우 라인 1에 그리드 아이템을 위치시키고, 로우 라인 3에서 종료하게 합니다.\\

Grid Lines

1
2
3
4
5
6
7
8

You can refer to line numbers when placing grid items.

 {{: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}}