# grid

31개의 포스트
post-thumbnail

2021 01 18 월 TIL - 17

Node.jsflex/gridsvgNode in gitHubflex-grid in gitHubsvg in gitHubinteraction in gitHub오랜만에 node를 보니 분석하는 시간이 조금 더 걸린듯 하다. flex는 업무에서 많이 사용했었는데 grid는 아

3일 전
·
0개의 댓글

[Project 01] CSS-Grid 웹페이지만들기

Header headline & navation bar 1. Header 스크롤를 내렸을 때 최상단에 위치하도록 하였다. 본문과 구별되도록 라인을 추가하였다. 2. Navigation bar hover 각 탭에 마우스를 올리면 글자 색이 변하도록 하엿다. 각 탭에

3일 전
·
1개의 댓글
post-thumbnail

[html/css] grid 속성

display:flex display:grid의 차이점은 flex는 한방향, grid는 가로, 세로로 레이아웃 할수있다. 그래서 복잡한 레이아웃이 표현가능하다.A~I까지 클래스 박스를 html로 생성한다. 부모요소를 그리드컨테이너 자식요소를 그리드아이템이라 부른다.gr

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

프로그래머스 웹 프론트엔드 과제 with vanillaJS 2

유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.992px 이하: 3개768px 이하: 2개576px 이하: 1개현재 템플릿 코드를 통해 실행시킬 경우 image들이 같은 사이즈로 질서있게 정렬이 된 모습

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

[TIL] CSS: Grid

Codecademy Learn CSS 학습

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

CSS Grid

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. CSS Grid 2차원 행과 열의 레이아웃 시스템을 제공한다. (flex와 마찬가지로 container와 item으로 구성된다.) 배치와 정렬의 개념을 가질 수 있다. container |값|의

2020년 12월 24일
·
0개의 댓글
post-thumbnail

[C#] DevExpress 피벗 그리드 컨트롤 사용하기 (WinForm Pivot grid)

피벗 그리드 컨트롤 가져오기피벗 그리드에 데이터 연결하기 (데이터베이스로 부터)private void PivotGrid(){}피벗 그리드와 차트 연결하기 (Binding Chart with Pivot grid)참고 사이트데브익스프레스 : Pivot Grid https&

2020년 11월 25일
·
0개의 댓글
post-thumbnail

TIL 4 | HTML & CSS (4)

HTML & CSS (4) - Semantic web & semantic tag, Weegle 검색창 만들기

2020년 11월 19일
·
0개의 댓글
post-thumbnail

React - tumblbug Page (2)

tublbug Page (2) > React를 이용해서 Tublbug Page를 제작할 계획 1단계 ) Navigation + Image Slider 2단계 ) Grid + 반응형 - 오늘 구현 Grid + 반응형(media query) > [ 결과물 ] > [

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

Grid 레이아웃 사용법

CSS에서 2차원의 레이아웃을 만들어야 할때 Grid 레이아웃을 사용하게 됩니다.

2020년 11월 15일
·
0개의 댓글
post-thumbnail

grid(6) - min content, max content

적당히를 모르는 text가 box를 넘어 존재하고 있다. 다른 box는 너무 겸손하다. 무척 혼내주고 싶다. grid-template-columns: max-content 100px 첫 번째 column이 필요한 content만큼 width가 늘어났다. 이제 min-c

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

grid(5) - minmax, auto-fill, auto-fit

1fr을 갖는 10개의 column이 4개의 row로 늘어선다. 압력을 가하면 이렇게 변한다. 변화를 막고 최소한의 품위를 유지하게 하고 싶다. 그러기 위해서는 minmax를 사용해야 한다. grid-template-columns: repeat(10, minmax(10

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

grid(4) auto columns, auto rows

a

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

grid(4) - place items, place content

기본적인 4 x 4 grid가 있다. 이런 밍밍한 grid를 보면 난잡하게 만들고 싶은 충동에 사로잡힌다. parent에 넣어 child에게 적용하는justify-items를 배워야 할 시간이다.justify-items: stretch은 기본값이다. 기본적으로 자식을

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

grid(3) - grid template

grid-template-columns: repeat(4, 100px) 에서 100px을 1fr으로 바꿨다. fr 는 fraction이다. grid-template-columns: repeat(4, 100px) 일 때 body가 남는다. grid-template-col

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

grid(2) - template area

다짜고짜 grid와 함께 시작하는 아침이다.

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

grid (1)

grid는 중요하다. 간편하게 레이아웃을 짤 수 있다. 이제 grid가 얼마나 훌륭한 개념인지 알아보자. 별 볼일 없는 4개의 블럭이 있다. 이 녀석들을 사이에 일정한 공간을 만들고 싶다. cssparent에 flex를 주고 wrap으로 묶고 space-between

2020년 9월 8일
·
0개의 댓글
post-thumbnail

200908__CSS Layout: Grid (2)

justify-items, align-items로 위치 조정 가능place-items is a shortcutsplace-content 모든 사각형 다같이 적용place-items 각 사각형 하나하나에 어떤 걸 적용하는지에 관한 것auto-fill: for exact

2020년 9월 8일
·
0개의 댓글
post-thumbnail

200907__CSS Layout: Grid

grid-template-coloumsgrid-template-rowscolumn-gaprow-gapgapGrid-template-areas is so freaking coolRows and ColumnsCSS 선택자(Selector) :nth-child(), :nth

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