포트폴리오 클론 코딩 후 코드 분석중 display : grid 속성을 발견하고 관련된 내용을 알아보았다.
수학의 정석과 같은 MDN document를 읽었다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout
Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN
CSS 그리드 레이아웃(Grid Layout)은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문
developer.mozilla.org
GRID는 말 그대로 컨텐츠를 격자형 배치로 배치하는 기능을 말한다.
다른 특징들은 위 링크에서 확인할 수 있다.
grid-template-columns : repeat(반복할 수, 1fr); 코드를 많이 사용할 것 같다.
특정 item에 접근할 수도 있다.
fr 이라는 단위를 사용한다. (fractional : 분수)
사용 예시 1fr 2fr로 작성한 경우 행에 2개 열만 전시한다.
2개의 열은 1 + 2를 분모로 하여 비율만큼 공간을 차지한다.
1fr → 1/3 , 2fr → 2/3
Grid는 최신 문법으로 아직 지원하지 않는 일부 브라우저가 있다.
아래 링크를 참고하면 좋다.
https://caniuse.com/?search=grid
"grid" | Can I use... Support tables for HTML5, CSS3, etc
CSS Grid Layout (level 1) Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Includes support for all `grid-*` propert
caniuse.com
그리고 정말 상세히 가이드를 한 블로그 글의 링크를 남긴다.
https://heropy.blog/2019/08/17/css-grid/
CSS Grid 완벽 가이드
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...
heropy.blog
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
https://sonim1.tistory.com/193
[CSS] 0. CSS Grid Layout 시작하기 & 목차
시작하며 CSS Grid 관련 내용은 아래 Github에서도 보실 수 있습니다. Github 바로가기 CSS Grid? 우리는 지금까지 일반적으로 그리드를 구현할 때 라이브러리를 사용하곤 했습니다. ex) Bootstrap, fancyGrid.
blog.sonim1.com
'FrontEnd' 카테고리의 다른 글
| [HTTP] 웹 데이터 전달 방식 GET방식 POST방식 (0) | 2022.01.16 |
|---|---|
| [CSS] Flex 속성 (0) | 2022.01.15 |
| [CSS] CSS의 7가지 단위 - 링크 (0) | 2022.01.12 |
| [CSS] display 속성 (화면 배치 방법) block, inline (0) | 2022.01.11 |
| [CSS] 스타일 우선순위 (0) | 2022.01.09 |
댓글