10주차 퀴즈 — DevFlash

CSS

Q. CSS Grid와 Flexbox의 가장 큰 차이는?

클릭하여 답 확인 →

CSS

Flexbox: 가로 행 또는 세로 열, 한 방향 레이아웃.
Grid: 가로 행 과 세로 열, 두 방향 동시 레이아웃.

→ 단순 정렬은 Flexbox, 행·열을 함께 제어하는 복잡한 배치는 Grid.

← 다시 보기

CSS

Q. Grid 용어 세 가지 — grid line, grid track, grid cell을 각각 설명하라.

클릭하여 답 확인 →

CSS

grid line: 격자를 나누는 선. 1, 2, 3… 번호로 참조.
grid track: 두 라인 사이의 간격 → 하나의 행 또는 열.
grid cell: 격자 한 칸 (행 트랙 × 열 트랙의 최소 단위).

← 다시 보기

CSS

Q. Grid 레이아웃을 시작하려면 어떤 요소에 어떤 속성을 먼저 지정해야 하나?

클릭하여 답 확인 →

CSS

부모 요소(컨테이너)에 display: grid를 지정.

.container {
  display: grid;
}

자식 요소(아이템)는 자동으로 grid 아이템이 됨.

← 다시 보기

CSS

Q. grid-template-rows와 grid-template-columns의 차이는?

클릭하여 답 확인 →

CSS

grid-template-rows: 세로를 몇 개로 분할할지 → 셀의 높이 지정.
grid-template-columns: 가로를 몇 개로 분할할지 → 셀의 너비 지정.

.photoGallery {
  grid-template-rows: 40vw 30vw 30vw 40vw 40vw;
  grid-template-columns: 50% 50%;
}

← 다시 보기

CSS

Q. grid-template-columns: auto auto auto은 어떻게 동작하나?

클릭하여 답 확인 →

CSS

컨테이너를 3열로 균등 분할. auto는 남은 공간을 같은 비율로 나눔.
값이 3개이므로 열이 3개 생성됨.

→ auto auto auto = 33.3% 33.3% 33.3%와 유사한 효과.

← 다시 보기

CSS

Q. Grid 아이템 배치 속성 4가지(grid-row-start, grid-row-end, grid-column-start, grid-column-end)의 역할은?

클릭하여 답 확인 →

CSS

아이템이 차지할 grid line 범위를 지정.
grid-row-start: 시작 행 라인 번호
grid-row-end: 끝 행 라인 번호
grid-column-start: 시작 열 라인 번호
grid-column-end: 끝 열 라인 번호

.item01 {
  grid-row-start: 1;  grid-row-end: 2;
  grid-column-start: 1;  grid-column-end: 3;
}

← 다시 보기

CSS

Q. grid-row: 2/4와 grid-column: 1/2를 단축 표기 방법으로 설명하고, 이 아이템이 차지하는 영역은?

클릭하여 답 확인 →

CSS

grid-row: 시작라인/끝라인, grid-column: 시작라인/끝라인 형식.

grid-row: 2/4 → 행 라인 2~4 사이 = 2행, 3행 (2칸)
grid-column: 1/2 → 열 라인 1~2 사이 = 왼쪽 1열 (1칸)

← 다시 보기

CSS

Q. 2열 그리드에서 아이템이 전체 너비(2칸)를 차지하게 하려면 grid-column을 어떻게 지정하나?

클릭하여 답 확인 →

CSS

2열이면 열 라인이 1·2·3 — 세 개.
전체 너비를 차지하려면 라인 1부터 라인 3까지:

grid-column: 1/3;

또는 start/end 방식:

grid-column-start: 1;
grid-column-end: 3;

← 다시 보기

CSS

Q. grid-template-rows: 40vw 30vw 30vw에서 vw 단위란?

클릭하여 답 확인 →

CSS

vw = viewport width — 브라우저 창 너비의 1%.
40vw = 뷰포트 너비의 40%.

화면 크기에 비례하여 높이가 자동 조정되므로 반응형 이미지 갤러리의 행 높이 지정에 유용.

← 다시 보기

CSS

Q. Grid 셀 안의 이미지를 셀 크기에 꽉 채우려면 어떤 CSS를 사용하나?

클릭하여 답 확인 →

CSS

.photoGallery li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover: 비율을 유지하면서 영역을 빈틈없이 채움 (이미지 일부 잘릴 수 있음).
width/height: 100%: 셀 전체 영역을 차지하도록 설정.

← 다시 보기

CSS

Q. 포토갤러리에서 아이템 A가 1행 전체(2칸)를 차지하도록 배치하는 CSS를 두 가지 방법으로 써라.

클릭하여 답 확인 →

CSS

방법 1 (개별 속성):

.item01 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

방법 2 (단축 표기):

.item01 {
  grid-row: 1/2;
  grid-column: 1/3;
}

← 다시 보기

CSS

Q. 다음 Grid CSS에서 몇 행 몇 열이 만들어지나?
grid-template-rows: 175px 175px 290px;
grid-template-columns: 50% 20% 30%;

클릭하여 답 확인 →

CSS

값의 개수가 행·열의 수를 결정.
grid-template-rows에 값 3개 → 3행 (높이: 175px / 175px / 290px)
grid-template-columns에 값 3개 → 3열 (너비: 50% / 20% / 30%)

결과: 3행 × 3열 = 총 9개의 grid cell.

← 다시 보기