2차원 레이아웃은 어떻게 설계할까?
그리드 레이아웃 속성
--
그리드 레이아웃 속성은
웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 속성으로
가로(row)와 세로(column)를 같이 사용해서 레이아웃을 설계한다.
그리드를 사용하면 플렉스 박스보다 더욱 폭넓게 설계가 가능하다.
구성 요소
그리드 레이아웃을 확인하는 방법은
시각적으로 확인하기 위해서는 크롬 브라우저의 개발자 도구의 Elements 탭에서
그리드 컨테이너로 지정된 태그에 있는 그리드 아이콘을 누른다.
--
기본 속성
--
display 속성
그리드 레이아웃을 지정하는 속성으로
그리드 컨테이너를 정의할 때 사용한다.
기본 형식
display: flex;
/* 또는 */
display: inline-flex;- flex : 적용된 요소의 다음 요소가 항상 줄 바꿈
- inline-flex : 다음 요소가 주변에 배치
display 속성이 정의된 요소가 "플렉스 컨테이너"가 되며,
해당 요소의 자식 요소는 "플렉스 아이템"이 된다.
grid-template-columns & grid-template-rows 속성
그리드 컨테이너의 기본 구성 요소인 "행", "열"을 생성하는 속성이다.
행과 열을 정의하여 그리드 셀을 생성하게 된다.
기본 형식
grid-template-columns: 1열값 2열값 ...;
grid-template-rows: 1행값 2행값 ...;속성 값은 공백으로 구분하며 순서대로 앞에서부터 1행 or 1열의 값이 된다.
예시 코드
<style>
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
}
.div-1 {
background-color: yellow;
border: 2px dotted black;
}
.div-2 {
background-color: yellowgreen;
border: 2px dotted black;
}
</style>
<!-- 생략 -->
<body>
<div class="grid-container">
<div class="div-1">item1</div>
<div class="div-2">item2</div>
<div class="div-1">item3</div>
<div class="div-2">item4</div>
</div>
</body>
/* 속성 값에 auto도 사용 가능 (그리드 컨테이너에 맞춰서 자동으로 지정) */
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 100px 100px;
}
그 외에도 다양한 방법으로 속성 값을 지정할 수 있다.
/* 각 열 또는 행이 같은 크기일 때 repeat() 함수로 지정 가능 */
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: repeat(2, 100px); /* 100px 100px */
grid-template-rows: repeat(2, 50px); /* 50px 50px */
}/* minmax() 함수를 통해 열 또는 행 크기의 최솟값/최댓값 지정 가능 */
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: minmax(10px, 100px) 100px; /* 10 ~ 100px 범위 지정 100px 설정 */
grid-template-rows: minmax(10px, 50px) 50px; /* 10 ~ 50px 범위 지정 50px 설정 */
}/* repeat(), minmax() 함수 동시 사용 가능 */
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: repeat(2, minmax(10px, 100px));
grid-template-rows: repeat(2, minmax(10px, 50px));
}
row-gap & column-gap 속성
그리드 갭을 설정하는 속성으로
행과 열이 만나 이루어지는 그리드 셀과 셀 사이의 간격을 설정한다.
- row-gap : 행과 행의 간격
- column-gap : 열과 열의 간격
기본 형식
row-gap: 크기;
column-gap: 크기;
예시 코드
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
row-gap: 10px;
column-gap: 20px;
}
--
그리드 레이아웃의 정렬 속성
--
align-items & align-self 속성
- align-items : 그리드 셀의 높이가 그리드 아이템보다 큰 경우 그리드 아이템을 그리드 셀의 세로 방향으로 정렬
- align-self : 그리드 셀의 세로 방향으로 그리드 아이템을 각각 개별로 정렬
기본 형식
align-items: 속성값;align-self: 속성값;
예시 코드
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
align-items: center;
}
justify-items & justify-self 속성
- justify-items : 그리드 셀의 너비가 그리드 아이템보다 큰 경우 그리드 아이템을 그리드 셀의 가로 방향으로 정렬
- justify-self : 그리드 셀의 가로 방향으로 그리드 아이템을 각각 개별로 정렬
기본 형식
justify-items: 속성값;justify-self: 속성값;
예시 코드
.grid-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
justify-items: center;
}
place-items & place-self 속성
- place-items : align-items, justify-items 속성을 한 번에 사용할 수 있는 속성
- place-self : align-self, justify-self 속성을 한 번에 사용할 수 있는 속성
기본 형식
place-items: align-items justify-items;
place-self: align-self justify-self;--
그리드 레이아웃의 배치 속성
--
grid-template-areas & grid-area 속성
- grid-template-areas : 그리드 컨테이너에 사용할 각 영역에 이름을 부여하는 속성
- grid-area : 각 요소를 그리드 컨테이너에 배치할 영역 이름을 정의하는 속성
만약 위 그림과 같은 배치로 그리드 레이아웃을 만든다고 가정하면
gird-template-areas 속성으로 각 영역의 이름을 지정하고,
grid-area 속성을 통해 각 그리드 아이템에 배치할 영역 이름을 정의할 수 있다.
예시 코드
.grid-container{
display:grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
#header{
grid-area:header;
}
#sidebar{
grid-area:sidebar;
}
#content{
grid-area:content;
}
#footer{
grid-area:footer;
}
</style>
<!-- 생략 -->
<div class="grid-container">
<p id="header">header</p>
<p id="sidebar">sidebar</p>
<p id="content">content</p>
<p id="footer">footer</p>
</div>
grid-column-start & grid-column-end, & grid-row-start & grid-row-end 속성
- grid-column-start : 그리드 넘버를 이용해서 그리드 아이템의 열 시작 위치를 지정
- grid-column-end : 그리드 넘버를 이용해서 그리드 아이템의 열 종료 위치를 지정
- grid-row-start : 그리드 넘버를 이용해서 그리드 아이템의 행 시작 위치를 지정
- grid-row-end : 그리드 넘버를 이용해서 그리드 아이템의 행 종료 위치를 지정
예시 코드
<style>
.flex-container{
width:500px;
height:300px;
background-color: lightgray;
border: 2px solid black;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.div-1 {
background-color: yellow;
border: 2px dotted black;
grid-column-start: 1;
grid-column-end: 3;
}
.div-2 {
background-color: yellowgreen;
border: 2px dotted black;
grid-column-start: 3;
grid-column-end: 4;
}
.div-3 {
background-color: lightcoral;
border: 2px dotted black;
grid-row-start: 2;
grid-row-end: 4;
}
.div-4 {
background-color: lightpink;
border: 2px dotted black;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
</style>
<!-- 생략 -->
<div class="flex-container">
<div class="div-1">item1</div>
<div class="div-2">item2</div>
<div class="div-3">item3</div>
<div class="div-4">item4</div>
</div>
grid-column & grid-row 속성
- grid-column : grid-column-start 속성과 grid-column-end 속성을 한 번에 사용할 수 있는 단축 속성
- grid-row : grid-row-start 속성과 grid-row-start 속성을 한 번에 사용할 수 있는 단축 속성
기본 형식
grid-column: start end;
grid-row: start end;grid-column: start/span 열 개수;
grid-row: start/span 행 개수;
예시 코드
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;grid-column: 1 3;
grid-row:1 3;grid-column: 1/3; /* 1/span 3 */
grid-row: 1/3; /* 1/span 3 */--
'Language > CSS' 카테고리의 다른 글
| 반응형 웹 페이지를 위한 미디어 쿼리 (0) | 2025.03.17 |
|---|---|
| 플렉스 박스 레이아웃 (1차원 레이아웃 설계하기) (0) | 2025.03.15 |
| 웹 폰트, 아이콘 폰트 사용 (0) | 2025.03.15 |
| [속성] 요소 자체(크기, 위치, 회전 등)를 변형하는 효과 속성 (0) | 2025.03.14 |
| [속성] 애니메이션 속성을 통해 전환 효과 제어 (0) | 2025.03.14 |
