# css grid

22개의 포스트
post-thumbnail

[React] 리액트로 계산기 만들기

CSS를 사용할때 주로 sass를 썼었다, styled-component도 연습하면서 css grid에 대해서도 공부해보고 싶었다. 뭐가 좋을지 고민하다가 계산기 UI가 떠올랐고 내친김에 구현까지 해보았다.

2022년 8월 6일
·
0개의 댓글
·
post-thumbnail

CSS Grid 알아보기

CSS가 미흡하다고 생각이 들어 오랜만에 CSS를 복습했다. 그러다가 예전에 그냥 넘어갔었던 Grid를 공부하게 되었다. 여기에 있는 내용들을 참고하여 공부를 했고 Grid에 대해 스스로 이해한 내용들과 앞으로 사용할 것은 기능들을 정리해봤다.Grid란 2차원 레이아웃

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

CSS GRID LAYOUT

Grid Layout 부모요소(Container)에 적용하는 속성과 자식요소(Item)에 적용하는 속성으로 나누어져 있다. Container 속성 > display grid-template-columns grid-template-rows grid-column-gap

2022년 5월 23일
·
0개의 댓글
·
post-thumbnail

TIL - CSS flex, grid

Flex(Flexible) : "유연한"display : flexblock 특성의 flex container를 정의flex-direction아이템을 가로정렬 or 세로정렬할지 설정flex-wrapflex-flow : flex-direction값 flex-wrap값;di

2022년 5월 4일
·
0개의 댓글
·
post-thumbnail

CSS Grid 정복하기 - Item편

CSS Grid의 고수가 되어보쟈 😎

2021년 10월 13일
·
0개의 댓글
·
post-thumbnail

CSS Grid 정복하기 - Container편

CSS Grid의 고수가 되어보쟈 😎

2021년 10월 12일
·
0개의 댓글
·
post-thumbnail

CSS GRID 기억하기

display:flex는 유용하게 쓰고있었지만 그동안 grid에 대해서는 관심을 갖지 않았었다. grid만의 장점이 무엇인지 알아보자.1\. display:grid를 적용하면 하위 태그들을 원하는 grid로 조절가능한 준비를한다.2\. columns는 가로 grid를

2021년 3월 16일
·
0개의 댓글
·

07.18~ css grid system[TIL]

css grid는 2차원 레이아웃 시스템이다.CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이라고 한다.grid-template-columns를 이용한 행 만들기grid-template-colu

2020년 7월 18일
·
0개의 댓글
·

[03/07] TIL

flex=>1차원의 요소 배치(한 방향으로만 정렬) / grid=>2차원 요소 배치(x,y축 동시에 정렬 가능)사용법 =>container에 grid줘야.wrapper { display:grid; grid-template-columns:50% 20% 30%;

2020년 3월 6일
·
0개의 댓글
·

[Tutorial] CSS flex & CSS grid

※ 출처: CSS flex※ 출처: CSS grid

2020년 2월 20일
·
0개의 댓글
·

CSS Grid - Quiz

CSS Grid - Quiz

2020년 2월 8일
·
0개의 댓글
·

CSS Grid - Justify, Align, Place Self

CSS Grid - Justify, Align, Place Self

2020년 2월 8일
·
0개의 댓글
·

CSS Grid - grid area

CSS Grid - grid area

2020년 2월 6일
·
0개의 댓글
·

CSS Grid - grid row, row start and end

CSS Grid - grid row, row start and end

2020년 2월 2일
·
0개의 댓글
·

CSS Grid - line naming and grid-auto-flow

CSS Grid - line naming and grid-auto-flow

2020년 2월 1일
·
0개의 댓글
·

CSS Grid - grid column, column start and end

CSS Grid - grid column, column start and end

2020년 1월 30일
·
0개의 댓글
·

CSS Grid - justify items, align items, place items

CSS Grid - justify items, align items, place items

2020년 1월 27일
·
0개의 댓글
·

CSS Grid - justify content, align content, place content

CSS Grid - justify content, align content, place content

2020년 1월 27일
·
0개의 댓글
·

CSS Grid - auto fill and auto fit

CSS Grid - auto fill and auto fit

2020년 1월 26일
·
0개의 댓글
·

CSS Grid - minmax, max-content, min-content

CSS Grid - minmax, max-content, min-content

2020년 1월 23일
·
0개의 댓글
·