Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
레이아웃과 반응형 | Reporch
목록
학습 경로
레이아웃과 반응형
Flexbox, Grid, 위치 지정과 반응형 설계를 단계별로 연습합니다.
0 / 16
0%
01
기본 문서 흐름 이해하기
5
## 이번 단계에서 배울 내용 별도 배치 속성이 없으면 블록 요소는 위에서 아래로 쌓입니다. 먼저 기본 흐름을 이해하면 flex와 grid가 무엇을 바꾸는지 알기 쉽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .section { display: block; } ``` ## 해야 할 일 세 섹션을 기본 블록 흐름으로 유지하고 각 섹션 너비를 `100%`로 지정하세요. ## 완성 조건 - 세 섹션이 위에서 아래로 배치됩니다. - 각 섹션이 부모 너비를 채웁니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
02
Flexbox로 항목을 가로 배치하기
5
## 이번 단계에서 배울 내용 부모에 `display: flex`를 적용하면 자식들이 기본적으로 가로 방향에 놓입니다. 자식마다 float를 줄 필요가 없습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .toolbar { display: flex; } ``` ## 해야 할 일 도구 모음의 세 버튼을 한 줄에 배치하세요. ## 완성 조건 - 도구 모음의 display가 flex입니다. - 세 버튼이 같은 행에 놓입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
03
주축 방향으로 간격 정렬하기
5
## 이번 단계에서 배울 내용 `justify-content`는 flex의 주축 방향 정렬을 담당합니다. `space-between`은 첫 항목과 마지막 항목을 양끝에 두고 사이 공간을 나눕니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .header { display: flex; justify-content: space-between; } ``` ## 해야 할 일 헤더의 로고와 메뉴를 양끝으로 배치하세요. ## 완성 조건 - 헤더가 flex 컨테이너입니다. - 주축 정렬이 space-between입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
04
교차축에서 가운데 정렬하기
5
## 이번 단계에서 배울 내용 `align-items`는 flex의 교차축 방향 정렬을 정합니다. 가로 flex에서는 세로 정렬을 담당합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .row { display: flex; align-items: center; } ``` ## 해야 할 일 프로필 행의 아바타와 이름을 세로 가운데에 맞추세요. ## 완성 조건 - 프로필 행이 flex입니다. - 교차축 정렬이 center입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
05
gap으로 항목 사이 간격 만들기
5
## 이번 단계에서 배울 내용 `gap`은 flex나 grid 항목 사이의 간격을 일정하게 만듭니다. 각 자식에 margin을 반복하는 것보다 관리하기 쉽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .list { display: flex; gap: 12px; } ``` ## 해야 할 일 태그 목록을 flex로 만들고 항목 사이에 `12px` 간격을 주세요. ## 완성 조건 - 태그 목록이 flex입니다. - 항목 사이 gap이 12px입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
06
공간이 부족할 때 다음 줄로 넘기기
5
## 이번 단계에서 배울 내용 `flex-wrap: wrap`은 한 줄에 들어가지 않는 항목을 다음 줄로 보냅니다. 작은 화면에서도 항목이 잘리지 않게 만들 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .chips { display: flex; flex-wrap: wrap; } ``` ## 해야 할 일 너비가 좁은 기술 목록에서 항목이 다음 줄로 넘어가게 하세요. ## 완성 조건 - 목록이 flex입니다. - flex-wrap 값이 wrap입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
07
남은 공간을 flex-grow로 채우기
5
## 이번 단계에서 배울 내용 `flex-grow`는 flex 항목이 남은 공간을 얼마나 나누어 가질지 정합니다. 값이 1이면 사용 가능한 공간을 늘려 채웁니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .search { flex-grow: 1; } ``` ## 해야 할 일 검색 입력 영역이 버튼을 제외한 나머지 가로 공간을 채우게 하세요. ## 완성 조건 - 도구 행이 flex입니다. - 검색 입력의 flex-grow가 1입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
08
Grid로 같은 너비의 열 만들기
5
## 이번 단계에서 배울 내용 CSS Grid는 행과 열을 함께 다루는 배치 도구입니다. `repeat(3, 1fr)`은 사용 가능한 공간을 같은 크기의 세 열로 나눕니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .gallery { display: grid; grid-template-columns: repeat(3, 1fr); } ``` ## 해야 할 일 세 카드를 같은 너비의 세 열로 배치하세요. ## 완성 조건 - 갤러리가 grid입니다. - 세 개의 같은 너비 열을 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
09
Grid 행과 열 사이 간격 만들기
5
## 이번 단계에서 배울 내용 Grid에서도 `gap`을 사용해 행과 열 사이에 일정한 공간을 만들 수 있습니다. `row-gap`과 `column-gap`을 따로 지정할 수도 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .grid { display: grid; gap: 16px 24px; } ``` ## 해야 할 일 두 열 grid에 행 간격 `16px`, 열 간격 `24px`를 지정하세요. ## 완성 조건 - 목록이 두 열 grid입니다. - 행 간격은 16px, 열 간격은 24px입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
10
공간에 맞춰 자동으로 열 개수 바꾸기
5
## 이번 단계에서 배울 내용 `auto-fit`과 `minmax()`를 함께 쓰면 카드가 최소 너비를 지키면서 화면에 맞는 열 개수를 자동으로 만듭니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } ``` ## 해야 할 일 카드 목록을 최소 `180px` 너비의 반응형 grid로 만드세요. ## 완성 조건 - 카드 목록이 grid입니다. - 열 정의에 auto-fit과 minmax(180px, 1fr)를 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
11
기준 요소 안에 배지 배치하기
5
## 이번 단계에서 배울 내용 `position: absolute`인 요소는 가장 가까운 positioned 조상을 기준으로 움직입니다. 부모에 `position: relative`를 주면 배지가 카드 안을 기준으로 배치됩니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .card { position: relative; } .badge { position: absolute; top: 8px; right: 8px; } ``` ## 해야 할 일 새 배지를 카드의 위쪽과 오른쪽에서 각각 `8px` 떨어진 위치에 놓으세요. ## 완성 조건 - 카드가 relative 기준 요소입니다. - 배지는 absolute이며 top과 right가 8px입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
12
스크롤 중에도 제목 고정하기
5
## 이번 단계에서 배울 내용 `position: sticky`는 평소에는 문서 흐름에 있다가 지정한 경계에 닿으면 고정됩니다. 보통 `top` 값과 함께 사용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .section-title { position: sticky; top: 0; } ``` ## 해야 할 일 목차 제목이 화면 위쪽 `0px` 지점에 붙도록 만드세요. ## 완성 조건 - 목차 제목의 position이 sticky입니다. - top 값이 0px입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
13
미디어 쿼리로 작은 화면 대응하기
5
## 이번 단계에서 배울 내용 미디어 쿼리는 화면 조건에 따라 다른 CSS를 적용합니다. `max-width: 600px`은 뷰포트가 600px 이하일 때 규칙을 적용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css @media (max-width: 600px) { .menu { display: block; } } ``` ## 해야 할 일 600px 이하 화면에서 카드 목록이 한 열이 되도록 미디어 쿼리를 추가하세요. ## 완성 조건 - 기본 화면에서는 두 열입니다. - 600px 이하에서는 한 열로 바뀝니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
14
이미지를 부모 너비 안에 맞추기
5
## 이번 단계에서 배울 내용 큰 이미지가 작은 화면을 넘지 않게 하려면 `max-width: 100%`를 사용합니다. `height: auto`를 함께 쓰면 원래 비율을 유지합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css img { max-width: 100%; height: auto; } ``` ## 해야 할 일 이미지가 부모 너비를 넘지 않고 원래 비율을 유지하게 하세요. ## 완성 조건 - 이미지 최대 너비가 100%입니다. - 높이는 auto입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
15
작은 화면에서 내비게이션 세로 배치하기
5
## 이번 단계에서 배울 내용 반응형 내비게이션은 넓은 화면에서는 가로, 좁은 화면에서는 세로로 바꾸면 링크가 눌리거나 넘치지 않습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .nav { display: flex; } @media (max-width: 640px) { .nav { flex-direction: column; } } ``` ## 해야 할 일 기본 내비게이션은 가로로 두고, 640px 이하에서는 세로 방향이 되게 하세요. ## 완성 조건 - 기본 flex-direction은 row입니다. - 640px 이하 규칙에서 column으로 바뀝니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
16
반응형 카드 대시보드 완성하기
5
## 이번 단계에서 배울 내용 실제 화면은 max-width, grid, gap을 함께 사용합니다. 콘텐츠 폭을 제한하고 카드 열이 화면에 맞게 바뀌면 다양한 기기에서 읽기 좋습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .dashboard { max-width: 960px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } ``` ## 해야 할 일 대시보드 최대 너비를 `960px`로 제한하고, 카드 목록을 최소 `220px`의 반응형 grid와 `20px` 간격으로 완성하세요. ## 완성 조건 - 대시보드 최대 너비가 960px입니다. - 카드 목록은 반응형 grid입니다. - 카드 사이 간격은 20px입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%