Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
CSS 기초 | Reporch
목록
학습 경로
CSS 기초
선택자부터 박스 모델과 CSS 변수까지, 화면을 읽기 좋게 꾸미는 기본기를 익힙니다.
0 / 16
0%
01
요소 선택자로 글자색 바꾸기
5
## 이번 단계에서 배울 내용 CSS 선택자는 꾸밀 HTML 요소를 고릅니다. 요소 이름을 그대로 쓰는 `p` 선택자는 페이지의 모든 문단을 선택합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css h2 { color: navy; } ``` ## 해야 할 일 모든 문단의 글자색을 `royalblue`로 바꾸세요. ## 완성 조건 - 두 문단 모두 파란색 글자로 보입니다. - `p` 요소 선택자를 사용합니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
3
75.00%
02
클래스 선택자로 필요한 요소만 꾸미기
5
## 이번 단계에서 배울 내용 클래스는 같은 역할을 가진 여러 요소를 묶는 이름표입니다. CSS에서는 클래스 이름 앞에 점을 붙여 `.notice`처럼 선택합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .important { font-weight: bold; } ``` ## 해야 할 일 `notice` 클래스를 가진 문단만 굵게 표시하세요. ## 완성 조건 - 공지 문단만 굵게 보입니다. - 일반 문단의 굵기는 바뀌지 않습니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
03
아이디 선택자로 한 요소 강조하기
5
## 이번 단계에서 배울 내용 아이디는 문서에서 하나의 요소를 가리키는 고유한 이름표입니다. CSS에서는 `#hero-title`처럼 `#` 뒤에 아이디 값을 씁니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css #main-title { font-size: 32px; } ``` ## 해야 할 일 `hero-title` 아이디를 가진 제목의 글자 크기를 `36px`로 만드세요. ## 완성 조건 - 주요 제목의 계산된 글자 크기가 36px입니다. - 다른 문단의 크기는 그대로입니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
04
여러 선택자에 같은 스타일 적용하기
5
## 이번 단계에서 배울 내용 서로 다른 요소에 같은 스타일을 적용할 때는 선택자를 쉼표로 구분합니다. 이렇게 하면 같은 선언을 반복하지 않아도 됩니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css h1, h2 { font-family: sans-serif; } ``` ## 해야 할 일 `h1`과 `h2`의 글꼴을 모두 `Arial, sans-serif`로 지정하세요. ## 완성 조건 - 1단계와 2단계 제목이 같은 글꼴을 사용합니다. - 선택자를 쉼표로 묶어 한 규칙으로 작성합니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
05
나중에 작성한 규칙으로 스타일 덮어쓰기
5
## 이번 단계에서 배울 내용 같은 우선순위의 CSS 규칙이 한 요소에 겹치면 나중에 작성한 규칙이 적용됩니다. 이것을 캐스케이드의 한 원리라고 합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .tag { color: gray; } .tag { color: green; } ``` ## 해야 할 일 기존 회색 규칙은 유지하고, 그 아래에 새 규칙을 추가해 배지 글자색을 `seagreen`으로 바꾸세요. ## 완성 조건 - 배지의 최종 글자색이 seagreen입니다. - 새 규칙은 기존 규칙보다 아래에 있습니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
06
읽기 좋은 글자 크기와 줄 높이 만들기
5
## 이번 단계에서 배울 내용 `font-size`는 글자 크기를, `line-height`는 줄과 줄 사이의 높이를 정합니다. 본문은 글자보다 여유 있는 줄 높이를 주면 읽기 편해집니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .article { font-size: 18px; line-height: 1.6; } ``` ## 해야 할 일 소개 문단의 글자 크기를 `18px`, 줄 높이를 `1.6`으로 지정하세요. ## 완성 조건 - 소개 문단의 글자 크기가 18px입니다. - 줄 높이가 글자 크기의 1.6배입니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
07
텍스트 정렬과 밑줄 조절하기
5
## 이번 단계에서 배울 내용 `text-align`은 영역 안의 텍스트 정렬을 정합니다. 링크의 기본 밑줄은 `text-decoration`으로 바꿀 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .center { text-align: center; } a { text-decoration: none; } ``` ## 해야 할 일 소개 영역의 글자를 가운데 정렬하고, 그 안의 링크 밑줄을 없애세요. ## 완성 조건 - 소개 영역의 텍스트가 가운데 정렬됩니다. - 링크에 밑줄이 보이지 않습니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
08
글자색과 배경색 함께 사용하기
5
## 이번 단계에서 배울 내용 글자색은 `color`, 배경색은 `background-color`로 정합니다. 두 색의 대비가 충분해야 글자를 쉽게 읽을 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .message { color: white; background-color: darkgreen; } ``` ## 해야 할 일 상태 메시지의 글자색을 `white`, 배경색을 `teal`로 지정하세요. ## 완성 조건 - 메시지 글자가 흰색입니다. - 메시지 배경이 teal 색입니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
09
테두리와 모서리 꾸미기
5
## 이번 단계에서 배울 내용 `border`는 굵기, 선 모양, 색을 한 번에 지정할 수 있습니다. `border-radius`는 상자의 모서리를 둥글게 만듭니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .box { border: 1px solid gray; border-radius: 8px; } ``` ## 해야 할 일 카드에 `2px solid tomato` 테두리와 `8px` 둥근 모서리를 적용하세요. ## 완성 조건 - 카드에 2px 실선 tomato 테두리가 있습니다. - 모서리 반지름이 8px입니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
10
안쪽 여백으로 내용에 숨 쉴 공간 주기
5
## 이번 단계에서 배울 내용 `padding`은 테두리와 내용 사이의 안쪽 여백입니다. 상하와 좌우 값을 따로 주면 `padding: 16px 24px`처럼 작성합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .panel { padding: 12px 20px; } ``` ## 해야 할 일 알림 상자의 위아래 안쪽 여백을 `16px`, 좌우 안쪽 여백을 `24px`로 지정하세요. ## 완성 조건 - 위아래 padding이 16px입니다. - 좌우 padding이 24px입니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
11
바깥 여백으로 요소 사이 띄우기
5
## 이번 단계에서 배울 내용 `margin`은 요소의 바깥쪽 여백입니다. 아래쪽만 띄우려면 `margin-bottom`처럼 방향을 붙여 씁니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .title { margin-bottom: 24px; } ``` ## 해야 할 일 첫 번째 카드 아래에만 `20px`의 바깥 여백을 만드세요. ## 완성 조건 - 첫 번째 카드의 아래쪽 margin이 20px입니다. - 두 번째 카드에는 같은 margin을 추가하지 않습니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
12
너비와 최대 너비 함께 지정하기
5
## 이번 단계에서 배울 내용 `width: 100%`는 사용 가능한 너비를 채웁니다. `max-width`를 함께 쓰면 넓은 화면에서도 내용이 지나치게 길어지는 것을 막을 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .content { width: 100%; max-width: 720px; } ``` ## 해야 할 일 콘텐츠 영역의 너비를 `100%`, 최대 너비를 `640px`로 지정하세요. ## 완성 조건 - 콘텐츠가 부모 너비를 사용할 수 있습니다. - 넓은 화면에서도 640px보다 커지지 않습니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
13
box-sizing으로 크기 계산 단순화하기
5
## 이번 단계에서 배울 내용 기본 박스 모델에서는 padding과 border가 지정한 너비 바깥에 더해집니다. `box-sizing: border-box`를 쓰면 지정한 너비 안에 모두 포함됩니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css * { box-sizing: border-box; } ``` ## 해야 할 일 모든 요소와 가상 요소에 `box-sizing: border-box`를 적용하세요. ## 완성 조건 - 일반 요소가 border-box를 사용합니다. - `::before`와 `::after`도 같은 계산 방식을 사용합니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
14
display로 요소의 배치 방식 바꾸기
5
## 이번 단계에서 배울 내용 인라인 요소는 내용만큼만 너비를 차지해 width가 바로 적용되지 않습니다. `display: inline-block`을 사용하면 한 줄에 놓이면서도 너비와 높이를 지정할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .chip { display: inline-block; width: 100px; } ``` ## 해야 할 일 링크를 `inline-block`으로 바꾸고 너비를 `120px`로 지정하세요. ## 완성 조건 - 링크의 display가 inline-block입니다. - 링크 너비가 120px입니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
15
마우스를 올렸을 때 스타일 바꾸기
5
## 이번 단계에서 배울 내용 `:hover`는 사용자가 마우스를 요소 위에 올린 상태를 선택하는 가상 클래스입니다. 기본 상태와 hover 상태를 모두 작성하면 변화가 분명해집니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css .link:hover { color: purple; } ``` ## 해야 할 일 버튼의 기본 배경은 `navy`, 마우스를 올렸을 때 배경은 `royalblue`가 되게 하세요. ## 완성 조건 - 기본 배경이 navy입니다. - 마우스를 올리면 royalblue로 바뀝니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
16
CSS 변수로 색상 재사용하기
5
## 이번 단계에서 배울 내용 CSS 사용자 정의 속성은 반복하는 값을 이름으로 저장합니다. `:root`에 `--brand-color`를 선언하고 `var(--brand-color)`로 꺼내 쓸 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```css :root { --accent: crimson; } .title { color: var(--accent); } ``` ## 해야 할 일 `:root`에 `--brand-color: rebeccapurple`을 만들고 제목과 버튼 배경에 재사용하세요. ## 완성 조건 - 브랜드 변수가 rebeccapurple 값을 가집니다. - 제목 글자와 버튼 배경이 같은 브랜드 색을 사용합니다. ## 작업 방법 1. 에디터에서 `styles.css`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%