[CSS/Grid/Flexbox] CSS, 그리드( Grid ), 플렉스박스 ( Flexbox )에 대해서 알아보자

IT/Html

[CSS/Grid/Flexbox] CSS, 그리드( Grid ), 플렉스박스 ( Flexbox )에 대해서 알아보자

당근당근이

2018. 9. 5.

CSS 그리드( Grid ) , 플렉스박스 ( Flexbox )

에 대해서 알아보자

오늘 소개할 것은 바로 그리드(Grid)와 플렉스박스(Flexbox)

입니다. CSS(종속형 시트 or 캐스케이딩 스타일 시트)의 종류 입니다.

레이아웃과 스타일을 정의할 때의 사용되는 언어로 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역활을 담당한다고 할 수 있습니다.

즉 HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다는 뜻입니다.

그중 Flexbox 와 Grid 에서 많이 사용하는 언어를 알아보도록 합시다.

이론보다는 한번 보는 것이 빠릅니다.

보시죠!

아래와 같은 html 파일을 만듭니다. 물론 이 외에도 헤더와 바디가 있어야겠죠?

우선 class가 container인 div 태그를 만들어 줍니다.

container 안으로 class가 box인 div 태그를 만들어 줍니다.

    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

이후 <style></style>태그 안에 CSS를 선언합니다.

        .container {
            display: flex;
        }

그 다음 container 클래스에 display: flex 를 선언하면 flexbox를 사용하겠다는 의미 입니다.

그 다음 간단한 네모 박스를 만들어 보겠습니다.

        .box {
            width: 200px;
            height: 200px;
            background-color: gray;
            border: 1px solid white;
        }

flexbox에는 몇가지 속성이 있는데 대표적으로 flex-direction, flex-wrap, justify-content,

align-items, align-content 등... 이 있습니다. 우선적으로 살펴볼 것은 바로 justify-content 속성입니다.

container 클래스 안에 아래와 같이 justifiy-content 라는 속성에 space-between 을 써줍시다.

        .container {
            display: flex;
            justify-content: space-between;
        }

그렇다면 바로 만든 html 파일을 실행합시다.

순식간에 박스가 정렬되었습니다.

하지만 웹페이지를 줄이다보면 아래와 같이 한줄에 모든 박스들을 정렬하려고 합니다.

그래서!! flex-wrap 이란 아이를 추가합니다.

        .container {
            display: flex;
            justify-content: space-between;  
            flex-wrap: wrap; 
        }

wrap 말고도 nowrap, wrap-reverse 속성이 있습니다. 한번씩 사용해 보세요

위와 같이 브라우저를 줄여도 크기가 줄어들지 않고 다음 칸으로 넘어가게 됩니다.

완벽한 정렬과 원하는 순서대로 정렬이 가능한 Flexbox 레이아웃입니다.

하지만 flexbox에도 문제점이 존재합니다.

바로 보시죠

박스를 몇개를 추가하였습니다. 이상한 점이 보이시나요??

대부분의 홈페이지는 파란색에 위치하는게 아닌 빨간색에 위치하길 원합니다.

이런 이상한 점 때문에(?) Grid 라는 엄청난 녀석이 눈에 띄게 되었습니다.

Grid : "이게 바로 CSS 레이아웃이다!"

라고 말하면서 태어났습니다.

바로 보도록 하시죠

Grid 와 Flexbox의 문법은 거의 비슷합니다.

아래와 같이 display: grid; 선언을 해주면 끝이죠

        .container {
            display: grid;
        }

이후 몇가지 속성이 있는데 그 중 사용해 볼 속성은 바로

grid-template-colums 와 grid-template-rows 입니다.

아래와 같이 입력해보세요

        .container {
            display: grid;
            grid-template-columns: 250px 170px;
            grid-template-rows: 140px 200px;
            grid-gap: 5px;
        }

전체 html 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 250px 170px;
            grid-template-rows: 140px 200px;
            grid-gap: 5px;
        }
        .box {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

</html>

다 입력하셨으면 한번 실행해 봅시다.

그럼 바로 아래와 같은 화면을 보실 수 있습니다.

어? 박스가 5개 인데 왜 4개 뿐이야?? 라는 의문을 가지게 되었다면

당신의 관찰력과 호기심이 상당히 높다는 것을 알 수 있습니다. 바로 찾아 보았다면 발전의 가능성이 보입니다. 항상 의문을 가지는 것은 좋은 습관인것 같습니다.

columns 나 rows 에 픽셀을 추가하면 됩니다.

하지만.. API 에서 데이터를 받아와야하는데 데이터 개수를 모른다?? 하는 분들을 위해

Grid 에서는 자동으로 레이아웃을 잡아주는 grid-auto-rows, grid-auto-columns 속성이 존재합니다.

박스를 몇개 아래와 같이 추가해 주시고

    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

아래와 같이 grid-auto-rows 속성을 추가해 봅시다.

        .container {
            display: grid;
            grid-template-columns: 250px 170px;
            grid-template-rows: 140px 200px;
            grid-gap: 5px;
            grid-auto-rows: 100px;
        }