# grid

180개의 포스트
post-thumbnail

Front-end 국비지원 #025일

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 탁월테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를

5일 전
·
0개의 댓글
·

CSS grid

grid는 2차원 레이아웃을 정렬하는 방법이다. flex와 비슷한 속성들을 가지고 있으며 복잡한 레이아웃을 정렬하는 데 효과적인 방법이다.

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

반응형 Grid Css 가이드 구현

개요📋 제작 : JAEYUN JIN 분류 : 개인 프로젝트 배포일 : 2022.11.10 주요 기능 : Tailwind Css 를 참고한 Grid Css 타겟 유저 : 정형화된 Grid Css 가이드를 필요로하는 유저 사용 툴 : HTML, CSS, SCSS 참고자

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

[SeSAC Front-end] CSS Grid로 반응형 Layout 만들기

브라우저 사이즈에 따라서 반응형으로 웹 페이지 레이아웃이 변경되도록 하는것이 이번 장의 목표입니다.flex를 이용하는 방법으로도 레이아웃을 만들 수 있지만, 이번에는 Grid를 이용해보겠습니다.Live Demo 👈 우리가 작업할 레이아웃을 미리 확인할 수 있습니다.

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

Game(3) Grid Garden

🥕Grid Garden(https://cssgridgarden.com/

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

grid garden

https://cssgridgarden.com/CSS에서 grid 방식은 가장 많이 사용하는 레이아웃 방법 중 하나 입니다. 하지만 익숙해지는 데에 시간이 걸리기 때문에 게임으로 적응하는 웹사이트 입니다. 그럼 연습 시작. 위의 사진처럼 설명도 같이 나와있긴

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

flex2

flex-items에 적용할 수 있는 속성들

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

[새싹 프론트엔드] 3주차 - 2 지난 주 Grid 실습 과제 강사님 피드백과 복기

아래와 같은 웹 페이지를grid-templete-areas, repeat()을 이용해 만드시오.아래는 강사님의 피드백이 반영된 코드이며, 주석 된 부분이 원래 나의 코드이다. 느낀 점과 개선할 점에 대해 논하도록 한다.강사님 피드백 부분부터 보자면 columns 부분에

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

22.11.01-Grid

공부하게 된 이유 오늘 프로젝트를 하며 구간을 나눠야 하는 작업을 했었는데, display: flex;로는 너무 많은 div가 필요해 공부하게됨 > Grid란? 두 방향(가로-세로) 레이아웃 시스템 (2차원) > 그리드의 용어 |명칭|뜻| |---|---| |그

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

flex

요새 많이 쓰는 flex에 대해서 알아보자

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

[SeSAC Front-end] CSS grid를 이용한 웹 페이지 구조 만들기

이번 장에서는 CSS grid에 대해서 간단하게 알아보고, CSS Grid(MDN)를 이용해서 아래의 웹 페이지 구조를 만들어 보겠습니다.Grid란 격자, 바둑판을 의미합니다.Grid Layout이란 웹 사이트를 여러개의 열(column)로 나눈 후 메뉴나 본문, 이미

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

[CSS] grid, aspect ratio로 이미지 미리보기 썸네일 만들기

😮 grid와 aspect-ratio를 활용해 종횡비 이미지 레이아웃 만들기(피드형 이미지 미리보기)

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

[프론트엔드] HTML Grid 속성

Grid 속성 grid-template-columns : 200px 200px 200px (너비 200px 칼럼 3개 지정) grid-template-row : 100px (줄 높이 100px) grid-template-columns: repeat(3, 1fr)

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

[코캠]베이스캠프 10일차 | grid, 반응형

오늘은 css 레이아웃 flex와 양대산맥을 이루고 있는 grid에 대해서 배웠다! 브라우저 지원 이슈 때문에 grid보다 flex를 훨씬 많이 써온터라 좀 헷갈리는 부분이 있었지만 앞으로도 많이 연습해 보면서 감을 익혀야겠다..!flex는 1차원적인 구조를 가지고 있

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

[Let U Win] CSS Grid (feat. styled-component)

네이버 블로그에서 이전, 원글 작성일시 : 2021.12.16.00:19지난 포스팅에 이어, 이번엔 CSS Grid를 이용해 배치를 완성시켜 보자!원하는 결과는 아래와 같다.들어가기 앞서, 너무너무너무너무너무 자세하고 친절한 설명으로 날 이해시켜주신 고마운 곳을 밝히고

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

[Let U Win] Material-UI(Mui) Grid

네이버 블로그에서 이전, 원글 작성일시 : 2021.12.15.23:01컴포넌트의 배치를 하고싶어 졌다.시중(?)엔 다른 좋은 페이지 레이아웃 예시들이 넘쳐난다.하지만 혼자 해보고싶기도 하고, 10 중에 필요한 1, 2가지를 위해 불필요한 것을 지우는 것보다내가 필요한

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

grid - [css]

grid-column: 1/3 == 1 / span 2(상대적 몇 칸 차지할 것인지 지정)

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

[CSS] GRID

참조링크 : https://studiomeal.com/archives/533flex와 함께 자주 사용되는 CSS의 Layout 기능 부모요소인 Grid container class와 자식 요소의 다수의 Gred item class로 이루어진다.부모는 Grid의

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

30개의 프로젝트로 배우는 프론트엔드 with VanillaJS (3-1) date picker

date picker를 구현해 봅니다 (snowpack, sass plugin, 날짜 조회기능 구현1)

2022년 9월 11일
·
0개의 댓글
·

flex & Grid

flex & Grid에 대한 공부 자료 정리

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