6. Grid Layout #2

HTML을 CSS에서 (여기에서는 styled-components에서)

선택해서 스타일링 할 수 있다.

1. input, div와 같이 Element를 선택하려면 다음과 같이 선택하고,

    input { }

    div { }

    Element그자체 { }

2. Element에 부여한 props 중, className을 기준으로 선택하려면 다음과 같이 선택할 수 있고,

    .head-title { }

    .footer-email { }

    .부여한className { }

3. Element에 부여한 props 중, id를 기준으로 선택하려면 다음과 같이 선택할 수 있다.

    #sidebar { }

    #body { }

    #부여한id { }

import React from 'react'
import styled, { css } from 'styled-components'

// # 반복적으로 사용할 것 같은 속성들은 Common이라는 변수에 담아서,
// # 언제든지 재활용할 수 있다.
const Common = css`
  border-radius: 5px;
  padding-top: 5px;
`

const Container = styled.div`
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: .2fr 1.5fr 1.2fr 0.8fr;
  grid-template-areas: 
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer"
  ;

  grid-gap: 0.2rem;
  padding: 5px;
  
  font-family: "Inter", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #004d40;
  text-align: center;

  nav {
    background-color: #a7ffeb;
    grid-area: nav;
    // # Common 변수를 재활용하는 모습
    ${Common};
  }

  main {
    background-color: #84ffff;
    grid-area: main;
    ${Common};
  }

  #sidebar {
    background-color: #18ffff;
    grid-area: sidebar;
    ${Common};
  }

  #content1 {
    background-color: #6fffd2;
    grid-area: content1;
    ${Common};
  }

  #content2 {
    background-color: #64ffda;
    grid-area: content2;
    ${Common};
  }

  #content3 {
    background-color: #74ffba;
    grid-area: content3;
    ${Common};
  }

  footer {
    background-color: #1de9b6;
    grid-area: footer;
    ${Common};
  }

  @media only screen and (max-width: 550px) {
    grid-template-columns: 1fr;
    grid-template-rows: .4fr .4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "main"
      "sidebar"
      "content1"
      "content2"
      "content3"
      "footer"
    ;
  }
`

결국 자기 맘대로 코딩하면 그만이지만,

대체로 Grid-Layout를 적용할 때 반복적으로 보이는 패턴이 있다.

 

* Container에는 {

    grid-template-columns: ...;

    grid-template-rows: ...;

    grid-template-areas: "...";    // 요기는 Items의 grid-area에 적은 이름을 넣으면, 그대로 화면을 쪼개(?)줌

}

* Items에는 {

    grid-area: ...;

}

function 홈() {
  return (
    <Container>
      <nav>Navbar</nav>
      <main>Main</main>
      <div id="sidebar">Sidebar</div>
      <div id="content1">Content1</div>
      <div id="content2">Content2</div>
      <div id="content3">Content3</div>
      <footer>Footer</footer>
    </Container>
  )
}

export default 홈