웹 사이트의 레이아웃을 구성하는 방법이 여러 가지가 있겠지만 최근에는 그리드 시스템을 많이 사용합니다. 그리드 시스템은 웹 페이지의 레이아웃과 구성 요소를 조정하기 위한 구조적인 시스템으로 그리드를 사용하면 웹 페이지의 구성 요소를 일관되고 조화롭게 배치할 수 있습니다. 일반적으로 웹 사이트의 그리드 시스템은 열(column)과 행(row)으로 구성됩니다. 각 열은 일정한 너비를 가지고 있고, 이를 기준으로 콘텐츠를 배치합니다.
웹 그리드 시스템
웹 그리드 시스템은 주로 Column, Margin, Gutter로 구성되며 이 세 가지 요소의 비율을 조절하여 원하는 그리드를 구성할 수 있습니다.
Margins
여백(Margins)은 콘텐츠 영역의 양 끝에 있는 공간으로, 여백의 넓이는 일정한 값으로 설정되어 있습니다. 여백의 크기가 크면 콘텐츠 영역이 넓어지므로, 큰 화면에 적합합니다.
Columns
칼럼(Columns)은 실제로 콘텐츠를 포함하는 영역을 말합니다. 칼럼의 넓이는 고정된 값으로 설정되어 있으며, 하나 이상의 칼럼이 결합하여 콘텐츠 영역을 형성합니다. 칼럼의 수와 넓이를 조절하여 웹 페이지의 레이아웃을 구성할 수 있습니다.
Gutters
거터(Gutters)는 칼럼과 칼럼 사이의 공간으로, 거터의 넓이도 고정값으로 설정됩니다. 거터는 콘텐츠를 배치할 때 구분을 위한 역할을 합니다. 거터의 크기와 간격을 조정하여 칼럼 간의 간격을 설정할 수 있습니다. 이러한 Column, Margin, Gutter 요소를 적절히 조합하여 웹 그리드 시스템을 구성하면 웹 페이지의 레이아웃이 일관성 있고 조화로워집니다. 그리드 시스템은 웹 사이트의 디자인에 일관성을 부여하고, 콘텐츠의 배치와 구조를 조정하는 데 도움을 줍니다.
반응형 웹과 그리드 시스템
그리드 시스템은 웹 사이트의 반응형 디자인에도 중요한 역할을 합니다. 모바일 기기와 데스크톱 화면의 크기가 다양하므로, 그리드 시스템을 사용하여 콘텐츠를 조정하고, 반응형으로 레이아웃을 조율할 수 있습니다. 그리드 시스템을 사용하면 콘텐츠가 다양한 화면 크기에 맞게 자동으로 배치됩니다. 웹 사이트의 그리드 시스템은 디자인의 일관성과 조화로운 배치를 위해 필수적인 도구입니다. 그리드를 사용하여 콘텐츠를 조정하고 배치함으로써 사용자 경험을 향상하고, 시각적으로 매력적인 웹 페이지를 구성할 수 있습니다.
가변 그리드를 사용한 레이아웃 예제
See the Pen CSS Grid Layout - Template Areas by wjdxo513 (@wjdxo513) on CodePen.
- display: grid : 요소의 display 속성을 그리드 컨테이너로 설정하는 코드입니다. 그리드 컨테이너에는 그리드 항목이 포함되며 이러한 항목의 레이아웃은 그리드 구조를 따릅니다.
- grid-template-columns : 그리드 컨테이너의 열 크기와 수를 정의합니다. 유연한 크기 조정을 위해 픽셀(px), 백분율(%) 또는 fr 단위와 같은 값을 사용하여 각 열의 너비를 지정할 수 있습니다.
- grid-template-rows : 그리드 컨테이너의 행 크기와 수를 정의합니다. grid-template-columns와 유사하게 다른 단위나 비율을 사용하여 각 행의 높이를 지정할 수 있습니다.
- grid-template-areas : 그리드 항목을 그리드 컨테이너 내의 명명된 그리드 영역에 할당합니다. 따옴표로 묶인 문자열 조합을 사용하여 영역을 지정하여 그리드 레이아웃의 시각적 표현을 만들 수 있습니다.
- grid-area: 그리드 컨테이너 내의 특정 그리드 영역에 그리드 항목을 할당합니다. 정의된 그리드 영역의 이름을 사용하여 그에 따라 그리드 항목을 배치할 수 있습니다.
위와 같이 그리드 시스템을 사용하면 웹 사이트 레이아웃을 편하게 만들 수 있습니다.
※ display : grid의 사용법이 궁금하다면 아래 글을 참고해 주세요.
[CSS] display : grid에 대하여(CSS Grid) - 그리드 레이아웃
[CSS] display : grid에 대하여(CSS Grid) - 그리드 레이아웃
그리드(grid)는 이전 포스팅에서 배웠던 플렉스(flex)와 같이 모던 CSS에서 레이아웃을 다루기 위해 사용되는 기능으로 반응형 웹 페이지 레이아웃을 효과적으로 만들기 위한 레이아웃 시스템입니
coding-factory.tistory.com
※ 반응형 웹을 만드는 방법이 궁금하다면 아래 글을 참고해 주세요.
[Web] 반응형 웹 사이트를 만드는 다양한 방법
요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많습니다. 그런데 PC와 스마트폰의 화면 크기가 다르기 때문에 데스크톱 PC용으로 만들어진 웹 사이트를 스마트폰에
coding-factory.tistory.com
'Web > HTML, CSS' 카테고리의 다른 글
| [CSS] display : block, inline, inline-block 속성(블록 레벨, 인라인 레벨 요소) (2) | 2023.06.18 |
|---|---|
| [CSS] 미디어 쿼리(media query) 사용법 (반응형 웹) (1) | 2023.05.27 |
| [HTML/CSS] 이미지 버튼(image button) 만들기 (0) | 2023.05.02 |
| [HTML] 버튼 만들기 button 태그, (input type = "button") (0) | 2023.04.30 |