All Articles

wecode 4주차_3일 TIL_CSS Grid로 레이아웃을 짜보자 1탄

image.png

그리드 하면 생각하는게 와플의 정직한 직선들이라 사진에 넣어보았다 ㅋㅋㅋ 이전까지는 flex만 써봤는데(사실 아직 flex를 마스터한것도 아니다.. 다음번에 정리해놔야지) flex보다 좀 더 유용할 것 같은 Grid에 대해 정리해보려고 한다!

왜 Grid를 쓸까?

  • 2차원 레이아웃을 짜기 쉽다
  • 부트스트랩보다 심플한 마크업 구조!

Grid

Grid, 말 그대로 격자선을 말한다. 크게 전체를 감싸는 container와 그 안의 요소들로 나눌 수 있는데 더 크게 나눠보자면 row와 column으로도 나누어지겠지! flex처럼

먼저 html 구조를 짜보자!

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

scss 기능을 약간 활용한 css 구조도 함께 볼게요~

$yellow: #ffdd59;
$blue: #3c40c6;
.container {
  display: grid;
  div {
    width: 100px;
    height: 80px;
  }
  div:nth-child(even) {
    background: $yellow;
  }
  div:nth-child(odd) {
    background: $blue;
  }
}

이렇게 하면 하단의 구조가 나올거에요. (듀얼모니터 쓰는 중이라 스크롤도 애매하게 캡쳐됐지만 무시하세여 ㅋㅋ)

image.png 먼저 container에는 display: grid;라는 속성을 주었고요. 화면에 상자를 보이게 하려고 자식 div들에게 크기를 따로 주었지만 이렇게 하지 않아도 됩니다. 부모div인 container에 rows와 columns 크기를 지정하면 자식들이 따라갑니다.

grid-template-columnns/rows

자식 div에 준 width와 height을 지우고, container에 두 줄을 추가해볼게요

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

image.png

이렇게 보니 감이 안 오죠? rows에서 50px 하나를 제거해볼게요

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

이렇게 하면…

image.png

약간 감이 오시나요??

grid-template-rows: 100px 100px;는 세로 100px짜리를 2행으로 만들어라 라는 뜻이였고요, grid-template-columns: 50px 50px 50px;는 가로 50px짜리를 3열로 만들어라 라는 뜻이에요!

많이 헷갈리죠? 그치만 익숙해지면 손쉽게 쓸 수 있을거에요! 근데 네모가 붙어있어서 좀 답답한데 떨어뜨리고 싶어요.. 그럴땐 어떻게 할까요?

grid-gap

갭이라는 속성이 있어서 사이사이를 띄워줄 수 있어요! 아까 줬던 container의 css에 grid-gap: 5px; 이걸 추가해볼게요

image.png

그러면 이렇게 간격이 뙇!!

auto-flow와 auto-rows/columns

위에서 자식div가 9개였는데 grid-template-rows: 100px 100px; 으로 설정해줘서 2행까지밖에 뜨지 않죠! 지금의 상황처럼 숨겨진 자식div를 자동으로 화면에 띄워주는 것이 바로 grid-auto뭐시깽이들이에요

grid-auto-rows: 200px 이라고 한 줄 추가해볼게요.

image.png

이렇게 하면 숨겨졌던 세 개의 div들이 세로가 200px인 상태로 화면에 나타나게 됩니다! 우리가 만들 웹페이지나 모바일 화면은 위에서 아래로 스크롤을 내리는 형식이니까 이 성질을 잘 활용하면 좋겠죠?

grid-auto-columns: 200px 이라고 써보면 어떨까요? 정답은 아무 일도 일어나지 않는다! 왜냐… grid-auto 뭐시기의 default값은 row로 설정이 되어있기 때문이죠! 그럴 때 써주는게 grid-auto-flow입니다.

위에서 설정한 코드 밑에 grid-auto-flow: columns 이 속성을 추가해보면..

image.png

아까는 아무 일도 일어나지 않았지만 보다시피 column 속성이 채워집니다!

grid-template-areas

왠지 grid에서의 핵심 특징인것 같은 느낌적인 느낌인 이 template-areas! 제가 설정한 템플릿에 따라 화면구성을 만들어주는 친구입니다.

아까는 div가 9개인 상태에서 시작했지만 지금은 4개로 시작할거에요. 각각의 className은 first~fourth까지!!

const Grid = () => {
    return(
      <div className="container">
      <div className="first"></div>
      <div className="second"></div>
      <div className="third"></div>
      <div className="fourth"></div>

    </div>

    )
}

css 코드도 함 봅시다

$red: #ff5e57;
$yellow: #ffdd59;
$blue: #3c40c6;
$green: #05c46b;
.container {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  grid-auto-rows: 200px;
  grid-template-areas: "head head head"
                       "content content side"
                       "content content side"
                       "footer footer footer"
  div:first-child {
    grid-area: head;
    background: $green;
  }
  .second {
    grid-area: content;
    background: $yellow;
  }
  .third {
    grid-area: side;
    background: $red;
  }
  .fourth {
    grid-area: footer;
    background: $blue;
  }
}

부모div에는 “head head head” 이런식의 string 값을 4개 주었구요 각각의 자식 div에 grid-area라는 속성을 추가하고 value에는 부모div에서 정의한 template들을 적용시켜봤어요

그러면 화면구성은 어떻게 될까요!

image.png

짠~ 이렇게 멋있게 구역이 나누어집니다! 저 상태에서 개발자도구의 커서를 갖다 대면…

image.png

우리가 template area를 설정한 대로 정확하게 나뉘어서 나온게 보이시죠? (글씨는 원래 안 뜨는건데 보기 쉽게 제가 추가해놓은거에요.) 이 방법을 쓰면 margin이나 width, height 기타 등등의 속성을 따로 주지 않아도 되니까 진짜 편한거 같아요!

글이 너무 길어지는거 같으니 다음편으로 계속…

출처에 있는 srimba 사이트 꼭 들어가보세요! 영상 들으면서 직접 그 화면에서 실습도 해볼수 있어요 넘나 신기한것… 이렇게..!

image.png

Reference