css-grid

YOOJIN PARK·2021년 11월 16일
0

grid 설명
지난주에 그리드에대한 대략적인 설명을 해주셨는데, 오늘은 플렉스와 비교한 활용법에 대한
수업을 받을 수 있었다. 사용에 익숙해지면 매우 편리할 거같고, 특히 반응형을 크게 고려하지 않아도되서,
여러가지로 이용할 수 있을것 같다.

Grid

그리드가 플렉스보다 더 최신 문법
익스플로러는 지원하지 않는다.

용어

그리드 트랙: 행 또는 열
그리드 셀: 한 칸
그리드 라인: 셀 구분 선(1번부터 시작한다. 자바스트립트와 헷갈리지 말자)

표현방법

Px, %,fr,repeat등으로 표현가능
fr-fraction: 분수

/* grid-template-columns: 200px 500px 200px; */
            /* grid-template-columns: 1fr 2.5fr 1fr; */
            /* grid-template-columns: 25% 50% 25%; */
            grid-template-columns: repeat(3, 1fr);

column이 각각의 비율대로 생겨나는것을 볼 수있다.

사용방법

<방법 1>

Grid-template-area 로 지정하는 법

.container {
            border: 10px solid black;
            display: grid;
            gap: 10px;
            grid-template-areas: 'header   header   header '
                                 'section  section  aside'
                                 'footer   footer   footer';
        }


좀 더빠르게 구성할 수 있는 방법이다.
하지만 현업에서는 2번 방법을 좀 더 많이 쓴다고 한다.
그리고 일단은 레이아웃을 잡을 수 있는 진짜 빠른 방법이다.

<방법2>
행과 열의 영역을 지정해주는 법
이방법을 더 많이 사용한다고 함

.header {
            border: 10px solid tomato;
            grid-row:  1/2;
            grid-column: 1/4;
        }

        .section {
            border: 10px solid blue;
            grid-row:  2/3;
            grid-column: 1/3;
        }

        .aside {
            border: 10px solid darkred;
            grid-row:  2/3;
            grid-column: 3/4
        }

        .footer {
            border: 10px solid deeppink;
            grid-row:  3/4;
            grid-column: 1/4;
        }

결과는 똑같은 내용이다.
맨앞의 라인이 1이라는 점을 기억해야 한다.


이번주에는 지난주에 클론코딩 했던 mdn페이지를 grid로 다시 구성해보기로 했다.
지난 번에 header-nav-section-article-footer로 구분했는데, 그에 맞춰서 나누어 진행할 예정이다.
내일은 특강이 있는날!! 오늘까지 배운거 싹 정리하고, 내일 새로운 마음으로 특강가야지~😋

profile
개발자를 꿈꾸는 개린이입니다.

0개의 댓글