[필기] CSS Grid │ 1분 코딩 (유튜브)

https://youtu.be/eprXmC_j9A4?t=1177 

---

px과 % 외에 쓸 수 있는 단위들

em (상위 요소의 폰트 크기) 

부모 요소의 글꼴 크기가 16px이라면, 1em은 16px과 동일하며, 2em은 32px, 0.5em은 8px과 같이 계산됩니다. 중첩된 요소의 경우, 각 요소가 상위 요소의 글꼴 크기를 상속받아 크기가 계산됩니다.

rem (루트 요소의 폰트 크기)

최상위 요소인 html 요소의 글꼴 크기에 따라 크기가 결정됩니다. 즉, rem은 루트 요소의 글꼴 크기를 기준으로 합니다. 예를 들어, 최상위 html 요소의 글꼴 크기가 16px이라면, 1rem은 16px과 동일하며, 2rem은 32px, 0.5rem은 8px과 같이 계산됩니다. rem은 중첩된 요소에 대해 상위 요소의 글꼴 크기를 상속받지 않기 때문에, 복잡한 레이아웃에서 편리하게 사용할 수 있습니다.

vh (뷰포트의 높이)
vw (뷰포트의 너비)

fr (flex container의 크기에 대한 비율)

 

---

CSS Grid의 주요 속성에 대해 정리해 줘.

 

chatGTP

 

CSS Grid는 2차원 레이아웃을 생성하기 위해 사용되는 강력한 CSS 레이아웃 시스템입니다. 아래에 CSS Grid의 주요 속성들을 체계적으로 정리해 드리겠습니다:

 

display: grid;

CSS Grid 레이아웃을 생성하기 위해 사용하는 속성으로, 부모 요소에 적용하여 그리드 컨테이너를 정의합니다.

 

grid-template-columns: , grid-template-rows: 

그리드 컨테이너 내에서 열(column)과 행(row)의 크기를 정의하는 속성으로, 각각 열과 행의 크기를 지정합니다.

 

퍼센트(%)를 이용해서 일정 비율로 나눌 수 있다.

하지만 % 보다는 fr을 쓰는 게 낫다.

 

 

grid-template-columns: repeat(몇칸, 1fr);

이 코드는 그리드 컨테이너 안의 열(column)을 몇 칸으로 나눌지를 지정하는 것입니다. repeat() 함수는 반복을 의미하며, 괄호 안에 첫 번째 값으로 반복 횟수를, 두 번째 값으로 각 열의 크기를 지정하는 1fr을 입력합니다.

여기서 1fr은 그리드 컨테이너의 사용 가능한 공간을 동등한 비율로 나누는 것을 의미합니다. 즉, 그리드 컨테이너의 너비를 동등한 크기의 칸으로 나누는 것이죠.

예를 들어, grid-template-columns: repeat(3, 1fr);라고 하면 그리드 컨테이너의 열을 3칸으로 나누고, 각 칸의 너비가 동등하게 됩니다. 만약 그리드 컨테이너의 너비가 900px이라면, 각 열은 300px의 너비를 가지게 됩니다. grid-template-columns: repeat(3, 1fr);는 grid-template-columns: 1fr 1fr 1fr;과 정확히 같은 뜻이다.

 

grid-auto-rows:

그리드 컨테이너 안에서 자동으로 생성되는 그리드 아이템들의 높이를 설정하는 속성입니다.

 

grid-auto-rows: minmax(200px, auto);

 

컨텐츠가 그리드 컨테이너를 초과할 때 쓸 수 있는 문법↓

최소 200px로 하되, 컨텐츠에 따라 auto로 늘어나게 지정한 것

justify-items:

그리드 아이템들을 수평 방향으로 정렬하는 속성입니다.

 

align-items:

그리드 아이템들을 수직 방향으로 정렬하는 속성입니다.

---

justify-self:, align-self: 

그리드 컨테이너 안의 개별 그리드 아이템들의 수평 정렬을 설정하는 속성입니다.

 

---

grid-column:, grid-row:

그리드 아이템이 차지하는 열과 행의 위치를 정의하는 속성입니다.

컬럼라인 4까지 차지하세요!

> grid-column: 1/4; (시작라인이 1 끝라인이 4)

> 이렇게 하면 위 그림처럼 됨.

 

grid-row: 2/4; 이렇게 하면? (행 합침)

 

 

순서가 이렇게 밀려서(?) 엉뚱하게 옮겨진 것을 원하는 위치로 옮기려면

grid-row: 3;→ 이렇게 시작점만 적어주면 됨. 영상으로 설명 보기

 

---

침범하게도 할 수 있음 링크

---

나머지는 드림코딩 설명과 함께 링크

[기타 속성들 메모]

 

grid-template-areas:

그리드 컨테이너 내에서 영역(areas)을 정의하는 속성으로, 그리드 아이템을 묶어서 그리드 영역을 만듭니다.

 

grid-template:

`grid-template-columns`, `grid-template-rows`, `grid-template-areas`를 한꺼번에 설정하는 단축 속성입니다.

 

grid-area:

`grid-row`, `grid-column`을 한꺼번에 설정하는 단축 속성입니다.

 

grid-gap:, row-gap:, column-gap:

그리드 아이템 사이의 간격을 지정하는 속성으로, `grid-gap`은 전체 간격을 설정하고, `row-gap`과 `column-gap`은 각각 행과 열의 간격을 설정합니다.

 

place-items:

`justify-items`와 `align-items`를 한꺼번에 설정하는 단축 속성입니다.

 

justify-content:

그리드 컨테이너 내에서 그리드 아이템들을 수평 방향으로 정렬하는 속성입니다.

 

align-content:

그리드 컨테이너 내에서 그리드 아이템들을 수직 방향으로 정렬하는 속성입니다.

 

place-content:

`justify-content`와 `align-content`를 한꺼번에 설정하는 단축 속성입니다.

 

grid-auto-columns:, grid-auto-rows:

그리드 컨테이너 내에서 자동 생성된 그리드 아이템의 열과 행 크기를 지정하는 속성입니다.

 

grid-auto-flow:

그리드 아이템의 자동 배치 방식을 설정하는 속성으로, `row`, `column`, `dense` 등의 값을 가집니다.