Flex & Grid

 

안녕하세요 콥스랩 기술 블로그입니다!

오늘은 웹페이지의 레이아웃을 조정할 수 있는 CSS 기능인 Flex와 Grid에 대해 이야기해보겠습니다.

그리하여 오늘 함께 알아볼 내용으로는 아래와 같습니다.

 

1. Flex와 Grid가 어떤 기능인지 알아본다.
2. Flex와 Grid의 대표 속성들을 알아본다.
3. Flex와 Grid를 실제로 프로필카드에 적용해본다.

 

왜 사용할까?

우선, 본격적으로 Flex와 Grid에 대해 알아보기 전, 우리는 이 기능을 왜 사용하는지를 알아봐야겠죠?

다음의 사진처럼 프로필카드를 만들었다고 가정해보겠습니다.

 

사진 삭제

사진 설명을 입력하세요.

 

사진 삭제

사진 설명을 입력하세요.

하나의 프로필 카드를 이루는 html 코드는 아래와 같습니다. 최민식님의 프로필카드 예시입니다.

<div class="profile">
    <img src="#">  
    <p>최민식</p>
    <p>1962년생</p>
    <p>소속사 없음</p>
</div>

 

물론, 웹페이지를 만드는 사람의 취향 혹은 목적에따라 단순히 위 사진들처럼 프로필 카드들을 배치할 수도 있을것입니다. 하지만, 이렇게 사용할 경우 하나의 div박스 안쪽 좌우 여백이 매우 낭비되는 것을 볼 수 있습니다. 이럴 때, Flex 혹은 Grid를 사용하여 웹페이지의 요소들을 배치하고 정렬할 수 있습니다.

그러면 보다 자세히 알아볼까요?

 

1. Flex와 Grid가 뭔데?

Flex

“부모 컨테이너와 자식 아이템들에게 배열 규칙을 정해주면 편하지 않을까?”

CSS Flexible Box Layout 또는 Flexbox는 1차원의 유연한 레이아웃을 생성하는 기술입니다. Flexbox는 부모 요소에 적용되며, 그 안에 있는 자식 요소들을 유연하게 배치할 수 있습니다. Flexbox를 사용하면 요소들을 가로 또는 세로 축을 따라 정렬하고, 공간 배분과 정렬을 조정할 수 있습니다. Flexbox는 특히 요소들을 가운데 정렬하거나 동적인 레이아웃을 생성할 때 유용합니다.

 

사진 삭제

 

사진 삭제

 

사진 삭제

사진 설명을 입력하세요.

Grid

“웹페이지를 내가 원하는 공간으로 분리시키고, 내가 원하는 아이템을 원하는 공간에 쉽게 넣을 수 있다면 보다 직관적이지 않을까?”

 

 

사진 삭제

사진 설명을 입력하세요.

사진출처 :

How to Create a CSS Grid Step-by-Step - Developer Drive

CSS Grid Layout은 2차원의 그리드 시스템을 생성하는 기술입니다.

 

이를 사용하여 요소들을 행(row)과 열(column)로 구성된 그리드 안에 배치할 수 있습니다. Grid는 부모 요소에 적용되며, 그리드 아이템을 자식 요소로 가질 수 있습니다. Grid를 사용하면 요소들을 정확하게 배치하고 정렬할 수 있으며, 반응형 디자인에도 유연하게 대응할 수 있습니다.

 

 

쉽게말해, 내 특정 아이템 A를 사진 속 2번 칸에 배치하고싶다. 혹은 9번 칸에 배치하고 싶다. 라고할 때 사용할 수 있겠습니다.

 

2. 대표 속성

1) Flex

<부모 컨테이너에서 사용하는 속성>

• display: flex: Flex 컨테이너를 생성합니다.
• flex-direction: Flex 아이템을 배치할 방향을 설정합니다.
• row : 수평으로 배치
• row-reverse : 수평으로 배치하되 순서를 역으로
• column : 수직으로 배치
• column-reverse : 수직으로 배치하되 순서를 역으로
• justify-content: Flex 아이템을 가로 축 방향으로 정렬합니다.
• fix-start : 부모 컨테이너 시작지점부터 정렬(보통 왼쪽부터 정렬)
• fix-end : 부모 컨테이너 끝지점부터 정렬(보통 오른쪽부터 정렬)
• center : 중앙에 정렬
• space-between : 첫 아이템과 마지막 아이템만 양쪽 끝에 위치한 뒤, 나머지 아이템을 일정한 간격으로 배치
• space-around : 아이템과 아이템의 간격을 일정하게 배치
• space-evenly : 해당 컨테이너 내의 간격이 모두 일정하게 아이템 배치
• align-items: Flex 아이템을 세로 축 방향으로 정렬합니다.
• flex-start : 아이템들을 수직 축의 시작 부분에 정렬합니다.
• flex-end : 아이템들을 수직 축의 끝 부분에 정렬합니다.
• center : 아이템들을 수직 축의 중앙에 정렬합니다.
• baseline : 아이템들의 기준선(baseline)을 맞추어 정렬합니다. 아이템들이 텍스트 요소일 경우, 텍스트의 기준선에 맞추어 정렬됩니다.
• stretch : 아이템들을 수직 축을 따라 늘려서 컨테이너의 높이에 맞추어 정렬합니다. 이는 아이템들이 고정된 높이를 가지지 않고 컨테이너의 높이를 활용하여 자동으로 늘어나는 효과를 만듭니다.
• flex-wrap: Flex 아이템이 한 줄에 배치되지 않을 경우 줄 바꿈을 설정합니다.
• nowrap : 디폴트 값이며, 줄을 바꾸지 않습니다.
• wrap : 한 줄에 배치되지 않을 경우 줄을 바꿔줍니다.

<자식 아이템에서 사용하는 속성>

• order: 요소의 순서를 결정합니다. 작은 숫자일수록 앞에 배치됩니다.
• flex-grow: 요소의 증가 비율을 결정합니다. 여유 공간이 있을 경우 요소의 크기를 증가시킵니다.
• flex-shrink: 요소의 감소 비율을 결정합니다. 공간이 부족할 경우 요소의 크기를 감소시킵니다.
• flex-basis: 요소의 초기 크기를 결정합니다. flex-basis는 flex-grow 및 flex-shrink와 함께 사용될 때 유용합니다.
• flex: flex-grow, flex-shrink, flex-basis의 단축 속성입니다. 순서대로 값들을 설정할 수 있습니다.

2) Grid

• display: grid: Grid 컨테이너를 생성합니다.
• grid-template-rows: 그리드 행의 크기를 설정합니다.
• 예를 들어 “grid-template-rows : 100px, 100px; “ 라고 입력한다면, container내부 아이템들의 1행, 2행 요소의 높이가 100px로 정해집니다.
• repeat(2, 100px)함수를 이용할 수도 있습니다.
• grid-template-columns: 그리드 열의 크기를 설정합니다.
• 예를 들어 “grid-template-columns : 100px 100px 100px”라고 입력한다면, container내부 아이템들을 총 100px 길이의 3열로 구성합니다. 이 때, 행 개수는 자동적으로 늘어납니다.
• grid-column-gap: 열 간격을 설정합니다.
• grid-row-gap: 행 간격을 설정합니다.

혹은, grid-gap을 이용하여 한 번에 열과 행의 길이를 조정할 수 있습니다.

 

 

3. 적용해보기

백문이 불여일견, 백견이 불여일코딩이죠? 지금부터 Flex, Grid를 각각 이용하여 앞서 우리가 만들었던 프로필 카드를 이쁘게 배치해보겠습니다. 제가 위해서 나열했던 다른 속성들을 이용해보시는 것도 좋은 방법이라 생각합니다.

1) Flex 이용

1. 현재 html의 구조입니다. container 안에 div박스(프로필 카드)가 반복되는 형태입니다.

html
<div id="container">

    <div class="profile">
        <img src="#">
        <div class="info">
            <p>최민식</p>
            <p>1962년생</p>
            <p>소속사 없음</p>
        </div>
    </div>
<!--이후 profile클래스 반복-->

</div>

 

2. profile 클래스의 CSS는 다음과 같습니다.

.profile {
        border: 0.5px solid grey;
        font-family: 'Franklin Gothic Medium';
        font-size: small;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        border-radius: 5%;
        background-color: rgb(55, 53, 53);
        color:white;
        text-align: center;
    }

 

3. 프로필카드의 부모요소인 container에 flex를 적용해보겠습니다.

#container {
        display: flex;}

 

 

사진 삭제

사진 설명을 입력하세요.

최초 한 줄씩 배치되었던 초기와는 다르게, 이런식으로 수평방향으로 정렬된 것을 볼 수 있습니다.

이렇게 해보니 처음에 비해 좌우여백 낭비가 많이 줄어들었죠?

 

4.자식요소를 어떤 간격으로 배치할지 container에게 알려줍시다.

#container {
        display: flex;
        justify-content: space-around;   
    }

 

justify-content 속성을 이용하여 container 내부의 아이템들을 수평방향으로 정렬시킬 것임을 알려주고, 속성값으로 space-around를 주어 프로필카드끼리의 간격을 일정하게 만들겠습니다.

 

사진 삭제

사진 설명을 입력하세요.

어떤가요? 바로 위 사진보다 조금 더 안정된 감이 있지 않나요?

 

사진 삭제

사진 설명을 입력하세요.

위의 맨 처음사진과 비교해보면 전체적으로 훨씬 깔끔할 뿐더러, 좌우 여백 낭비를 줄인 것을 보실 수 있습니다. 부모 요소에 단 두 줄, display: flex; justify-content: space-around; 만을 부여했는데도 이렇게 훨씬 깔끔해진다니..! 나머지 컨테이너 속성들과 자식요소에게 사용하는 속성들을 직접 사용해보면서 연습해보시면 좋을 것 같습니다.

2) Grid 이용

1. 초기 html코드와 css 스타일은 Flex에서 사용한 코드와 동일합니다.
2. 부모 container의 css를 다음과 같이 적용해줍니다.

#container {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-auto-rows: 500px;
    }

 

우선 display : grid를 적용해줍니다. 그리고 자식 요소들을 1:1:1:1 비율 4개의 열로 나누고,

행의 크기는 자동으로 500px로 맞춰봅니다.

 

사진 삭제

사진 설명을 입력하세요.

 

사진 삭제

사진 설명을 입력하세요.

그림을 보시면, 4개의 열로 나눠지되, 저절로 2행 크기로 나눠지는 것을 보실 수 있습니다.

만약 Flex에서와 같이 1행 6열로 만드려면 grid-template-columns: repeat(6,1fr)으로 하시면 되겠죠?

 

사진 삭제

사진 설명을 입력하세요.

이렇게 자동적으로 화면 전체를 채웁니다. 너무 다닥다닥 붙어있는 것처럼보이나요?

grid-gap을 이용하여 간격을 줘보겠습니다.

#container {
        display: grid;
        grid-template-columns: repeat(6,1fr);
        grid-auto-rows: 500px;
        grid-gap : 10px;
    }

 

 

사진 삭제

사진 설명을 입력하세요.

#container {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-auto-rows: 500px;
        grid-gap : 10px;
    }

 

grid-template-columns 값만 수정해주면 다음과 같이 2x3 사이즈의 행열 크기로 아이템들을 나열해줍니다.

 

사진 삭제

사진 설명을 입력하세요.

Grid 추가기능 : 만약 손석구씨의 사진이 이동휘씨 영역까지 확장되게 만들고싶다?!

.item{   
/*손석구씨의 profile에 item이라는 클래스를 따로 추가해주겠습니다.*/
        grid-column: 2/4;
    }

 

item 클래스는 현재 손석구씨의 프로필카드만 갖고있습니다. 이를 grid-column: 2/4를 통해 다음과 같이 변화시킬 수 있습니다. 이 개념을 알기 위해선 grid 라인에대한 이해가 있어야합니다. 다음에 기회가될 때 설명해드리겠습니다.

 

사진 삭제

사진 설명을 입력하세요.

 

4. 결론

이렇듯 Flex와 Grid를 통해 내가 원하는 아이템을 원하는 공간에 배치시키고 정렬할 수 있습니다. 내가 만들고자하는 웹사이트의 기능, 목적 등에 따라 Flex와 Grid 중 어떤 기능을 정하면 보다 편리할지 판단한 다음, 각 기능의 여러 속성들을 활용한다면 여러분들도 다양한 웹사이트 레이아웃을 만들 수 있을 것입니다.