6. Grid Layout #1

https://www.youtube.com/watch?v=68O6eOGAGqA

위의 예제가 넘 좋아서 연습 예제에 넣어봤소이다

 

지금까지 잘 따라왔다.

화면 하나 제대로 구성한거 없이 설정만을 만져대다보니 내가 지금 뭘하고 있나? 하는 생각이 들 수도 있다.

그래서 진짜 자기가 코딩한 것이 의미있게 눈 앞에 그려지도록, 이번 시간에는 매우 중요한 기술을 배워본다.

---

Layout을 만드는 방법에는 크게 2가지 방식이 유명하다.

Flexbox 방식, 그리고 Grid 방식

둘다 진짜 쉬운데, 오늘은 핵 쉬운 Grid 방식으로 진행 ㄱㄱ

* ~/src/pages/home.tsx 기존코드

import React from 'react'

function 홈() {
  return (
    <h1>
      홈 페이지입니다.
    </h1>
  )
}

export default 홈

 

* 필요한 HTML 생성

import React from 'react'

function 홈() {
  return (
    <div>
      <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>
    </div>
  )
}

export default 홈

 

* Styled-Components를 배웠으니 써먹어보자.

가장 바깥에서 Element들을 감싸하고 있는 <div> 태그를 Styled-Component로 바꿔주기

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  // 1) import 해온 styled 안에 정의된 div를 사용한다는 소리이며,
  // 2) 지금 글을 적고 있는 이 위치에다가 스타일 뭐 넣을지 CSS 속성을 하나씩 작성하면 됨.
`

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 홈