# css grid
[React] 리액트로 계산기 만들기
CSS를 사용할때 주로 sass를 썼었다, styled-component도 연습하면서 css grid에 대해서도 공부해보고 싶었다. 뭐가 좋을지 고민하다가 계산기 UI가 떠올랐고 내친김에 구현까지 해보았다.
TIL - CSS flex, grid
Flex(Flexible) : "유연한"display : flexblock 특성의 flex container를 정의flex-direction아이템을 가로정렬 or 세로정렬할지 설정flex-wrapflex-flow : flex-direction값 flex-wrap값;di
CSS GRID 기억하기
display:flex는 유용하게 쓰고있었지만 그동안 grid에 대해서는 관심을 갖지 않았었다. grid만의 장점이 무엇인지 알아보자.1\. display:grid를 적용하면 하위 태그들을 원하는 grid로 조절가능한 준비를한다.2\. columns는 가로 grid를
07.18~ css grid system[TIL]
css grid는 2차원 레이아웃 시스템이다.CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이라고 한다.grid-template-columns를 이용한 행 만들기grid-template-colu
[03/07] TIL
flex=>1차원의 요소 배치(한 방향으로만 정렬) / grid=>2차원 요소 배치(x,y축 동시에 정렬 가능)사용법 =>container에 grid줘야.wrapper { display:grid; grid-template-columns:50% 20% 30%;
CSS Grid - line naming and grid-auto-flow
CSS Grid - line naming and grid-auto-flow
CSS Grid - grid column, column start and end
CSS Grid - grid column, column start and end
CSS Grid - justify items, align items, place items
CSS Grid - justify items, align items, place items
CSS Grid - justify content, align content, place content
CSS Grid - justify content, align content, place content
CSS Grid - minmax, max-content, min-content
CSS Grid - minmax, max-content, min-content