# grid

39개의 포스트
post-thumbnail

[개인프젝] Napflix - 배운 내용 정리 Part. 2

[개인프젝] Napflix - 배운 내용 정리 Part. 2 CSS

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

CSS grid, flex

word-break:break-all;테이블 만들고 박스 크기에 맞춰 다음줄로 넘길때 사용

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

[css] grid layout

Grid란? 열과 행을 교차하는 수평선과 수직선의 집합이다. 요소는 열과 행 라인 내에서 그리드에 배치할 수 있습니다. ** Grid layout 기능** 트랙 사이즈를 고정시키거나 유연하게 바꿀 수 있다. 항목배치 콘텐츠를 보유할 수 있는 추가 트랙 만들 수 있다

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

css grid

grid는 flex와 비교해flex는 col이나 row 중 하나를 주요 축으로 하여 구성하는 방식이라면grid는 좀 더 복잡한 2차원 레이아웃을 구성할 수 있는 시스템이다.백번 듣는 것보다 직접 보는 게 훨씬 좋다.직접 해보자.위와 같은 레이아웃을 그리드로 구현한 cs

2021년 3월 4일
·
0개의 댓글
post-thumbnail

Grid 이해하기

레이아웃을 정렬하는 방법으로 float를 사용했지만 수직방향 정렬이 어려움flex 로 수평, 수직방향 정렬에 어려움을 해결하지만 item 이 여러 개일 경우 늘어나는 문제 발생2차원 레이아웃 잡는 어려움을 해결하기 위해 grid 를 사용하게 됨grid-template-

2021년 2월 18일
·
0개의 댓글
post-thumbnail

[TIL] #4 Grid

grid를 사용해서 계산기 구현calculator 클래스의 form에 display: gird; 로 주고 grid-template-columns 을 사용해 열을 4등분함 grid-auto-rows 로 행들의 크기를 65px로 지정 grid-gap: 5px; 으로 i

2021년 2월 18일
·
0개의 댓글
post-thumbnail

TIL8 l CSS Grid

Grid 그리드를 사용하려면, 먼저 부모 태그로 감싸야한다. shorthand 속성으로 외재적인(explicit) 속성과 내재적인(inplicit) 속성값을 한번에 설정한다. Explicit grid properties grid-template-rows grid-t

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

2021 01 18 월 TIL - 17

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

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

[html/css] grid 속성

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

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

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

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

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

[TIL] CSS 3: Grid

Codecademy Learn CSS 학습

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

HTML/CSS 자기소개 페이지 구현

✅ Wecode 1주차 사전스터디 HTML/CSS로 자기소개 페이지 구현하기✅ 스크롤 고정 Navigation bar 효과주기✅ Navigation bar 메뉴 hover시 색상이 바뀌게 효과주기처음 레이아웃을 구현을 잘 정해놔야 CSS가 깔끔해진다는 글을 보고 최대한

2021년 1월 15일
·
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개의 댓글