# grid

132개의 포스트

follow, unfollow (1)

들어가기front부분에서 user를 follow, unfollow하는 부분,일단은 cache부분은 생략하고 useMuataion, useQuery 부분만 마무리 한다.Profile에서 follow, unFollow할 수 있게 구성한다.\-styled부분에 대한 설명은

2022년 5월 10일
·
0개의 댓글

CSS2 - Grid

layout Positioning : flexbox & grid 1. Flexbox flex-direction flex-wrap justify-content align-itmes align-content order flex-grow flex-shrink flex-bas

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

CSS grid layout

그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 px을 이용하면 항상 크리가 고정되므로 반응형 웹 디자인에는 적합하지 않다. 그래서 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr 단위를 사용한다 . 예를 들어 너비가 같은 칼럼을 3개 배치한다면 fr

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

[TIL] 프론트엔드 Day 30

DAY 29, DAY 30일에 배운 CSS 배움 기록

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

[TIL] CSS Grid

그리드 펀치👊

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

미디어 쿼리 사용하기

미디어 쿼리 사용하기 image‏‏‎ ‎미디어 쿼리 사용하기 image미디어 쿼리 사용하기 image미디어 쿼리 사용하기 image‏‏‎ ‎미디어 쿼리 사용하기 image‏‏‎ ‎미디어 쿼리 사용하기 image‏‏‎ ‎

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

grid 활용

grid 활용 image‏‏‎ ‎grid 활용 image‏‏‎ ‎grid 활용 image‏‏‎ ‎본문 을 꾸미고 싶을 때 전체로 < div>로 묶어준다.grid 활용 image‏‏‎ ‎grid 활용 imagegrid 활용 imagegrid 활용 ima

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

그리드 소개

그리드 소개 image‏‏‎ ‎그리드 소개 image‏‏‎ ‎그리드 소개 image그리드 소개 image그리드 소개 image‏‏‎ ‎그리드 소개 image‏‏‎ ‎그리드 소개 image‏‏‎ ‎그리드 소개 image‏‏‎ ‎그리드 소개 image그리드

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

TIL-CSS(grid)

22.04.19

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

[2022.04.13] CSS Grid 레이아웃

레이아웃을 만들 때 사용하는 속성으로 가로 행과 세로 열의 기준으로 요소를 정렬할 수 있다.겹치는 레이아웃을 만들 수도 있고 display : flex보다 세부적인 레이아웃이 가능하다.그렇다고 display : flex보다 낫다는 의미가 아니므로 두가지 모두 적절히 때

2022년 4월 13일
·
0개의 댓글

flex와 grid에 대해서

flex는 기본 축은 가로축이다. 세로축으로 정렬해줄 수 있다. 그러나 1차원적 시스템으로 수직, 수평중 하나만 관리할 수 있다.grid는 2차원적 시스템으로 수직, 수평 둘 다 관리 가능하다. 복잡한 레이아웃을 관리하기에 적합하다.두 가지 모두 아이템을 감싸고 있는

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

CSS Grid 간단 정리

gridFlexbox는 1차원적(row or column)인 레이아웃 시스템이지만 grid는 2차원(row,column)의 레이아웃 시스템을 제공해준다.

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

colspan과 rowspan

하나의 셀 또는 행을 여러 열로 나누고 둘 이상의 열로 합병하기 위해서 사용합니다.즉, 테이블의 셀을 가로로 합병.하나의 셀을 두개 이상으로 확장하거나 셀을 여러 행으로 나눌 때 사용합니다.테이블의 셀을 세로로 합병.colspan은 헤더셀이나 데이터셀에 상관없이 가로로

2022년 4월 2일
·
0개의 댓글

토이 프로젝트 후기) Green In The Forest

이번의 토이 프로젝트는 동적 라우팅과 grid로 화면을 구성하는 것에 중점을 두었다. 공공데이터의 open API를 찾아보는 중, 숲속의 식물에 대한 데이터를 제공하는 산림청 숲에 사는 식물정보를 사용하기로 마음을 먹었다.

2022년 3월 31일
·
0개의 댓글
post-thumbnail

TIL#05 CSS Grid를 공부해보자!

어제 Flexbox를 공부한 것에 이어 오늘은 Grid를 정리해보려고 한다. 사실 Grid의 A to Z까지 상세히 정리하기에는 이미 너무나도 잘 정리된 포스트들과 강의들이 나와있다.특히 1분코딩 이 포스트도 정말 잘 정리되어있고 공부가 많이 되었던 것 같다. 여기서는

2022년 3월 30일
·
0개의 댓글
post-thumbnail

[CSS] grid 사용하기

div태그로 묶어서 레이아웃을 만들어주는 것위 코드로 이러한 페이지를 만들었습니다.이때, 이 CSS의 설명 부분을 좌측 리스트의 오른쪽에 배치하고 싶습니다.어떻게해야 할까요?이 때 grid를 씁니다.우선 div태그로 리스트 부분과, css 설명 부분을 묶어주겠습니다.d

2022년 3월 27일
·
0개의 댓글
post-thumbnail

MUI를 알아보자!

요즘 나는 회사에서 MUI를 이용하여 개발을 하고있다. 처음엔 스타일드 컴포넌트가 아닌 MUI를 이용해서 개발을 한다는것에 거부감이 들기도 했지만mui라는 녀석도 상당히 간편하게 사용할수 있는 친구인것같아서 이렇게 블로그에 글을 적어보고자 한다내가 처음 mui를 접하게

2022년 3월 25일
·
0개의 댓글

코드는 짧고 사연은 길다

두 개의 축을 이용하여 요소를 배치하는 grid 속성 알아보기

2022년 3월 24일
·
0개의 댓글
post-thumbnail

CSS - 3(grid)

grid 란? CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between par

2022년 3월 24일
·
0개의 댓글
post-thumbnail

CSS - display: grid를 이용한 쉬운 중앙 정렬

Grid를 이용한 쉬운 중앙 정렬오늘은 grid를 이용해서 content를 X축과 Y축으로 동시에 중앙정렬 하는 방법을 정리해보려고 한다.html에 outer안에 inner가 아래처럼 있다고 가정하고 CSS를 작성했다.X축과 Y축 동시에 중앙정렬하는 방법은 보통 dis

2022년 3월 23일
·
0개의 댓글