# grid

94개의 포스트
post-thumbnail

Grid

4일 전
·
0개의 댓글

CSS FlexBox , Grid

flexbox 기본 모양 > # FlexBox container로 큰 틀 잡음. container의 css 속성들. > 정렬 태그 dispaly : flex; 컬럼들을 자동으로 맞춰줌 flex-direction : column; row가 기본 값. column

5일 전
·
0개의 댓글
post-thumbnail

클론코딩-mdn_grid

11월 21일 스터디에서 진행하던 mdn 사이트를 grid를 이용해 짜보았다. mdn클론코딩 지난주까지 flex를 이용해서 짠 코드를 grid를 이용해서 재개편을 해보았다. 우선 그리드와 플렉스의 사용 용도의 차이를 살펴보면 > grid: 기존의 틀에 변경이 별로

2021년 11월 21일
·
0개의 댓글

CSS Grid

Grid를 공부해봅시다 Flex는 1차원 레이아웃이고 Grid는 가로세로 2차원 레이아웃이다👍 flex와 같은 점은 1, Container와 Item이 존재한다는 점👍 2, Container와 Item에 적용하는 속성이 따로 있다는 점👍

2021년 11월 17일
·
0개의 댓글
post-thumbnail

CSS | Grid

Flex 가 한 방향 레이아웃 시스템이라면 (1차원) Grid 는 두 방향(가로-세로) 개념의 레이아웃 시스템이다. (2차원) 각 셀의 영역을 지정 ![](https://images.velog.io/images/po05360/post/5499cf25-b800-46e

2021년 11월 16일
·
0개의 댓글
post-thumbnail

css-grid

grid 설명지난주에 그리드에대한 대략적인 설명을 해주셨는데, 오늘은 플렉스와 비교한 활용법에 대한수업을 받을 수 있었다. 사용에 익숙해지면 매우 편리할 거같고, 특히 반응형을 크게 고려하지 않아도되서,여러가지로 이용할 수 있을것 같다.그리드가 플렉스보다 더 최신 문법

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

프로젝트(1)-영화 목록 만들기: 이벤트기능 추가

display:grid 주고, JS로 addEventListener로 블러 효과를 주었다. 중복코드가 너무 많아서 해결해야한다. 이미지 위의 텍스트가 이미지와 함께 블러처리되는 것을 해결해야한다.

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

클론 코딩스터디_mdn

11/7일 mdn 사이트를 각각 만들어보고, 일요일에 만나서 서로의 코드리뷰를 하기로 했다. 우선 평일에는 수업을 듣느라 바쁠거 같으니 시간 날때마다 조금씩 해둬야 겠다. 1.box-model만들기 html을 작성하기 전에 우선 사이트를 따다가 박스를 구성했다. (*혹

2021년 11월 9일
·
0개의 댓글
post-thumbnail

grid- layout

flex: 줄에 대한 정렬grid: 눈금,격자를 이용해서 더 복잡하게 배치할 수 있는 레이아웃 시스템Grid Lines: 격자를 이루는 선의 집합행: Grid Row열: Grid columnGrid Track: 평행한 Grid Line 두 줄 사이의 공간Grid Are

2021년 11월 9일
·
0개의 댓글
post-thumbnail

Day 7 CSS grid

CSS gird 5*5 그리드로 구획나누어 레이아웃 짜보기

2021년 11월 8일
·
0개의 댓글
post-thumbnail

WIL- CSS [Grid]

grid도 flex처럼 layout을 만들 때 사용하다.grid또한 display:grid로 설정해주면 된다.flex는 한 방향 레이아웃 시스템인 1차원적인 레이아웃이고grid는 행(row)+열(column) 두 방향 레이아웃인 2차원적인 레이아웃이다.이 행과 열은 각

2021년 11월 8일
·
0개의 댓글
post-thumbnail

TIL 5 : flex와 grid의 다양한 속성들

20211108 TIL

2021년 11월 8일
·
0개의 댓글
post-thumbnail

211028 TIL CSS3 Grid(학습 94일차)

오늘은 박스모델링 grid 시스템에 대해서 학습했다. Must Remeber rows는 행, column은 열 가로, 세로 개념이랑 비슷하다 생각.

2021년 11월 1일
·
0개의 댓글
post-thumbnail

CSS Grid를 활용해서 레이아웃 구성하기!

규칙적이고 작은 부분의 레이아웃을 구성할때 유용하다.

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

CSS Layout_2_Grid

grid 사용 이유, 유의할 점, 속성

2021년 10월 14일
·
0개의 댓글

CSS - Grid 3X3 정렬

CSS - Grid 3X3 정렬

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

CSS Grid 정복하기 - Item편

CSS Grid의 고수가 되어보쟈 😎

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

2021-10-12 TIL

Material-UI Grid리액트 머티리얼ui Grid 컴포넌트를 이용하여 반응형 레이아웃을 꾸며보았다. styled-components등으로 미디어 쿼리를 사용하는 것 보다 시간이 많이 단축되었다.머티리얼 ui는 스크린 가로 사이즈에 따라 xs, sm, md, lg

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

CSS Grid 정복하기 - Container편

CSS Grid의 고수가 되어보쟈 😎

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