11주차 퀴즈 — DevFlash

CSS

Q. Flexbox 레이아웃을 시작하는 방법은? flex container와 flex item은 어떻게 만들어지나?

클릭하여 답 확인 →

CSS

부모 요소에 display: flex를 선언하면 그 요소가 flex container가 되고, 직접 자식 요소들이 자동으로 flex item이 됨.

.container { display: flex; }

← 다시 보기

CSS

Q. flex-direction: row와 flex-direction: column의 차이는?

클릭하여 답 확인 →

CSS

row: 아이템을 가로(왼→오른쪽) 방향으로 나열 (기본값).
column: 아이템을 세로(위→아래) 방향으로 나열.

→ 모바일에서 column, 데스크탑에서 row로 전환하는 패턴이 반응형에 자주 사용됨.

← 다시 보기

CSS

Q. flex-wrap: wrap과 flex-wrap: nowrap의 차이는?

클릭하여 답 확인 →

CSS

nowrap: 기본값. 아이템이 넘쳐도 한 줄에 강제 배치 → 아이템이 찌그러질 수 있음.
wrap: 공간이 부족하면 다음 줄로 넘김 (줄바꿈 허용) → 반응형 카드 레이아웃에 필수.

← 다시 보기

CSS

Q. justify-content와 align-items는 각각 어느 방향 정렬인가? flex-direction: row일 때 기준으로 설명하라.

클릭하여 답 확인 →

CSS

justify-content: 메인축(가로) 방향 정렬.
주요 값: flex-start / center / space-between / space-around

align-items: 수직축(세로) 방향 정렬.
주요 값: stretch(기본) / center / flex-start / flex-end

→ flex-direction: column이면 축이 반대로 바뀜.

← 다시 보기

CSS

Q. flex 컨테이너에서 gap 속성의 역할은?

클릭하여 답 확인 →

CSS

플렉스 아이템 사이의 여백을 지정.
gap: 20px — 행·열 모두 20px 간격
gap: 10px 20px — 행 10px, 열 20px 각각 지정

margin으로 여백을 주는 것보다 간단하고, 첫/마지막 아이템 바깥에는 여백이 생기지 않는 장점.

← 다시 보기

CSS

Q. flex-basis: 100px과 width: 100px의 차이는?

클릭하여 답 확인 →

CSS

flex-basis: 100px: 기본 크기 100px. 100px 미만은 늘어나고, 초과는 그대로 유지.
width: 100px: 100px을 넘는 것도 100px에 맞춰 고정.

flex 컨텍스트에서는 flex-basis가 width보다 우선 적용됨.

← 다시 보기

CSS

Q. flex: 1을 풀어 쓰면? flex: 1 1 auto와의 차이는?

클릭하여 답 확인 →

CSS

flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
→ basis가 0%이므로 남은 공간을 완전히 균등 분배.

flex: 1 1 auto = flex-grow: 1; flex-shrink: 1; flex-basis: auto;
→ basis가 auto이므로 내용 크기를 기준으로 유연하게 늘어남.

← 다시 보기

CSS

Q. flex 아이템의 order 속성은 어떻게 동작하나?

클릭하여 답 확인 →

CSS

아이템의 배치 순서를 숫자로 지정. 숫자가 작을수록 먼저 배치.
기본값은 0. 음수도 사용 가능.

.item-a { order: 2; }
.item-b { order: 1; }
/* 화면에는 b → a 순서로 표시 */

HTML 순서를 바꾸지 않고 시각적 배치만 변경할 때 사용.

← 다시 보기

CSS

Q. @media (min-width: 600px)의 의미는? Mobile First 방식이란?

클릭하여 답 확인 →

CSS

@media (min-width: 600px): 뷰포트 너비가 600px 이상일 때 내부 CSS 적용.

Mobile First: 기본 CSS를 모바일 기준으로 작성하고, min-width로 화면이 커질 때 추가 스타일을 덮어쓰는 방식.
→ 작은 화면 우선 → 점차 큰 화면으로 확장.

← 다시 보기

CSS

Q. 모바일에서 세로 배치, 데스크탑(600px+)에서 가로 배치로 바꾸는 반응형 CSS를 작성하라.

클릭하여 답 확인 →

CSS

/* 기본 (모바일) */
.flex_box {
  display: flex;
  flex-direction: column;
}

/* 600px 이상 (데스크탑) */
@media (min-width: 600px) {
  .flex_box {
    flex-direction: row;
    gap: 50px;
  }
}

← 다시 보기

CSS

Q. flex: 0 0 100%는 어떤 의미인가? 반응형 카드에서 왜 사용하나?

클릭하여 답 확인 →

CSS

flex-grow: 0 (늘어나지 않음) · flex-shrink: 0 (줄어들지 않음) · flex-basis: 100% (너비 100%).

→ 카드가 컨테이너 전체 너비를 차지하여 1열(모바일) 레이아웃이 됨. flex-wrap: wrap과 함께 쓰면 각 카드가 새 줄에 배치.

← 다시 보기

CSS

Q. flex: 0 0 calc(50% - 10px)에서 calc(50% - 10px)으로 계산하는 이유는?

클릭하여 답 확인 →

CSS

2열 레이아웃에서 gap: 20px이 카드 사이에 들어가므로 각 카드의 실제 너비를 gap의 절반만큼 줄여야 두 카드가 한 줄에 들어감.

2열: 50% - 20px/2 = 50% - 10px
4열: 25% - (20px × 3)/4 = 25% - 15px

← 다시 보기