[CSS]-3. GRID와 FLEX

안녕하세요. 오늘은 grid와 flex에 관해 알아보겠습니다.

---

웹에는 레이아웃 영역이 존재합니다. 이러한 레이아웃 영역은 구획 부분에서 그 내용을 알려드렸는데요.
우리는 레이아웃을 통해 우리만의 공간을 만들 수 있습니다. 예를 들어 상단에 로고를 배치한다던지 아니면 메인 영역에 다양한 내용을 포함한다던지 이때 css에서는 display를 통해 해당역역이 어떤 방식으로 배치하는지 설정할 수 있습니다. 이때 우리는 display: grid 혹은 display: flex를 통해 레이아웃 배치되는 영역에 관해 설정 할 수 있습니다.

grid와 flex의 차이로는 해당되는 영역의 해당되는 (박스)의 영역에 관해 말할 수 있습니다.
grid의 박스의 영역으로는 2차원으로 수직과 수평을 동시에 설정할 수 있는 반면에 flex의 경우 수직 혹은 수평 중 한 방향만 설정할 수 있습니다.

---

✔ GRID

grid를 크게 나누면 전체 영역인 container와 각각의 grid 영역에 들어가는 grid item이 있고 item들 간의 각각의 간격을 설정할 수 있는 gap이 있습니다.

grid를 통해 해당 열 과 행을 따로 설정 할 수 있습니다. columns - 세로(열) / rows - 가로(행)
열 과 행을 설정할때는 각각의 grid의 크기를 설정 할 수 있는데 px이나 rem 단위로 서로를 나뉠 수 있고 fr(fraction)으로 숫자 비율대로 grid의 크기를 나뉠 수 있습니다. 또 repeat을 이용해 grid를 몇개 만들고 각각의 크기를 fr로 설정 할 수 있습니다.

코드를 통해서 더욱 자세히 알아보겠습니다.

body {
    margin: 0;
}
section {
    background-color: black;
    display: grid;
    grid-gap: 1rem;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    grid-template-columns: repeat(5, 1fr);
    padding: 1rem;
    /* fr : Fraction */
    /* grid-template-rows: ; */
}

section > div {
    padding: 5rem 0;
    background-color: beige;
}

section > div:first-child {
    grid-column-start: 1;
    grid-column-end: 3; 
    grid-row-start: 1;
    grid-row-end: 3;
}

만들어진 grid입니다.

여기서 검은색 칸은 html에서 제가 div를 총 8개 만들었기 때문에 빈칸이 나타난 부분입니다.

---

✔ FLEX

flex를 크게 나누면 방향을 설정하는 direction과 지정한 방향에 대한 수직 정렬인 align-items와 수평의 정렬인 justify-content와 공간에 따라 비율을 조절할 수 있는 flex-grow(늘어날 공간 비율)와 flex-shirnk(줄어 날 공간 비율)이 있습니다.

코드를 통해 한번 알아보겠습니다.

body > div { 
    background-color: orange;
    display: flex;
    flex-direction: row;
    /* 
    flex-direction: FLEX 내부 내용의 흐름 방향
        - row : (기본 값) 행
        - row-reverse : 행 반대 방향(우->좌)
        - column : 열 
        - column-reverse : 열 반대 방향(하->상)
        */
    align-items: center ;
    /* 
    align-content: 나중에 확인함
    align-items: 'flex-direction'에서 지정한 방향과 수직한 방향에 대한 정렬 
        - stretch : (기본 값) 늘어뜨린다.
        - flex-start : row -> 위 / column -> 왼 출발점 정렬
        - flex-end : 끝점 정렬
        - center : 가운데 정렬
        */  
    justify-content: center;
    /* 
    justify-content: 'flex-direction'에서 지정한 방향과 수평한 방향에 대한 정렬 
        - flex-start : (기본값) row -> 왼 / column -> 위
        - flex-end : row -> 우 / colum -> 아래
        - center : 가운데 정렬
        - space-around : 내/외부 여백을 부여한다. (내부 여백은 외부 여백의 두배다. )
        - space-evenly : 내/외부 여백을 동일하게 부여한다.
        - space-between : 내부(요소 사이사이) 여백을 동일하게 부여한다.    
    */
    /* align-items와 justify-content의 경우 flex-direction이 기본값 즉, row가 아니면 둘의 위치가 바뀜 !! */
}

body > div > div.logo {
    font-size: 2rem;
}

body > div > div.stretch {
    
    flex-grow: 1;
    flex-shrink: 1;
    /* 
    flex-grow: 숫자, 기본값 0, 여유 공간에 따라 늘어날 비율 
    flex-shrink: 숫자, 기본값 0, 여유 공간에 따라 줄어들 비율*/
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;

}

만들어진 flex입니다.

flex로 만든 헤더 부분입니다. flex의 경우에는 grid와 다르게 item의 순번을 지정할 수 없기 때문에 어느 부분에 배치할지 충분히 생각한 뒤에 결정하는 것이 좋습니다.

---

포스팅을 마무리하겠습니다. 다음 주도 파이팅!