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로 바꾸고 똑같은 원리로 적용해서 값을 넣으면 된다. 

 

마무리

 

내용을 봐서 알겠지만 행과 열이 많아진다면 선언해줘야 하는게 적지는 않다. 하지만 각 열과 행을 자유자제로 컨트롤 가능하니 세세하게 그리드를 잡을 일이 있다면 강추한다.