[CSS] 그리드 예제 연습

CSS를 공부하면서 그리드를 배워봤는데 그리드를 통해서

레이아웃을 짜보는 연습이 필요한 것을 느껴 이를 연습해보고자 함.

그리드 예제

현재 가장 해보고 싶은 건 위 이미지를 보면 제목,카테고리, 작성 글들이 저런 식으로 레이아웃 되어 있는데

기초적인 레이아웃을 구성해보고 실제 웹을 꾸밀 때 적용해보고 싶어 이를 실제로 짜보면서

그리드에 대한 이해도를 높이고자 함.

CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) - Web Standard (tistory.com)

CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes)

이 포스트는 Learn CSS Grid in 5 Minute 를 한글로 번역한 글입니다. CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) 웹 레이아웃의 미래를 위한 퀵 튜토리얼 그리드 레이아웃은 웹사이트 디자인의 주

ibrahimovic.tistory.com

이번에야말로 CSS Grid를 익혀보자 – 1분코딩 (studiomeal.com)

이번에야말로 CSS Grid를 익혀보자

이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “

studiomeal.com

위 블로그들의 내용을 보면서 익힌 내용을 정리함.

1. 첫번째 레이아웃

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper{
            display:grid;
        }
        .item{
            border:2px solid black;
            text-align:center;
            margin:2px 0px;

        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>


</body>
</html>

우선 위 코드로 아래 그림과 같이 경계까지 표시해주는 것으로 이것들을 제어했을 때

어떤 식으로 경계가 변하는지를 살펴보며 그리드를 배워볼 예정.

Column과 row

한국어로는 열과 행을 의미

이제 저들을 각각의 열과 행을 정의해주어서 레이아웃을 짜보고자 한다.

즉 Column은 세로 row는 가로를 의미

        .wrapper{
            display:grid;

            grid-template-columns: 100px 100px 100px;

            grid-template-rows: 50px 50px;
        }

각각의 값들은

100px : column의 너비를 지정

50px : row의 높이를 지정

너비와 높이를 지정하는 것을 좀 더 확실히 이해하기 위해 각각 다른 값을 입력한 후 출력값을 알아보자.

        .wrapper{
            display:grid;

            grid-template-columns: 200px 100px 50px;

            grid-template-rows: 100px 40px;
        }

아이템 배치하기

1. 그리드 라인

이제 위와 같이 배열된 아이템들을 자기에 의도에 맞게 배치하면서 레이아웃을 꾸며야 함.

이때 각 아이템의 위치를 배치해줘야 하기 때문에 그 기준이 필요함.

그리드 라인 : 각각 여러개의 그리드 셀로 구성되어 있는데 그 셀들의 구분선

제일 왼쪽부터 1번으로 해서 지정해서 사용.

※ .item:nth-child(1)

item 클래스 즉 부모안에 모든 요소 중 1번째 요소를 지정하는 선택자

   .item:nth-child(1){
            grid-column : 1/4;

        }

        .item:nth-child(2){
            grid-row : 2/4;
        }

각 column과 row에 grid라인을 지정해서 원하는 아이템을 원하는 대로 배치하여 레이아웃을 짤 수 있다.

그리드를 사용할 때 도움이 되는 여러 요소들

1. repeat 함수

repeat는 반복되는 값을 자동으로 처리할 수 있는 함수

repeat(반복횟수, 반복값)

1.1. repeat 함수를 그리드로 적용

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .grid{

            display:grid;
            grid-template-columns: repeat(4, 1fr);
        }
    </style>
</head>
<body>
    <div class="grid">
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
        <div>"A"</div>
        <div>"B"</div>

    </div>


</body>

위 처럼 적용도 가능!

2. minmax 함수

최솟값과 최댓값을 지정할 수 있는 함수입니다.
minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게 하는 것

3. auto-fill과 auto-fit

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.

.grid {

grid-template-columns: repeat(auto-fill, minmax(20%, auto));

}

위 코드에서 auto-fill의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 찰 예정

셀이 모자라면 한칸은 남을 것

하지만 저 코드 내에서 auto-fill을 auto-fit으로 바꾸면 남는 공간을 채우는 것으로 형태가 나타남.

실제 레이아웃 작성

이제 실제 사이트를 만들고자 했을 때 주로 사용될만한 레이아웃을

직접 작성하는 것으로 그리드에 대한 이해를 높이고자 함.

grid.html

0.00MB

우선 위와 같이 기본적인 구성을 끝내놓고 생각을 함.

1. sidebar의 width가 너무 넓은데?

2. contents의 height가 너무 좁다..

3. Footer의 height는 좁아도 될꺼같아.

마무리

위와 같이 기초적인 구성을 해봤지만 레이아웃을 구할 때 적절한 비율이나 값을 얼마나 대입해야 할 지

감이 안잡히는 부분은 디자인 쪽에 가까우니 어떤 상황일 때

어떻게 구성해야 하는지 정확히 인지하면서 그리드를 연습하면 될 거 같다.

저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[CSS] 티스토리 블로그 제목 폰트 바꾸기 (0)	2023.03.09
[CSS] 생활코딩 Web2 내용 정리 (박스 모델, 그리드, 미디어 쿼리, 코드의 재사용) (0)	2023.03.08
[CSS] 생활코딩 Web2 내용정리 (CSS, 기초 문법, 선택자, 속성) (0)	2023.03.08

dwoi의 기록일지

[CSS] 그리드 예제 연습