쭈꾸미
코드짜는 쭈꾸미
쭈꾸미
전체 방문자
오늘
어제
  • 분류 전체보기 (122)
    • Journal (54)
      • Today I Learned (44)
      • 후기&회고 (4)
      • 개인 프로젝트 (4)
      • 독서일기 (2)
    • HTML, CSS (5)
    • Javascript (32)
    • Typescript (2)
    • Git, Github (4)
    • Algorithm (1)
    • React, Next.js (14)
    • API, Database (6)
      • API (0)
      • Database (1)
      • GraphQL (2)
      • Rest-API (1)
    • React-Native (1)
    • ETC (2)
    • OS (1)
      • 우분투 Ubuntu (1)

인기 글

티스토리

hELLO · Designed By 정상우.
쭈꾸미
Journal/Today I Learned

TIL - 2022.02.10 목요일

TIL - 2022.02.10 목요일
Journal/Today I Learned

TIL - 2022.02.10 목요일

2022. 2. 10. 19:23

오늘 배운 것

- 오늘은 Midterm을 봤다. 8시간 안에 게시판 하나를 구현했다. (기능 구현을 할 줄 아는지 여부에 초점을 맞춘 시험이었기 때문에 css는 최소한으로만 함) 프로젝트 생성부터 시작하는 시험이다보니 레이아웃부터 다 만들어야했다. css grid를 시험해 볼 기회다 싶어서 냅다 썼다. 확실히 레이아웃 잡을 때에는 좋다. 코드 분량이 확 줄어들더라.

// 각각 분리된 컴포넌트의 emotion을 모아놓은 것이라 컴포넌트 명이 겹칠 수 있음
// Next.js 기반으로 작업했다.

// Container
const Container = styled.div`
  display:grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 120px 280px 1fr;
`
// Header
const Wrapper = styled.div`
  text-align: center;
  border-bottom: 2px solid #663399;
  grid-column: 1/3;
  grid-row:1;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  
  h1 {
    font-size: 30px;
  }
`
// Sidebar
const MenuBox = styled.div`
  grid-column: 1;
  grid-row: 2/4;
  border-right: 1px solid #dddddd;
`
// Carousel
const Wrapper = styled.div`
  width: 100%;
  height: 100%;
  background: #dddddd;
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
  overflow:hidden;
`
// Body
const Body = styled.div`
  grid-column: 2;
  grid-row: 3;
  min-height: 400px;
  padding: 10px;
  background: #f6f6f6;
  max-width: calc(100vw - 280px);
  &.noBanner {
    grid-row: 2/4;
  }
`

위의 이미지와 같은 레이아웃을 잡는 데에 이정도 코드면 충분하다! 크로스 브라우징 이슈만 해결된다면 (혹은 크로스 브라우징을 신경쓰지 않아도 되는 프로젝트라면) 그리드와 플렉스를 혼합해서 사용하면 정~말 편할 듯.

 

- Can I use를 수시로 확인하자. 😣

https://caniuse.com/?search=display%3A%20grid

 

앞으로 할 것

- 리뷰 게시판 : 게시글 넘버링 넣어주기 / 이미지 입력 Validation 넣어주기 / Write 페이지 구조 개선 (리팩토링)

- 로그인 인증 프로세스 머릿속에 확실하게 넣기

저작자표시 (새창열림)

'Journal > Today I Learned' 카테고리의 다른 글

TIL - 2022.02.15 화요일  (0) 2022.02.15
TIL - 2022.02.14 월요일  (0) 2022.02.14
TIL - 2022.02.09 수요일  (0) 2022.02.09
TIL - 2022.02.08 화요일  (0) 2022.02.08
TIL - 2022.02.07 월요일  (0) 2022.02.07
  • 오늘 배운 것
  • 앞으로 할 것
'Journal/Today I Learned' 카테고리의 다른 글
  • TIL - 2022.02.15 화요일
  • TIL - 2022.02.14 월요일
  • TIL - 2022.02.09 수요일
  • TIL - 2022.02.08 화요일
쭈꾸미
쭈꾸미
느리지만 확실하게 / 웹 프론트엔드 개발자 TIL : https://jooeun-k.github.io/TIL/

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.