# grid

143개의 포스트

grid

그리드 레이아웃을 구현하기 위해 설계한 시스템으로 너비 960px 혹은 1200px 기준으로 정해놓은 시스템들이 있다. 열(Column)의 개수에 따라 12단/16단/24단 그리드라고 부르기도 한다. 그리드 레이아웃을 구현하는 방법은 여러가지가 있으며 여기선 12단 그

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

AWS EC2에서 Docker를 이용한 Selenium Grid를 실행 시에 console에 접속이 안될 때...?

EC2 인스턴스에 Docker를 이용하여 Selenium grid를 실행하고자 할 때 포트번호 4444 로 콘솔이 접속이 안되는 경우가 있습니다.

4일 전
·
0개의 댓글

<번역> Flexbox and CSS Grid ???

회사가 가지고있는 컨텐츠 를 나타내는 방법이 당신 또는 그 회사 에 대해 많은 것을 말해줄수 있습니다. 좋은 컨텐츠를 가지고 있으면서, 적합하고 정돈된 방법으로 사용자가 이해할 수 있도록 나타낼 줄 아는것은 매우 중요합니다.그래서, 우리는 어떻게 컨텐츠를 어떠한 방식

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

Check Box 상태 관리(feat. Set 활용법)

평소에 테이블을 만들때 &lt;table> 태그 또는 flex를 이용해서 만들었는데 이번엔 grid 기능을 이용해서 테이블을 만들어 보았다.사용해보니 grid-template-columns을 이용해 column의 width를 맞추기가 굉장히 편리했다.요구 기능 명세는

2022년 6월 27일
·
0개의 댓글

CSS GRID

통제받지 않는 Column그리드 라인 2번부터 8번까지의 모든 열이 통제받지 않는 열이 됨(저 구문 없을 때는 그리드 컨테이너의 열은 한개임)

2022년 6월 18일
·
0개의 댓글

CSS grid

배치grid-template-rows는 행의 배치grid-template-columns는 열의 배치간격row-gapcolumn-gapgapgrid-column-startgrid-column-endgrid-columngrid-row-startgrid-row-endgrid

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

CSS 기초 - 생활코딩

기본으로 h1 은 전체 사용 block element, a 태그는 inline element.하지만, display: block; 이나 display:inline;으로 설정변경 가능전체 가로길이를 나눠 간단히 사용. 2fr 1fr; 은 2대 1 비율.\*CSS, HT

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

CSS Grid: Grid Template Areas와 Grid Row & Grid Column

오늘 포스트는 Grid Template Areas와 Grid Row, Grid Column을 활용하여 레이아웃을 짜는 방법을 정리해보려고 한다.Grid Template Areas는 세세한 요소까지 아니라 부모 요소들의 레이아웃들을 짤 때 굉장히 유용할 것 같다. 일단

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

CSS : grid

template으로 주로 사용해야 웹사이트의 형태파악이 쉬움1fr 이란 가질수 있는 최대를 가르킴(예, 부모의 width 500px이면 거기서 4개로 나눠서 최대)fr 단위로 설정하면 웹사이트의 크기에 따라 크기가 자동 반영 됨

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

Grid 공부 참고할 곳

역시 정석은 MDN https&#x3A;//developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout간단한 게임으로 익힐 수 있게 해둔 웹https&#x3A;//cssgridga

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

[CSS] grid 정리

🗒 반응형 웹사이트 제작에 유용한 flex와 grid 중 grid에 대해 간단하게 정리해보겠습니다!: flexible box는 아이템을 배치할 때 가로/세로 둘 중 하나를 주축으로 정해놓고 배치하지만, grid는 가로와 세로를 모두 사용한다. (flex: 1차원, g

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

CSS GRID LAYOUT

Grid Layout 부모요소(Container)에 적용하는 속성과 자식요소(Item)에 적용하는 속성으로 나누어져 있다. Container 속성 > display grid-template-columns grid-template-rows grid-column-gap

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

[Web Study] 그리드 레이아웃-flex box layout

플렉서블 박스 레이아웃

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

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‏‏‎ ‎본문 을 꾸미고 싶을 때 전체로 &lt; div>로 묶어준다.grid 활용 image‏‏‎ ‎grid 활용 imagegrid 활용 imagegrid 활용 ima

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