CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )

행복한 수지아빠 2018. 11. 7. 12:21

2018. 11. 7. 12:21

HTML + CSS 스터디 1주차 스터디 정리내용 #2

부산에서 매주 진행되는 CSS 초중급 스터디입니다.
더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.

저번 시간은 Flex 에 대해서 공부했다.

Flex로 화면 배치 하는데 불편함이 다소 있다. 그래서 Css Grid 라는 게 나왔다.

CSS Grid 에 대해서 하나씩 정리해보도록 하겠다.

이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글이다.

CSS Grid 가 필요한 이유?

우선 FlexBox 가 부족한 부분이 뭔지 살펴보자.

만약 여러개의 박스가 들어올 경우 overflow 되면서 배치가 되기 때문에 보기가 안좋을 수 있다.

CSS Grid System 이라고 하는 테이블같은 걸 쉽게 짤 수 있도록 도와준다.

CSS Grid Basic

Grid 시스템은 가로 세로를 지정해서 가능하다.

예를 들어보자. 하나의 박스를 가로 30px, 세로 30px 으로 지정해서 만들수 있다.

<html lang="en">
<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>Document</title>
    <style>
        .father {
            display: grid;
            grid-template-columns: 30px 50px;
            grid-template-rows: 30px 12px;
        }

        .box {
            background-color: #f1c40f;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

Grid 기능

Grid-template-rows, Grid-template-columns

만약 여러개로 만든다고 하면 다음과 같이 가능하다.

30x30
50x30
30x12
50x12

<html lang="en">
<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>Document</title>
    <style>
        .father {
            display: grid;
            grid-template-columns: 30px 50px;
            grid-template-rows: 30px 12px;
            grid-gap: 5px;
        }

        .box {
            background-color: #f1c40f;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

Grid-auto-rows

grid-template-columns 에 지정된 수를 초과하는 경우 높이를 지정할 수 있다.

Grid-auto-columns 반대되는 의미로 사용가능하다.

        .father {
            display: grid;
            grid-template-columns: 30px 50px;
            grid-template-rows: 30px 12px;
            grid-gap: 5px;
            grid-auto-rows: 60px;
        }

Grid-auto-flow

grid-auto-columns 나 grid-auto-rows 사용시 진행되는 배치를 뜻한다. row 나 column 을 지정 가능하다.

flex-direction 과 비슷한 개념이라고 보면 된다.

Grid-template-ares **

문자열로 템플릿을 정한다음 하위 css에 속성을 하나씩 지정해줌

문자열로 템플릿 구성

<html lang="en">

<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>Document</title>
    <style>
        .father {
            display: grid;
            grid-auto-rows: 200px;
            grid-gap: 5px;
            grid-template-areas: "header header header"
                "content content sidebar"
                "content content sidebar"
                "footer footer footer"
        }

        .first {
            grid-area: header;
            background-color: #f1c40f;
        }

        .second {
            grid-area: sidebar;
            background-color: #27ae60;
        }

        .third {
            grid-area: footer;
            background-color: #3498db;
        }

        .fourth {
            grid-area: content;
            background-color: #d35400;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
        <div class="fourth"></div>
    </div>
</body>

</html>

fr and repeate()

fr

fr = fraction : 가능한 최대 넓이를 가지자

반응형을 제작시 계산이 필요하지 않는 경우가 많다. 예를 들어 분할해서 균등하게 넣고 싶다던지 하는..

그럴경우 fr 로 사용 가능하다.

우선 적용전 화면을 살펴보자.

    <style>
        .father {
            display: grid;
            grid-auto-rows: 200px;
            grid-gap: 5px;            
        }

        .first {            
            background-color: #f1c40f;
        }

        .second {            
            background-color: #27ae60;
        }

        .third {            
            background-color: #3498db;
        }

        .fourth {            
            background-color: #d35400;
        }
    </style

위 내용처럼 배치되어있다고 하자. 만약 1,3번째 컬럼을 2,4번째 컬럼보다 2배로 넓었으면 좋을 경우 어떻게 해야 할까?

grid-template-columns: 2fr 1fr 2fr 1fr;

        .father {
            display: grid;
            grid-auto-rows: 200px;
            grid-gap: 5px;          
            grid-template-columns: 2fr 1fr 2fr 1fr;  
        }

이런식으로 2배 넓이를 줄 수 있다.

repeat

반복적으로 fr 로 단위를 줄 수 있다.

.father {
    display: grid;
    grid-auto-rows: 200px;
    grid-gap: 5px;          
    grid-template-columns: repeat(4, 1fr);  
}

부가적으로 fr 을 추가적으로 설정도 가능하다.

...
grid-template-columns: repeat(3, 1fr) 4fr;  
...

minmax,max-content,min-content

minmax

minmax 는 object의 maximum과 minimum 크기를 지정해주는 도구

...
grid-template-columns: minmax(400px, 2fr) repeat(3, 1fr);  
...

줄어들더라도 첫번째 콘테이너는 최소로 유지되는 걸 볼수 있다.

maxcontent

내부에 있는 content를 기반으로 최대 크기를 정하는 게 max-content 의 핵심

grid-template-columns: max-content repeat(3, 1fr);

mincontent

내부에 있는 content를 최소 크기만큼만 확보하는게 mincontent

grid-template-columns: min-content repeat(3, 1fr);

auto-fill, auto-fit

auto-fit

우선 여러개의 grid를 만들었다고 가정하자.

<html lang="en">

<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>Document</title>
    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(4, 1fr);  
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }
    </style>
</head>

<body>
    <div class="father">
        <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 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>
</body>

</html>

만약 각각의 아이템을 꽉 차게 배치를 하고 싶다고 하면 어떻게 해야 할까?

그럴때 auto-fit 으로 구성할 수 있다.

grid-template-columns: repeat(auto-fit, 1fr);

grid-template-columns: repeat(auto-fit, 50px);

grid-template-columns: repeat(auto-fit, 340px);

하지만 공간이 부족할 경우 오른쪽 빨간 박스 처럼 빈공간을 보여주고 하단으로 내려가게 된다.

이걸 방지하기 위해 이전에 공부한 minmax 를 적용하면 채울수 있다.

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

auto-fill

콘텐트가 없다고 해도 레이아웃을 다 채울수 있다. ghost-grid로 나머지 부분을 채우는 걸 뜻한다.

grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));

auto-fit 과 auto-fill 차이점은 ghost-grid 가 있는지 없는지이다.

justify content, Align content, Place content

이전에 배운 Flex 에서 비슷한 속성이 있다.

<html lang="en">

<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>Document</title>
    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(5, 100px);
            color: white;
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
</body>

</html>

이런 형태가 있다고 하자.

justify content

justify-content: center;

이런식으로 중앙으로 이동을 한다.

start,end 로 설정가능하다.

align content

align-content: center;
height: 100vh;

grid 에서도 justify content 는 가로축을 뜻하며 align conent는 세로축을 뜻한다.

Place content

justify conent 와 align content 두개를 합쳐서 설정할 수 있는 속성이다.

place-content: center end;

즉 첫번째 인자는 align content 가 들어가고 두번째 인자는 justify content 가 들어간다.

justify items, align items, place items

justify items

콘텐트가 아닌 내용을 안에 위치 시킨다.

        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(5, 100px);
            color: white;            
            height: 100vh;
            justify-items: center;
        }

justify-items: center;

주의 할점은 외부적으로 컨테이너가 있고 내부적으로만 움직이는 것이다.

align items

align-items: start;

place items

align items 와 justify items 를 혼합해서 사용 가능하다.

place-items: end center;

Grid column, Row Start and End

Grid + Flex 혼합해서 사용

<html lang="en">

<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>Document</title>
    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: repeat(5,1fr);            
        }

        .box {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
        <div class="box">14</div>
        <div class="box">15</div>
    </div>
</body>

</html>

위와 같은 이미지에서 만약 1,2 를 합치고 싶은 경우를 생각해보자.

Grid Columns

Row Start / Row End

        .box:first-child {
            grid-column: 1/3;
        }

대체해서 이런식으로도 사용 가능하다.

.box:first-child {
    grid-column-start: 1;
    grid-column-end: 5;
}

end 에 -1 을 적용시 끝까지 적용된다.

grid-column-end: -1;

Line Naming and Grid-auto-flow

Line naming

이전에 배운 grid-column 에 이름을 붙여서 확장이 가능하다.

    <style>
        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: 
                [first-line] 1fr 
                [awesome-line] 1fr 
                [sexy-line] 1fr 
                [third-line] 1fr 
                [fourth-line] 1fr 
                [line-line];
        }

        .box {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .box:nth-child(even) {
            background-color: #3498db;            
        }

        .box:nth-child(odd) {
            background-color: #34495e;
        }

        .box:first-child {
            grid-column-start: sexy-line;
            grid-column-end: fourth-line;
        }
    </style>

sexy-line 부터 fourth-line 까지 확장하는 걸 뜻한다.

추가적으로 repeat 를 붙여서 사용도 가능하다.

        .father {
            display: grid;            
            grid-gap: 10px;
            grid-auto-rows: 100px;          
            grid-template-columns: [first-line] repeat(5, 1fr) [last-line];
                
        }

        .box:first-child {
            grid-column-start: first-line;
            grid-column-end: last-line;
        }

grid-auto-flow

보시다 시피 1 번 앞에 2개가 비어 있다. 이럴경우 밑에 3,4번을 위로 올려서 채우길 원할 수 있다.

이럴경우 grid-auto-flow 를 사용할 수 있다.

grid-auto-flow 를 row dense 으로 채울수 있다.

.father {
        display: grid;            
        grid-gap: 10px;
        grid-auto-rows: 100px;  
        grid-auto-flow: row dense;        
        grid-template-columns: 
        [first-line] 1fr 
        [awesome-line] 1fr 
        [sexy-line] 1fr 
        [third-line] 1fr 
        [fourth-line] 1fr 
        [line-line];
}

Grid Row, Row Start and End

만약 start 와 end 를 넣기에 애매한 경우 span 으로 이용가능하다.

        .box:first-child {
            grid-row: span 3;
            grid-column: span 3;
        }

화면을 축소해도 1은 유지를 한다.

Grid Area

Grid Area 로 편하게 위치를 지정 할 수 있다.

row start, column start, row end, column end

        .box:first-child {
            grid-area: 2 / 1 / 4 / -1;
        }

        .box:first-child {
            grid-area: span 4 / span 4;
        }

justify, align, place self

내부적으로 아이템들을 좀 더 다른 위치로 만들고 싶은 경우 사용한다.
어떤건 왼쪽 위로 올라가고 어떤건 하단 오른쪽으로 이동하게 구성

.box:first-child {
    justify-self: center;
    align-self:center;
}

place-self: center 으로도 똑같이 적용가능하다.

이상으로 CSS 공부한 내용이었다. 다음시간에는 PostCSS 를 배워보도록 하자.

참석해주셔서 감사합니다.

'스터디 > WEB' 카테고리의 다른 글

Sexy Typograping - Day2 (0)	2019.05.19
Css next grid 클론 ( 1 ~ 5 ) (0)	2018.11.17
PostCSS 스터디 정리 ( 2주차 ) (0)	2018.11.12
Web 디자인시 유의 할 점 정리 (0)	2018.11.09
Flex Css 스터디 정리 (0)	2018.11.06

올해는 머신러닝이다.