Bootstrap - grid 영역 이름으로 정의하여 사용 방법과 팁
Bootstrap - grid 영역 이름으로 정의하여 사용 방법과 팁
템플릿을 이용하다보면 대부분의 템플릿들이 부트스트랩을 사용하고 반응형을 위해 부트스트랩에서 제공하는 그리드를 사용하여 페이지 구성을 많이한다. 처음에 그리드를 접하면 바로 쉽게 이해가지는 않는다. 이번에 웹 페이지 작업 중에 그리드 형식을 직접 만들어야 하는 상황이 생겼고 이때 사용한 방법과 세부적으로 컨트롤 할 수 있는 팁(찾고 나니 별거 아니었는데 찾는데 시간이 참 걸렸다.)을 정리하려고 한다.
먼저 그리드를 사용할때 여러 방식들이 존재한다. 그중에 그리드를 이름으로 정의해서 사용하는 방법을 정리하려고 한다. 이렇게 되면 css에 선언을 해줘야 하는 것이 꽤 많아지지만 각 셀 별로 컨트롤 할 수 있다는 장점이 있다. 그리드에 기본 개념과 다른 방식들은 여러 블로그의 잘 정리 된게 많으니 여기서는 넘어가도록 한다.
기본 구조
그리드 레이아웃을 사용하기 위해서는 기본적인 HTML 구조가 있다. 컨테이너와 아이템 구조로 만들면 된다. 부모 요소가 되는 그리드 컨테이너와 레이아웃을 만들 자식 요소로 구성된다. 즉 컨테이너 내의 레이아웃을 만들면 된다. 선언 후 display는 grid라고 선언해준다.
.container {
width: 100%;
height: 80%;
display: grid;
}
이름으로 정의하기
이렇게 컨테이너를 정의하면 이제 레이아웃을 잡기 위해 이름으로 구역을 지정해주면 된다. 쉽게 예를 들기 위해 다음과 같은 구조로 된 레이아웃을 만들어 본다.
ex)
--------------------------
header
--------------------------
side1 main side2
--------------------------
footer
--------------------------
상단은 header 이고 중단은 총 3구역으로 나뉜다. 하단은 footer 이다. 구역으로만 보면 상단 1, 중단 3, 하단 1인데 이때 최대 구역 개수를 기준으로 만들면 된다. 즉 이름으로 선언할때는 다음과 같이 구성된다고 생각하면 된다.
ex)
--------------------------
header header header
--------------------------
side1 main side2
--------------------------
footer footer footer
--------------------------
그리드 이름으로 정의 방법은 grid-template-areas 를 사용하면 된다. 다음 속성은 container에 적용해도 되고 하위에 wrapper 태그를 하나 더 생성해서 적용해도 된다.
grid-template-areas:
"header header header"
"side1 main side2"
"footer footer footer";
팁1 - 공백 넣기
다음과 같은 구조에서 공백을 넣고 싶을때는 . 을 이용하면 된다.
ex)
--------------------------
header header header
--------------------------
side1 main side2
--------------------------
. . .
--------------------------
footer footer footer
--------------------------
팁2 - 각 행 or 열 컨트롤하기
행 - grid-template-rows
열 - grid-template-columns
선언 후 열에 값들을 넣어주면 되는데 위에 예를 기준으로 그리드 구역이 3x3 이라고 생각했을때 다음과 같이 적용할 수 있다. 열이 3개이기 때문에 각각을 지정해주기 위해서는 다음과 같이 값을 3개 넣어주면 된다.
1. grid-template-columns: 200px 200px 500px; --> px로 고정값을 주고 싶고 각 열들의 크기를 원하는 값으로 주고 싶을때 이용
2. grid-template-columns: 1fr 1fr 1fr; --> fr는 fraction 이라는 의미로 숫자의 비율대로 나눈다는 의미. 즉 1:1:1 비율로 나눈다.
3. grid-template-columns: repeat(3, 1fr); --> 다음은 동일한 값이 반복됐을때 사용가능
4. grid-template-columns: 100px 200px auto; --> 마지막 열은 auto
행은 columns을 rows로 바꾸고 똑같은 원리로 적용해서 값을 넣으면 된다.
마무리
내용을 봐서 알겠지만 행과 열이 많아진다면 선언해줘야 하는게 적지는 않다. 하지만 각 열과 행을 자유자제로 컨트롤 가능하니 세세하게 그리드를 잡을 일이 있다면 강추한다.