Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
HTML 단계별로 풀어보기 | Reporch
목록
학습 경로
HTML 단계별로 풀어보기
HTML 문법과 문서 구조부터 접근성 있는 폼과 종합 페이지까지 48단계로 학습합니다.
0 / 48
0%
01
HTML 요소의 기본 구조 만들기
5
## 이번 단계에서 배울 내용 HTML에서는 화면에 표시할 내용을 요소(element)로 감쌉니다. 문단을 만들 때는 `<p>`로 시작하고 `</p>`로 끝냅니다. 요소에 이름표가 필요하면 `id` 속성을 사용할 수 있습니다. `id="welcome"`처럼 여는 태그 안에 작성하며, 같은 문서에서 하나의 `id` 값은 한 번만 사용합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <p id="welcome">첫 번째 문단입니다.</p> ``` ## 해야 할 일 준비된 `HTML을 시작합니다.` 문장을 하나의 문단으로 바꾸세요. 이 문단을 이후 단계에서 쉽게 찾을 수 있도록 `intro`라는 `id`도 지정합니다. ## 완성 조건 - `<p>` 문단을 한 개 만들고 여는 태그에 `id="intro"`를 지정합니다. - 문단 안의 글은 `HTML을 시작합니다.`로 유지합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
02
HTML 속성으로 요소에 정보 더하기
5
## 이번 단계에서 배울 내용 HTML 속성(attribute)은 요소에 추가 정보를 줍니다. 링크를 만드는 `<a>` 요소에는 이동할 주소를 `href` 속성으로 작성합니다. `title` 속성은 링크에 대한 보충 설명을 제공하고, `id`는 요소를 구분하는 이름표 역할을 합니다. 속성은 여는 태그 안에 공백으로 구분해 작성합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <a id="help-link" href="/help" title="도움말 열기">도움말</a> ``` ## 해야 할 일 준비된 `가이드 보기` 링크에 세 가지 속성을 추가하세요. 링크의 이름표는 `guide-link`, 이동 주소는 `/guide`, 보충 설명은 `HTML 학습 가이드`입니다. ## 완성 조건 - `가이드 보기` 링크를 한 개 만들고 `id="guide-link"`를 지정합니다. - 링크의 `href` 값은 `/guide`로 작성합니다. - 링크의 `title` 값은 `HTML 학습 가이드`로 작성합니다. - 사용자에게 보이는 링크 글자는 `가이드 보기`로 유지합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
03
HTML 요소를 올바르게 중첩하기
5
## 이번 단계에서 배울 내용 HTML 요소 안에 다른 요소를 넣는 것을 중첩이라고 합니다. 바깥 요소는 부모, 그 안에 바로 들어간 요소는 자식입니다. `<article>`은 하나의 독립적인 글이나 카드를 묶을 때 사용합니다. `class` 속성은 비슷한 역할이나 모양을 가진 여러 요소를 그룹으로 구분할 때 사용합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <article class="notice"> <h1>공지사항</h1> <p>새 소식을 확인하세요.</p> </article> ``` ## 해야 할 일 준비된 제목과 문단을 `card`라는 클래스를 가진 하나의 `<article>` 안으로 옮기세요. 제목과 문단은 다른 요소로 한 번 더 감싸지 말고 `<article>`의 바로 아래에 둡니다. ## 완성 조건 - `class="card"`가 지정된 `<article>`을 한 개 만듭니다. - `HTML 카드` 제목을 `<article>`의 바로 아래에 `<h1>`으로 둡니다. - `요소를 올바르게 중첩합니다.` 문단을 `<article>`의 바로 아래에 둡니다. - 페이지의 가장 중요한 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
04
빈 요소를 올바르게 사용하기
5
## 이번 단계에서 배울 내용 `<img>`와 `<br>`처럼 안에 내용을 넣지 않는 태그를 빈 요소라고 합니다. 빈 요소에는 별도의 닫는 태그를 작성하지 않습니다. `<img>`의 `src`는 이미지 파일의 위치를 나타냅니다. `alt`는 이미지를 볼 수 없을 때 전달할 설명입니다. `<br>`은 같은 문단 안에서 꼭 줄을 바꿔야 할 때만 사용합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <img src="map.jpg" alt="행사장 약도"> <p>부산역 1번 출구<br>도보 5분</p> ``` ## 해야 할 일 제목 아래에 `landscape.jpg` 이미지를 한 개 추가하고 이미지 내용을 설명하는 `alt`를 작성하세요. 이어서 하나의 문단 안에 `아침 풍경`과 `저녁 풍경`을 쓰고 두 문장 사이를 `<br>`로 한 번 줄바꿈합니다. ## 완성 조건 - `<img>` 요소를 한 개 만듭니다. - 하나의 `<p>` 문단 안에서 `<br>`을 한 번 사용합니다. - 이미지의 `src` 값은 `landscape.jpg`로 작성합니다. - 페이지 제목은 `<h1>`부터 시작합니다. - 이미지에 내용을 설명하는 비어 있지 않은 `alt` 속성을 작성합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
05
HTML 문서 기본 선언 완성하기
5
## 이번 단계에서 배울 내용 HTML 문서는 `<!doctype html>` 선언으로 시작합니다. 그 아래의 `<html>`은 문서 전체를 감싸고, `<head>`에는 문서 정보, `<body>`에는 화면에 보이는 내용을 넣습니다. `<html>`의 `lang` 속성은 문서의 주 언어를 알려 줍니다. 한국어 문서에는 `lang="ko"`를 사용합니다. `<main>`은 페이지의 핵심 내용을 묶는 영역입니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <!doctype html> <html lang="en"> <head> <title>Example</title> </head> <body> <main>Page content</main> </body> </html> ``` ## 해야 할 일 준비된 문서에 빠진 HTML5 선언을 추가하고, 문서 언어를 한국어로 지정하세요. 기존 `<head>`, `<body>`, `<main>` 구조는 각각 하나씩 유지합니다. ## 완성 조건 - 파일의 첫 줄에 `<!doctype html>`을 작성합니다. - 문서 전체를 감싸는 `<html>`에 `lang="ko"`를 지정합니다. - 문서 정보를 담는 `<head>`를 한 개 유지합니다. - 화면 내용을 담는 `<body>`를 한 개 유지합니다. - 핵심 내용을 `<main>` 한 개로 묶습니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
100.00%
06
모바일 대응을 위한 viewport 설정
5
## 이번 단계에서 배울 내용 `<head>`에는 화면에 직접 보이지 않지만 브라우저가 문서를 해석하는 데 필요한 정보를 작성합니다. `<meta charset="utf-8">`은 한글을 올바르게 표시하게 합니다. `viewport` 메타 정보는 모바일 화면의 실제 너비에 맞춰 페이지를 보여 주도록 합니다. `<title>`은 브라우저 탭에 표시되는 문서 제목입니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>모바일 문서</title> </head> ``` ## 해야 할 일 준비된 `<head>`에 모바일 화면 설정을 위한 `viewport` 메타 요소를 추가하세요. 기존 문자 인코딩과 문서 제목은 그대로 유지합니다. ## 완성 조건 - `<head>` 안에 문자 인코딩을 지정하는 `<meta charset="utf-8">`을 한 개 유지합니다. - `<head>` 안에 `name="viewport"`인 `<meta>` 요소를 한 개 추가합니다. - `<head>` 안에 `<title>`을 한 개 유지합니다. - viewport의 `content` 값은 `width=device-width, initial-scale=1`로 작성합니다. - 문서 제목은 `Reporch HTML 1`로 유지합니다. - 화면에 보이는 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
50.00%
07
문서의 핵심 제목을 h1으로 표현하기
5
## 이번 단계에서 배울 내용 HTML 제목은 `<h1>`부터 `<h6>`까지 여섯 단계가 있습니다. `<h1>`은 페이지 전체를 대표하는 가장 중요한 제목입니다. 글자를 크게 보이게 하려는 목적이 아니라, 문서의 구조와 의미를 전달하기 위해 제목 요소를 사용합니다. 일반적인 페이지에서는 핵심 제목을 명확한 `<h1>` 하나로 시작하는 것이 좋습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <main> <h1>요리 입문 과정</h1> <p>기초 조리법을 배웁니다.</p> </main> ``` ## 해야 할 일 준비된 첫 번째 문단 `프론트엔드 기초 코스`를 페이지의 핵심 제목으로 바꾸세요. 아래 설명 문단은 그대로 둡니다. ## 완성 조건 - 페이지의 핵심 제목을 `<h1>` 한 개로 작성합니다. - `<h1>` 안의 글은 `프론트엔드 기초 코스`로 작성합니다. - 제목 단계를 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
2
66.67%
08
헤딩 레벨을 순서대로 구성하기
5
## 이번 단계에서 배울 내용 제목 단계는 문서의 목차처럼 부모와 자식 관계를 보여 줍니다. 페이지 제목은 `<h1>`, 큰 구역의 제목은 `<h2>`, 그 안의 작은 구역은 `<h3>`을 사용합니다. 제목 단계는 모양 때문에 건너뛰지 않습니다. 예를 들어 `<h2>` 다음의 하위 제목을 바로 `<h4>`로 작성하면 문서 구조를 이해하기 어려워집니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <h1>동물 도감</h1> <section> <h2>포유류</h2> <h3>고양이</h3> </section> ``` ## 해야 할 일 준비된 제목 구조를 `<h1>`, `<h2>`, `<h3>` 순서로 고치세요. `웹 개발`은 페이지 제목, `HTML`은 큰 구역 제목입니다. `문서 구조`라는 작은 구역 제목을 새로 추가합니다. ## 완성 조건 - `웹 개발`을 나타내는 `<h1>`을 한 개 작성합니다. - `HTML`을 나타내는 `<h2>`를 한 개 작성합니다. - `문서 구조`를 나타내는 `<h3>`을 한 개 작성합니다. - 제목 단계를 `<h1> → <h2> → <h3>` 순서로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
25.00%
09
줄바꿈 대신 문단 사용하기
5
## 이번 단계에서 배울 내용 서로 다른 생각이나 주제는 각각 `<p>` 문단으로 나누는 것이 좋습니다. 문단은 내용의 의미를 구분해 주기 때문에 화면 읽기 프로그램과 검색 엔진도 글의 구조를 이해할 수 있습니다. `<br>`은 주소나 시처럼 같은 문단 안에서 줄바꿈 자체가 의미를 가질 때 사용합니다. 여러 문장을 문단처럼 나누기 위한 용도로 반복해서 사용하지 않습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <p>고양이는 독립적인 동물입니다.</p> <p>강아지는 사람과 함께 활동하기를 좋아합니다.</p> ``` ## 해야 할 일 `<main>` 안의 HTML, CSS, JavaScript 설명을 각각 하나의 문단으로 바꾸세요. 현재 문장 사이에 있는 `<br>`은 모두 제거합니다. ## 완성 조건 - `<main>` 바로 안에 서로 분리된 `<p>` 문단을 세 개 작성합니다. - 세 설명을 나누기 위해 `<main>` 바로 안에 `<br>`을 사용하지 않습니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
50.00%
10
텍스트의 중요도와 강조 표현하기
5
## 이번 단계에서 배울 내용 `<strong>`은 내용이 중요하다는 의미를, `<em>`은 문장에서 특별히 강조해 읽어야 한다는 의미를 전달합니다. `<mark>`는 참고하거나 눈여겨볼 부분을 형광펜처럼 표시합니다. 세 요소는 단순히 글자를 굵게 또는 기울게 보이게 하는 용도가 아니라, 문장의 의미를 더 정확히 전달하는 요소입니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <p><strong>안전모 착용</strong>은 필수입니다.</p> <p><em>천천히</em> 이동하세요.</p> <p>준비물은 <mark>신분증</mark>입니다.</p> ``` ## 해야 할 일 준비된 세 문단에서 의미에 맞는 부분만 감싸세요. `제출 마감`은 중요하게, `반드시`는 강조해서, `index.html`은 눈여겨볼 내용으로 표시합니다. ## 완성 조건 - `제출 마감`을 `<strong>`으로 한 번 감쌉니다. - `반드시`를 `<em>`으로 한 번 감쌉니다. - `index.html`을 `<mark>`로 한 번 감쌉니다. - `<strong>` 안에는 `제출 마감`이 들어갑니다. - `<mark>` 안에는 `index.html`이 들어갑니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
11
div와 span을 필요한 곳에 사용하기
5
## 이번 단계에서 배울 내용 `<div>`는 여러 요소를 하나의 블록으로 묶을 때 사용하고, `<span>`은 문장 안의 짧은 부분만 따로 구분할 때 사용합니다. 두 요소 자체에는 특별한 의미가 없으므로 더 알맞은 시맨틱 요소가 없을 때 사용합니다. `class`는 같은 역할을 하는 요소를 묶어 이름을 붙이는 속성입니다. `class="summary"`처럼 작성합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <div class="profile"> <p>이름: <span class="name">민수</span></p> <p>등급: 초급</p> </div> ``` ## 해야 할 일 두 개의 요약 문단을 `summary` 클래스를 가진 하나의 `<div>`로 묶으세요. 첫 번째 문단의 `3개` 부분만 `count` 클래스를 가진 `<span>`으로 감쌉니다. ## 완성 조건 - `class="summary"`가 지정된 `<div>`를 한 개 만듭니다. - 요약 `<div>`의 바로 안쪽에 두 개의 `<p>` 문단을 둡니다. - `3개`를 `class="count"`가 지정된 `<span>`으로 한 번 감쌉니다. - `count` 영역 안의 글은 `3개`로 유지합니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
100.00%
12
잘못된 제목과 문단 구조 고치기
5
## 이번 단계에서 배울 내용 문서의 구조는 제목과 내용의 관계가 명확해야 합니다. 페이지 전체 제목은 `<h1>`, 그 안의 구역 제목은 `<h2>`, 일반 설명은 `<p>`를 사용합니다. `<section>`은 하나의 주제로 묶이는 구역을 나타냅니다. 보통 구역을 설명하는 제목을 함께 둡니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <main> <h1>여행 안내</h1> <section> <h2>준비물</h2> <p>편한 신발을 준비하세요.</p> </section> </main> ``` ## 해야 할 일 준비된 문서에서 태그가 내용의 역할과 맞도록 고치세요. `프론트엔드 학습`은 페이지 제목, `오늘의 목표`는 구역 제목, 마지막 문장은 구역의 설명 문단입니다. ## 완성 조건 - `프론트엔드 학습`을 `<h1>` 한 개로 작성합니다. - `<section>` 바로 안에 `<h2>오늘의 목표</h2>`를 둡니다. - `<section>` 바로 안에 설명 `<p>`를 한 개 둡니다. - 제목 단계를 `<h1>` 다음 `<h2>` 순서로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
13
링크로 다른 문서 연결하기
4
## 이번 단계에서 배울 내용 `<a>` 요소는 사용자가 클릭해서 다른 문서나 페이지로 이동할 수 있는 링크를 만듭니다. 이동할 주소는 `href` 속성에 작성합니다. 링크 글자는 `여기를 클릭`처럼 모호하게 쓰기보다, 이동할 곳을 알 수 있도록 구체적으로 작성하는 것이 좋습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <a id="css-guide" href="/docs/css">CSS 가이드 보기</a> ``` ## 해야 할 일 준비된 `HTML 가이드 보기` 글을 실제 링크로 바꾸세요. 링크의 `id`는 `html-guide`, 이동 주소는 `/docs/html`입니다. ## 완성 조건 - `id="html-guide"`가 지정된 `<a>` 링크를 한 개 만듭니다. - 링크의 `href` 값은 `/docs/html`로 작성합니다. - 사용자에게 보이는 링크 글자는 `HTML 가이드 보기`로 작성합니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
14
상대 경로 링크 구분하기
4
## 이번 단계에서 배울 내용 링크 주소가 `about.html`처럼 파일 이름으로 시작하면 현재 문서를 기준으로 이동하는 상대 경로입니다. `/docs`처럼 슬래시로 시작하면 사이트의 가장 위 경로를 기준으로 이동합니다. 같은 폴더의 파일을 연결할 때는 상대 경로를, 사이트 전체에서 공통으로 사용하는 주소에는 루트 기준 경로를 사용할 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <a href="contact.html">같은 폴더의 연락처</a> <a href="/help">사이트 도움말</a> ``` ## 해야 할 일 준비된 두 링크에 서로 다른 종류의 경로를 지정하세요. `소개`는 같은 폴더의 `about.html`로, `문서`는 사이트 루트의 `/docs`로 이동합니다. ## 완성 조건 - 준비된 두 `<a>` 링크를 모두 유지합니다. - `소개` 링크의 `href`는 `about.html`로 작성합니다. - `문서` 링크의 `href`는 `/docs`로 작성합니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
15
문서 내부 위치로 이동하기
4
## 이번 단계에서 배울 내용 긴 문서에서는 링크를 눌러 같은 페이지의 특정 위치로 바로 이동할 수 있습니다. 이동할 요소에 `id`를 지정하고, 링크의 `href`에는 `#`과 `id` 값을 함께 작성합니다. 예를 들어 `id="contact"`인 구역으로 이동하려면 링크 주소를 `#contact`로 작성합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <a href="#contact">연락처로 이동</a> <section id="contact"> <h2>연락처</h2> </section> ``` ## 해야 할 일 문서 위쪽에 `상세 내용으로 이동` 링크를 만들고, 아래의 상세 내용 구역으로 연결하세요. 링크의 `id`는 `skip-intro`, 상세 구역의 `id`는 `details`입니다. ## 완성 조건 - `id="skip-intro"`가 지정된 이동 링크를 한 개 만듭니다. - 상세 내용을 `<section id="details">`로 묶습니다. - 이동 링크의 `href` 값은 `#details`로 작성합니다. - 링크 글자는 `상세 내용으로 이동`으로 작성합니다. - 페이지 제목과 구역 제목의 단계를 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
16
순서 있는 목록과 순서 없는 목록 만들기
4
## 이번 단계에서 배울 내용 항목의 순서가 중요하지 않으면 `<ul>`을, 순서대로 따라야 하면 `<ol>`을 사용합니다. 두 목록 모두 각 항목을 `<li>`로 감쌉니다. 재료 목록처럼 순서가 없는 정보는 `<ul>`, 조리 단계처럼 순서가 결과에 영향을 주는 정보는 `<ol>`이 알맞습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <ul> <li>연필</li> <li>지우개</li> </ul> <ol> <li>문제를 읽는다.</li> <li>답을 작성한다.</li> </ol> ``` ## 해야 할 일 샌드위치 재료 `빵`, `채소`, `치즈`는 순서 없는 목록으로 만드세요. 만드는 과정 `재료를 준비한다.`, `빵 사이에 넣는다.`는 순서 있는 목록으로 만듭니다. ## 완성 조건 - `id="ingredients"`인 `<ul>` 안에 재료 항목 세 개를 작성합니다. - `id="steps"`인 `<ol>` 안에 과정 항목 두 개를 작성합니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
17
중첩 목록과 설명 목록 사용하기
4
## 이번 단계에서 배울 내용 목록 항목 안에 또 다른 목록을 넣으면 단계가 있는 중첩 목록을 만들 수 있습니다. 하위 목록은 관련된 상위 `<li>` 안에 넣습니다. 용어와 뜻을 짝지을 때는 설명 목록 `<dl>`을 사용합니다. 용어는 `<dt>`, 그 용어의 설명은 `<dd>`로 작성합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <ol> <li>기초 <ul> <li>요소</li> <li>속성</li> </ul> </li> </ol> <dl> <dt>HTML</dt> <dd>문서의 구조를 만드는 언어</dd> </dl> ``` ## 해야 할 일 HTML 학습 순서를 두 개의 상위 과정으로 정리하세요. 첫 번째 과정 안에는 `요소`, `속성` 두 하위 항목을 넣습니다. 이어서 `요소`와 `속성` 용어를 각각 설명하는 설명 목록을 만드세요. ## 완성 조건 - `<ol id="curriculum">`의 바로 안쪽에 상위 과정 두 개를 작성합니다. - 첫 번째 과정 안의 `<ul>`에 하위 항목 `요소`, `속성`을 작성합니다. - `<dl id="terms">` 안에 용어 `<dt>`를 두 개 작성합니다. - 각 용어 다음에 뜻을 설명하는 `<dd>`를 하나씩 작성합니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
18
목록으로 내비게이션 만들기
4
## 이번 단계에서 배울 내용 `<nav>`는 페이지의 주요 이동 링크를 묶는 영역입니다. 여러 링크는 `<ul>` 목록으로 구성하면 링크의 개수와 관계를 이해하기 쉽습니다. 같은 페이지에 여러 내비게이션이 있을 수 있으므로 `aria-label`로 목적을 알려 주면 화면 읽기 프로그램 사용자가 원하는 메뉴를 찾기 쉽습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <nav aria-label="고객 메뉴"> <ul> <li><a href="/orders">주문 내역</a></li> <li><a href="/account">계정</a></li> </ul> </nav> ``` ## 해야 할 일 준비된 홈, 커리큘럼, 문의 링크 목록을 `<nav>`로 감싸세요. 이 내비게이션의 목적을 `주요 메뉴`라고 지정합니다. ## 완성 조건 - `<nav>` 안의 `<ul>`에 세 개의 링크 항목을 유지합니다. - `<nav>`에 `aria-label="주요 메뉴"`를 지정합니다. - 페이지 제목과 구역 제목의 단계를 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
2
66.67%
19
header, main, footer로 문서 골격 만들기
4
## 이번 단계에서 배울 내용 페이지의 큰 구조는 `<header>`, `<main>`, `<footer>`로 나눌 수 있습니다. `<header>`에는 페이지 제목이나 소개, `<main>`에는 핵심 콘텐츠, `<footer>`에는 저작권이나 연락처 같은 마무리 정보를 둡니다. 이 요소들은 위치만 정하는 상자가 아니라 각 영역의 역할을 알려 주는 시맨틱 요소입니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <body> <header><h1>도서관</h1></header> <main><p>새 책을 소개합니다.</p></main> <footer><p>© 도서관</p></footer> </body> ``` ## 해야 할 일 준비된 내용을 역할에 맞는 세 영역으로 나누세요. 페이지 제목은 `<header>`, 학습 내용은 `<main>`, 저작권 문장은 `<footer>`에 둡니다. ## 완성 조건 - `<body>` 바로 안에 `<header>`를 한 개 만듭니다. - `<body>` 바로 안에 `<main>`을 한 개 만듭니다. - `<body>` 바로 안에 `<footer>`를 한 개 만듭니다. - 페이지 제목은 `<h1>`부터 시작합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
2
33.33%
20
관련 콘텐츠를 section으로 묶기
4
## 이번 단계에서 배울 내용 `<section>`은 문서 안에서 하나의 주제로 묶이는 구역을 나타냅니다. 사용자가 구역의 내용을 알 수 있도록 보통 제목을 함께 둡니다. 단지 모양을 위한 상자가 필요하면 `<div>`를 쓸 수 있지만, 제목과 관련 문단이 하나의 주제를 이룬다면 `<section>`이 더 알맞습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <section id="weather"> <h2>오늘의 날씨</h2> <p>맑고 따뜻합니다.</p> <p>자외선이 강합니다.</p> </section> ``` ## 해야 할 일 `HTML` 제목과 그 아래의 두 설명 문단을 하나의 구역으로 묶으세요. 구역의 `id`는 `html-topic`입니다. ## 완성 조건 - `<section id="html-topic">`을 한 개 만듭니다. - 구역의 바로 안쪽에 `<h2>HTML</h2>`을 둡니다. - 구역의 바로 안쪽에 설명 문단 두 개를 둡니다. - 페이지 제목 `<h1>` 다음에 구역 제목 `<h2>`를 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
100.00%
21
독립적인 콘텐츠를 article로 표현하기
4
## 이번 단계에서 배울 내용 `<article>`은 공지, 뉴스, 블로그 글처럼 다른 곳에 따로 옮겨도 하나의 콘텐츠로 이해할 수 있는 내용을 묶습니다. 글 자체의 제목은 `<article>` 안에 두고, 작성일이나 작성자처럼 글을 마무리하는 정보는 글 안의 `<footer>`에 둘 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <article> <h2>휴관 안내</h2> <p>월요일은 휴관합니다.</p> <footer>작성일: 2026-01-01</footer> </article> ``` ## 해야 할 일 준비된 온라인 수업 공지를 하나의 `<article>`로 바꾸세요. `id`는 `notice`로 지정하고, 제목과 작성일이 글의 올바른 위치에 있도록 구성합니다. ## 완성 조건 - `<article id="notice">`를 한 개 만듭니다. - 공지 제목을 `<article>`의 바로 안쪽에 `<h2>`로 둡니다. - 작성일 문장을 `<article>`의 바로 안쪽 `<footer>`에 둡니다. - 페이지 제목 `<h1>` 다음에 글 제목 `<h2>`를 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
6
100.00%
22
nav와 aside로 보조 영역 구분하기
4
## 이번 단계에서 배울 내용 `<nav>`는 문서 안에서 이동하는 링크를 묶고, `<aside>`는 핵심 내용과 관련은 있지만 따로 읽어도 되는 참고 정보를 담습니다. `<article>`은 핵심 글을 묶습니다. 핵심 글과 참고 자료를 구분하면 사용자가 문서의 중심 내용을 더 쉽게 찾을 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <nav aria-label="강의 목차"> <a href="#lesson">수업으로 이동</a> </nav> <main> <article id="lesson">수업 내용</article> <aside>추천 자료</aside> </main> ``` ## 해야 할 일 준비된 수업 링크를 `<nav>`로, HTML 수업 내용을 `<article>`로, MDN 참고 정보를 `<aside>`로 구분하세요. 내비게이션의 이름은 `문서 목차`입니다. ## 완성 조건 - 수업 링크를 감싸는 `<nav>`를 한 개 만듭니다. - `<main>` 바로 안에 핵심 수업 내용을 담은 `<article>`을 한 개 만듭니다. - `<main>` 바로 안에 참고 정보를 담은 `<aside>`를 한 개 만듭니다. - `<nav>`에 `aria-label="문서 목차"`를 지정합니다. - 페이지 제목과 하위 제목의 단계를 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
100.00%
23
div 중심 문서를 시맨틱 HTML로 바꾸기
4
## 이번 단계에서 배울 내용 `<div>`는 의미가 없는 묶음 요소입니다. 내용의 역할이 분명하다면 `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>` 같은 시맨틱 요소를 사용하는 편이 좋습니다. 시맨틱 요소는 화면 모양을 자동으로 완성하지는 않지만, 사람과 보조 기술, 검색 엔진이 문서 구조를 이해하도록 돕습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <header> <h1>소식</h1> <nav>메뉴</nav> </header> <main> <article>새 글</article> <aside>관련 링크</aside> </main> <footer>저작권</footer> ``` ## 해야 할 일 준비된 `<div>` 중심 문서를 각 내용의 역할에 맞는 시맨틱 요소로 바꾸세요. 기존 글의 순서는 유지합니다. ## 완성 조건 - 페이지 머리말을 `<header>` 한 개로 묶습니다. - 메뉴를 `<nav>` 한 개로 표시합니다. - 핵심 콘텐츠를 `<main>` 한 개로 묶습니다. - 새 강좌 소식을 `<article>` 한 개로 묶습니다. - 관련 링크를 `<aside>` 한 개로 표시합니다. - 저작권 정보를 `<footer>` 한 개로 표시합니다. - 페이지 제목은 `<h1>`부터 시작하고 하위 제목을 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
12.50%
24
시맨틱 뉴스 페이지 만들기
4
## 이번 단계에서 배울 내용 뉴스 페이지는 사이트 제목과 메뉴, 핵심 기사, 보조 정보, 바닥글처럼 역할이 다른 여러 영역으로 이루어집니다. 앞에서 배운 시맨틱 요소를 조합하면 각 영역의 관계를 명확하게 표현할 수 있습니다. `<section>`은 기사 목록 같은 하나의 주제를 묶고, 그 안의 개별 기사는 `<article>`로 표현합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <header> <h1>학교 뉴스</h1> <nav aria-label="뉴스 분류"> <ul><li><a href="#school">학교</a></li></ul> </nav> </header> <main> <section><article>기사 내용</article></section> <aside>인기 기사</aside> </main> <footer>뉴스 문의</footer> ``` ## 해야 할 일 빈 뉴스 문서에 머리말, 두 개의 메뉴 항목, 기사 한 개, 보조 정보, 바닥글을 구성하세요. 내비게이션의 이름은 `뉴스 메뉴`입니다. ## 완성 조건 - `<header>` 바로 안에 뉴스 제목 `<h1>`을 한 개 둡니다. - `<nav>`의 목록에 메뉴 항목 `<li>`를 두 개 작성합니다. - `<main>`의 `<section>` 안에 기사 `<article>`을 한 개 작성합니다. - `<main>` 안에 보조 정보 `<aside>`를 한 개 작성합니다. - 페이지 바닥글 `<footer>`를 한 개 작성합니다. - `<nav>`에 `aria-label="뉴스 메뉴"`를 지정합니다. - 페이지 제목과 하위 제목의 단계를 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
25
내용 이미지에 대체 텍스트 제공하기
3
## 이번 단계에서 배울 내용 `<img>`는 이미지를 보여 주는 요소입니다. `src`에는 이미지 파일의 위치를, `alt`에는 이미지를 볼 수 없을 때 대신 전달할 설명을 적습니다. 작품 사진처럼 내용 전달에 필요한 이미지라면 `alt`만 읽어도 이미지의 핵심을 알 수 있게 구체적으로 설명합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <img src="forest.jpg" alt="안개가 낀 숲길을 걷는 두 사람"> ``` ## 해야 할 일 전시 작품 이미지의 파일 위치를 `artwork.jpg`로 지정하고, 이미지가 보여 주는 장면을 `푸른 바다 위를 항해하는 흰 돛단배`라고 설명하세요. ## 완성 조건 - `artwork`라는 `id`를 가진 `<img>`를 한 개 사용합니다. - 이미지의 `src` 값은 `artwork.jpg`입니다. - 이미지의 `alt` 값은 `푸른 바다 위를 항해하는 흰 돛단배`입니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. - 문서의 모든 이미지에 `alt` 속성이 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
26
내용 이미지와 장식 이미지를 구분하기
3
## 이번 단계에서 배울 내용 모든 이미지가 같은 역할을 하지는 않습니다. 사진처럼 정보를 전달하는 이미지는 의미 있는 `alt`가 필요합니다. 반대로 구분선처럼 꾸미기만 하는 이미지는 `alt=""`로 비워 두어 화면 읽기 도구가 불필요하게 읽지 않도록 합니다. `alt`를 생략하는 것과 빈 값으로 작성하는 것은 다릅니다. 장식 이미지에도 속성은 작성하되 값만 비웁니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <img src="team.jpg" alt="회의실에서 발표를 듣는 세 명의 팀원"> <img src="dots.svg" alt=""> ``` ## 해야 할 일 제주 사진에는 장면을 설명하는 대체 텍스트를 작성하고, 파란 물결 구분선은 장식 이미지로 표시하세요. ## 완성 조건 - 문서에 이미지 두 개가 있습니다. - `photo` 이미지의 `alt`는 `성산일출봉 정상에서 바라본 제주 바다`입니다. - `divider` 이미지의 `alt`는 빈 문자열 `""`입니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. - 두 이미지 모두 `alt` 속성을 가집니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
27
이미지와 설명을 figure로 묶기
3
## 이번 단계에서 배울 내용 `<figure>`는 사진, 그림, 코드처럼 본문에서 하나의 자료로 다루는 내용을 묶습니다. `<figcaption>`은 그 자료의 제목이나 설명입니다. 이미지와 설명을 같은 `<figure>` 안에 두면 두 내용이 서로 연결되어 있음을 문서 구조로 나타낼 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <figure> <img src="chart.png" alt="월별 방문자 수 막대그래프"> <figcaption>2026년 상반기 방문자 변화</figcaption> </figure> ``` ## 해야 할 일 온라인 수업 이미지와 `온라인 수업 화면 예시`라는 설명을 하나의 `<figure>`로 묶으세요. 묶음에는 `class-preview`라는 `id`를 지정합니다. ## 완성 조건 - `class-preview`라는 `id`의 `<figure>`를 한 개 만듭니다. - `<figure>` 바로 안에 이미지 한 개를 둡니다. - `<figure>` 바로 안에 `<figcaption>` 한 개를 둡니다. - `<figcaption>`에 `온라인 수업 화면 예시`를 작성합니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. - 이미지에 내용을 설명하는 `alt`가 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
1
100.00%
28
표의 행과 셀 구성하기
3
## 이번 단계에서 배울 내용 표는 행과 열로 값을 비교할 때 사용합니다. `<table>`이 표 전체를 감싸고, `<tr>`은 가로 한 줄인 행, `<td>`는 행 안의 일반 셀을 뜻합니다. 각 행에 같은 수의 셀을 두면 값이 열에 맞춰 정렬됩니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <table> <tr> <td>사과</td> <td>3개</td> </tr> <tr> <td>배</td> <td>2개</td> </tr> </table> ``` ## 해야 할 일 과목과 점수를 두 열로 보여 주는 표를 만드세요. 첫 번째 행에는 `HTML`과 `90`, 두 번째 행에는 `CSS`와 `85`를 넣습니다. ## 완성 조건 - `scores`라는 `id`의 `<table>`을 한 개 만듭니다. - 표 안에 행 `<tr>`을 두 개 만듭니다. - 표 안에 일반 셀 `<td>`을 모두 네 개 만듭니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
29
표 제목과 헤더 범위 지정하기
3
## 이번 단계에서 배울 내용 `<caption>`은 표가 무엇을 보여 주는지 알려 주는 제목입니다. `<th>`는 행이나 열의 기준이 되는 헤더 셀입니다. `scope="col"`은 그 셀이 아래쪽 열의 제목임을, `scope="row"`는 오른쪽 행의 제목임을 나타냅니다. 이 정보는 화면 읽기 도구가 셀의 관계를 설명하는 데 도움을 줍니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <table> <caption>과일 재고</caption> <thead> <tr><th scope="col">과일</th><th scope="col">수량</th></tr> </thead> <tbody> <tr><th scope="row">사과</th><td>3개</td></tr> </tbody> </table> ``` ## 해야 할 일 주간 시간표에 `1학기 주간 시간표`라는 제목을 추가하세요. `요일`과 `과목`은 열 제목으로, `월요일`과 `화요일`은 각 행의 제목으로 표시합니다. ## 완성 조건 - 시간표 안에 `<caption>`을 한 개 둡니다. - `scope="col"`인 열 제목 셀을 두 개 만듭니다. - `scope="row"`인 행 제목 셀을 두 개 만듭니다. - `<tbody>` 안에 수업 행을 두 개 둡니다. - 표 제목은 `1학기 주간 시간표`입니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
30
접근 가능한 비교 표 완성하기
3
## 이번 단계에서 배울 내용 비교 표에서는 맨 위 행이 열의 기준을 설명하고, 각 데이터 행의 첫 셀이 비교 대상의 이름이 됩니다. `<thead>`와 `<tbody>`로 두 부분을 나누고 헤더 셀의 `scope`를 지정하면 관계가 분명해집니다. 이번 문제에서는 앞서 배운 표 요소를 함께 사용해 완전한 요금제 비교 표를 만듭니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <table> <caption>배송 방법 비교</caption> <thead> <tr> <th scope="col">방법</th> <th scope="col">기간</th> <th scope="col">비용</th> </tr> </thead> <tbody> <tr><th scope="row">일반</th><td>3일</td><td>무료</td></tr> </tbody> </table> ``` ## 해야 할 일 `Free`와 `Pro` 요금제를 저장 공간과 DevBox 수로 비교하는 표를 완성하세요. 표 제목, 세 개의 열 제목, 두 개의 데이터 행을 모두 갖춰야 합니다. ## 완성 조건 - `plans`라는 `id`의 `<table>`을 한 개 만듭니다. - 표 안에 `<caption>`을 한 개 둡니다. - `<thead>` 안에 `scope="col"`인 열 제목을 세 개 만듭니다. - `<tbody>` 안에 `scope="row"`인 행 제목을 두 개 만듭니다. - `<tbody>` 안에 비교 행을 두 개 둡니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
31
form과 button으로 제출 영역 만들기
3
## 이번 단계에서 배울 내용 `<form>`은 사용자가 입력하거나 선택한 값을 한 묶음으로 제출하는 영역입니다. `<button>`은 사용자가 실행할 동작을 나타내는 실제 버튼 요소입니다. `method="get"`은 검색어처럼 주소에 포함해 요청해도 되는 값을 보낼 때 주로 사용합니다. 버튼에 `type="submit"`을 지정하면 폼 제출 동작이 분명해집니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <form method="get"> <input name="keyword" type="search"> <button type="submit">상품 찾기</button> </form> ``` ## 해야 할 일 문서 검색 영역을 제출 가능한 폼으로 바꾸세요. 폼은 `search-form`, 버튼은 `search-button`이라는 `id`를 사용하고 버튼 글은 `검색하기`로 유지합니다. ## 완성 조건 - `search-form`이라는 `id`의 `<form>`을 한 개 만듭니다. - `search-button`이라는 `id`의 `<button>`을 한 개 만듭니다. - 폼의 `method` 값은 `get`입니다. - 버튼의 `type` 값은 `submit`입니다. - 버튼 안의 글은 `검색하기`입니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
32
label과 input 연결하기
3
## 이번 단계에서 배울 내용 `<label>`은 입력칸이 어떤 값을 받는지 알려 주는 이름표입니다. label의 `for` 값과 input의 `id` 값을 같게 작성하면 둘이 연결됩니다. 연결된 이름표를 클릭해도 입력칸에 초점이 이동하므로 마우스와 터치 사용이 편해지고, 화면 읽기 도구도 입력 목적을 알 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <label for="nickname">별명</label> <input id="nickname" name="nickname" type="text"> ``` ## 해야 할 일 `이름`이라는 글을 실제 `<label>`로 바꾸고 이름 입력칸과 연결하세요. label의 `for`와 input의 `id`는 모두 `name`을 사용합니다. ## 완성 조건 - `for="name"`인 `<label>`을 한 개 만듭니다. - `name`이라는 `id`의 `<input>`을 한 개 만듭니다. - 입력칸의 `name` 값은 `name`입니다. - label과 input이 같은 값으로 올바르게 연결됩니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
33
입력 목적에 맞는 input type 사용하기
3
## 이번 단계에서 배울 내용 `<input>`의 `type`은 어떤 값을 받을지 브라우저에 알려 줍니다. 일반 글은 `text`, 이메일 주소는 `email`, 가려서 표시할 비밀번호는 `password`를 사용합니다. 알맞은 입력 종류를 사용하면 모바일 키보드와 브라우저 검증도 입력 목적에 맞게 동작합니다. `autocomplete`은 브라우저가 저장된 값을 안전하게 제안할 목적을 알려 줍니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <input id="display-name" type="text"> <input id="contact-email" type="email" autocomplete="email"> <input id="new-pin" type="password" autocomplete="new-password"> ``` ## 해야 할 일 사용자 이름, 이메일, 새 비밀번호 입력칸을 목적에 맞는 세 가지 `type`으로 구분하세요. 이메일과 비밀번호 입력칸에는 알맞은 `autocomplete` 값도 지정합니다. ## 완성 조건 - `type="text"`인 일반 글 입력칸을 한 개 만듭니다. - `type="email"`인 이메일 입력칸을 한 개 만듭니다. - `type="password"`인 비밀번호 입력칸을 한 개 만듭니다. - 이메일 입력칸에 `autocomplete="email"`을 지정합니다. - 비밀번호 입력칸에 `autocomplete="new-password"`를 지정합니다. - 세 입력칸에 각각 연결된 label이 있습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
34
체크박스와 라디오 버튼 구성하기
3
## 이번 단계에서 배울 내용 체크박스(`type="checkbox"`)는 여러 항목을 동시에 고를 수 있을 때 사용합니다. 라디오 버튼(`type="radio"`)은 여러 선택지 중 하나만 고를 때 사용하며, 같은 그룹의 `name` 값을 같게 작성합니다. `<fieldset>`은 관련 선택지를 묶고 `<legend>`는 그 그룹의 질문을 알려 줍니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <fieldset> <legend>좋아하는 색을 모두 고르세요</legend> <label><input type="checkbox" name="color" value="blue"> 파랑</label> <label><input type="checkbox" name="color" value="green"> 초록</label> </fieldset> ``` ## 해야 할 일 관심 과목 `HTML`, `CSS`는 동시에 고를 수 있는 체크박스로 만드세요. 난이도 `입문`, `심화`는 하나만 고를 수 있는 라디오 버튼으로 만들고 두 그룹을 각각 제목이 있는 영역으로 묶습니다. ## 완성 조건 - 체크박스를 두 개 만듭니다. - `name="level"`인 라디오 버튼을 두 개 만듭니다. - 선택지 그룹을 `<fieldset>` 두 개로 나눕니다. - 각 그룹에 `<legend>`를 하나씩, 모두 두 개 작성합니다. - 각 선택 입력에는 연결된 `<label>`이 있습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
35
select와 textarea로 상세 입력 받기
3
## 이번 단계에서 배울 내용 `<select>`는 정해진 선택지 중 하나를 고르는 목록입니다. 각 선택지는 `<option>`으로 작성합니다. `<textarea>`는 문의 내용처럼 여러 줄의 글을 입력할 때 사용합니다. `rows`는 처음 화면에 보일 글줄 수를 정합니다. 두 입력 모두 `<label>`과 연결해 목적을 알려 주어야 합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <label for="topic">문의 종류</label> <select id="topic" name="topic"> <option value="order">주문</option> <option value="delivery">배송</option> </select> <label for="detail">상세 내용</label> <textarea id="detail" name="detail" rows="4"></textarea> ``` ## 해야 할 일 문의 종류를 `계정`, `결제` 중에서 고르는 선택 목록으로 만들고, 문의 내용은 처음에 다섯 줄이 보이는 여러 줄 입력칸으로 만드세요. ## 완성 조건 - `category` 선택 목록 바로 안에 `<option>`을 두 개 둡니다. - `message`라는 `id`의 `<textarea>`를 한 개 만듭니다. - 문의 내용 입력칸의 `rows` 값은 `5`입니다. - 선택 목록과 여러 줄 입력칸에 연결된 label이 있습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
36
fieldset과 legend로 폼 그룹 만들기
3
## 이번 단계에서 배울 내용 긴 폼에서는 서로 관련된 입력을 `<fieldset>`으로 묶을 수 있습니다. `<legend>`는 그 묶음 전체의 제목이며 `<fieldset>`의 첫 부분에 둡니다. 예를 들어 주소와 우편번호는 각각의 label뿐 아니라 `배송지`라는 공통 제목도 필요합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <fieldset> <legend>보호자 정보</legend> <label>이름 <input name="guardian_name"></label> <label>연락처 <input name="guardian_phone"></label> </fieldset> ``` ## 해야 할 일 주소와 우편번호 입력을 `shipping`이라는 하나의 `<fieldset>`으로 묶고, 그룹 제목을 `배송지`로 작성하세요. ## 완성 조건 - `shipping`이라는 `id`의 `<fieldset>`을 한 개 만듭니다. - `<fieldset>` 바로 안에 `<legend>`를 한 개 둡니다. - `<fieldset>` 안에 입력칸 두 개를 둡니다. - 그룹 제목은 `배송지`입니다. - 주소와 우편번호 입력에 각각 연결된 label이 있습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
37
HTML 폼 검증 속성 적용하기
3
## 이번 단계에서 배울 내용 HTML 속성만으로도 제출 전에 기본 입력 조건을 확인할 수 있습니다. `required`는 반드시 입력해야 한다는 뜻이고, 숫자 입력의 `min`과 `max`는 허용 범위를 정합니다. `pattern`은 입력 글의 모양을 검사합니다. `[A-Z]{3}-[0-9]{4}`는 영문 대문자 세 글자, 하이픈, 숫자 네 자리 형태를 뜻합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <input type="number" min="1" max="10" required> <input pattern="[0-9]{3}-[0-9]{4}" required> ``` ## 해야 할 일 이메일, 참여 인원, 초대 코드를 모두 필수 입력으로 만드세요. 참여 인원은 1명 이상 5명 이하로 제한하고, 초대 코드는 영문 대문자 세 글자와 숫자 네 자리 형식으로 제한합니다. ## 완성 조건 - 세 입력칸 모두에 `required` 속성이 있습니다. - `members`라는 `id`의 입력칸이 한 개 있습니다. - `code`라는 `id`의 입력칸이 한 개 있습니다. - 참여 인원 입력의 `min` 값은 `1`입니다. - 참여 인원 입력의 `max` 값은 `5`입니다. - 초대 코드의 `pattern`은 `[A-Z]{3}-[0-9]{4}`입니다. - 세 입력칸에 각각 연결된 label이 있습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
38
접근 가능한 회원가입 폼 완성하기
3
## 이번 단계에서 배울 내용 접근 가능한 폼은 입력 목적을 알려 주는 label, 관련 선택지를 묶는 fieldset과 legend, 반드시 입력할 값을 표시하는 required, 실행 목적이 분명한 제출 버튼을 함께 사용합니다. 이번 문제는 지금까지 배운 폼 요소를 조합해 작은 회원가입 폼을 완성하는 연습입니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <form> <label for="account">계정 이름</label> <input id="account" required> <fieldset> <legend>소식 받기</legend> <label><input type="radio" name="news" value="yes"> 받기</label> <label><input type="radio" name="news" value="no"> 받지 않기</label> </fieldset> <button type="submit">등록</button> </form> ``` ## 해야 할 일 이름과 이메일을 필수 입력으로 만들고 각각 label을 연결하세요. 알림 수신 여부는 제목이 있는 라디오 버튼 그룹으로 만들고, 마지막에는 실제 제출 버튼을 둡니다. ## 완성 조건 - `signup`이라는 `id`의 `<form>`을 한 개 만듭니다. - 필수 입력칸을 두 개 만듭니다. - 알림 선택 그룹에 `<fieldset>`과 `<legend>`를 한 개씩 둡니다. - 라디오 버튼을 두 개 만듭니다. - `type="submit"`인 버튼을 한 개 만듭니다. - 모든 입력과 선택지에 연결된 label이 있습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
39
클릭 가능한 div를 button으로 바꾸기
2
## 이번 단계에서 배울 내용 `<div>`는 내용을 묶는 요소일 뿐, 클릭 동작을 뜻하지 않습니다. 사용자가 눌러서 어떤 동작을 실행한다면 `<button>`을 사용해야 합니다. 폼을 제출하지 않는 일반 동작 버튼에는 `type="button"`을 지정합니다. 그러면 키보드로도 버튼을 선택하고 실행할 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <button id="close-panel" type="button">창 닫기</button> ``` ## 해야 할 일 `파일 삭제` 동작을 나타내는 `<div>`를 실제 버튼으로 바꾸세요. 기존 `delete-button`이라는 `id`와 글은 유지하고 버튼 종류는 일반 동작으로 지정합니다. ## 완성 조건 - `delete-button`이라는 `id`의 `<button>`을 한 개 만듭니다. - 버튼의 `type` 값은 `button`입니다. - 버튼 안의 글은 `파일 삭제`입니다. - `delete-button`이라는 `id`를 가진 `<div>`는 남아 있지 않습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
40
details와 summary로 접이식 정보 만들기
2
## 이번 단계에서 배울 내용 `<details>`는 사용자가 열고 닫을 수 있는 정보 영역입니다. 그 안의 `<summary>`는 항상 보이는 제목이자 열기 버튼 역할을 합니다. JavaScript를 작성하지 않아도 브라우저가 클릭과 키보드 동작을 처리하므로 자주 묻는 질문처럼 필요할 때 펼쳐 보는 내용에 알맞습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <details> <summary>배송은 얼마나 걸리나요?</summary> <p>보통 2~3일이 걸립니다.</p> </details> ``` ## 해야 할 일 비밀번호 변경 질문과 답변을 하나의 접이식 영역으로 만드세요. 영역에는 `answer`라는 `id`를 지정하고, 질문은 summary, 답변은 문단으로 둡니다. ## 완성 조건 - `answer`라는 `id`의 `<details>`를 한 개 만듭니다. - `<details>` 바로 안에 `<summary>`를 한 개 둡니다. - `<details>` 바로 안에 답변 문단 `<p>`를 한 개 둡니다. - summary의 글은 `비밀번호를 어떻게 바꾸나요?`입니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
41
progress와 meter를 구분해 사용하기
2
## 이번 단계에서 배울 내용 `<progress>`는 다운로드나 강좌처럼 진행 중인 작업이 얼마나 끝났는지 보여 줍니다. `<meter>`는 점수나 사용량처럼 정해진 범위 안의 측정값을 보여 줍니다. 둘 다 `value`에 현재 값을 작성합니다. progress는 `max`로 완료 기준도 알려 줍니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <progress value="3" max="10">3/10 완료</progress> <meter value="72" min="0" max="100">72점</meter> ``` ## 해야 할 일 강좌 진행률 60%는 `<progress>`, 퀴즈 점수 85점은 `<meter>`로 표시하세요. 각 요소에 문제에서 정한 `id`와 현재 값을 지정합니다. ## 완성 조건 - `course-progress`라는 `id`의 `<progress>`를 한 개 만듭니다. - `quiz-score`라는 `id`의 `<meter>`를 한 개 만듭니다. - 강좌 진행률의 `value`는 `60`입니다. - 강좌 진행률의 `max`는 `100`입니다. - 퀴즈 점수의 `value`는 `85`입니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. - 진행률과 점수에 각각 무엇을 나타내는지 알려 주는 label이 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
42
랜드마크와 콘텐츠 순서 정리하기
2
## 이번 단계에서 배울 내용 페이지의 큰 영역을 `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`로 표시하면 랜드마크가 됩니다. 화면 읽기 도구 사용자는 랜드마크 사이를 빠르게 이동할 수 있습니다. 코드의 순서도 읽는 순서와 맞아야 합니다. 보통 머리말, 핵심 내용, 관련 정보, 바닥글 순서로 작성합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <header> <h1>도움말</h1> <nav aria-label="도움말 메뉴">메뉴</nav> </header> <main>핵심 안내</main> <aside>관련 안내</aside> <footer>문의처</footer> ``` ## 해야 할 일 뒤섞여 있는 개발 문서의 영역을 읽는 순서에 맞게 다시 배치하세요. 머리말 안에는 이름이 있는 메뉴를 두고, 핵심 내용과 관련 문서, 바닥글을 각각 알맞은 요소로 표시합니다. ## 완성 조건 - `<body>` 바로 안의 첫 번째 `<header>`를 한 개 둡니다. - `<body>` 바로 안에 `<main>`을 한 개 둡니다. - `<body>` 바로 안에 `<aside>`를 한 개 둡니다. - `<body>` 바로 안에 `<footer>`를 한 개 둡니다. - `<header>` 안에 `<nav>`를 한 개 둡니다. - 내비게이션의 `aria-label`은 `주요 메뉴`입니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
43
잘못된 HTML 중첩 디버깅하기
2
## 이번 단계에서 배울 내용 HTML 요소는 허용된 부모와 자식 관계를 지켜야 합니다. `<ul>` 바로 안에는 목록 항목 `<li>`가 와야 하며, 일반 `<p>`를 직접 둘 수 없습니다. 또한 문단 `<p>` 안에는 구역을 만드는 `<div>`를 넣을 수 없습니다. 브라우저가 코드를 임의로 고치기 전에 올바른 구조로 작성해야 예상한 결과가 나옵니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <ul> <li><p>첫 번째 학습 내용</p></li> <li><p>두 번째 학습 내용</p></li> </ul> <div><p>추가 안내입니다.</p></div> ``` ## 해야 할 일 잘못 작성된 학습 목록을 고치세요. 두 학습 내용은 각각 목록 항목이 되어야 하고, 각 항목 안의 설명은 문단으로 유지합니다. 안내 문단과 div의 잘못된 포함 관계도 바로잡습니다. ## 완성 조건 - `lessons` 목록 바로 안에 `<li>`를 두 개 둡니다. - 두 `<li>` 바로 안에 문단을 하나씩 둡니다. - `<ul>` 바로 안에 `<p>`가 남아 있지 않습니다. - `<p>` 안에 `<div>`가 남아 있지 않습니다. - 페이지 제목을 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
44
HTML 접근성 문제 종합 수정하기
2
## 이번 단계에서 배울 내용 접근성은 한 가지 속성만 추가해서 끝나지 않습니다. 문서 언어, 제목 구조, 이미지 설명, 입력 이름표, 실제 버튼처럼 여러 기본 원칙을 함께 지켜야 합니다. 이번 문제에서는 접근성이 부족한 짧은 문서를 살펴보고 앞에서 배운 요소를 한 번에 고칩니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <html lang="ko"> <body> <main> <h1>월간 보고서</h1> <img src="chart.png" alt="월별 매출 막대그래프"> <label for="report-email">받을 이메일</label> <input id="report-email" type="email"> <button type="submit">보고서 받기</button> </main> </body> </html> ``` ## 해야 할 일 접근성 점검 페이지를 수정하세요. 문서 언어를 한국어로 지정하고, 핵심 제목, 이미지 설명, 이메일 입력 label, 제출 버튼을 올바른 HTML 요소와 속성으로 완성합니다. ## 완성 조건 - `<html>`의 `lang` 값은 `ko`입니다. - 페이지의 핵심 제목 `<h1>`을 한 개 만듭니다. - `report-email`이라는 `id`의 입력칸을 한 개 만듭니다. - `type="submit"`인 버튼을 한 개 만듭니다. - 이메일 입력칸의 `type` 값은 `email`입니다. - 제목 단계를 `<h1>`부터 순서대로 사용합니다. - 보고서 이미지에 내용을 설명하는 `alt`가 있습니다. - 이메일 label과 입력칸이 연결되어 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
45
시맨틱 블로그 글 페이지 만들기
1
## 이번 단계에서 배울 내용 블로그 글 페이지에는 사이트 머리말과 메뉴, 독립적인 글, 글의 작성 정보, 여러 본문 구역, 관련 글, 바닥글이 있습니다. 각 역할을 알맞은 시맨틱 요소로 표현하면 긴 문서도 구조를 쉽게 파악할 수 있습니다. `<time>`의 `datetime`에는 컴퓨터가 읽을 수 있는 날짜를 작성하고, 화면에는 사람이 읽기 편한 날짜를 넣을 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <header> <h1>여행 블로그</h1> <nav aria-label="블로그 메뉴">글 목록</nav> </header> <main> <article> <header><h2>제주 여행기</h2><time datetime="2026-05-02">5월 2일</time></header> <section><h3>첫날</h3><p>여행 내용</p></section> </article> <aside>관련 글</aside> </main> <footer>블로그 정보</footer> ``` ## 해야 할 일 HTML 학습 블로그 글 페이지를 완성하세요. 사이트 머리말과 메뉴, 작성 날짜가 있는 글, 두 개의 본문 구역, 관련 글, 바닥글을 문서 역할과 읽는 순서에 맞게 구성합니다. ## 완성 조건 - 페이지 `<header>` 안에 `<nav>`를 한 개 둡니다. - `<main>` 안에 `post`라는 `id`의 `<article>`을 한 개 둡니다. - 글의 `<header>` 바로 안에 `<time>`을 한 개 둡니다. - 글 바로 안에 본문 `<section>`을 두 개 둡니다. - `<main>` 바로 안에 관련 글 `<aside>`를 한 개 둡니다. - `<body>` 바로 안에 `<footer>`를 한 개 둡니다. - 내비게이션의 `aria-label`은 `블로그 메뉴`입니다. - 작성 날짜의 `datetime`은 `2026-07-28`입니다. - 제목 단계를 `<h1>`부터 순서대로 사용합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
46
접근 가능한 상품 상세 페이지 만들기
1
## 이번 단계에서 배울 내용 상품 상세 페이지는 하나의 독립적인 상품 정보이므로 `<article>`로 묶을 수 있습니다. 상품 사진과 설명은 `<figure>`, 특징 목록은 `<section>`, 수량과 구매 동작은 `<form>`으로 구분합니다. 이미지 설명, 수량 label, 최소 주문 수량, 실제 제출 버튼까지 갖추면 다양한 사용자가 상품을 이해하고 주문할 수 있습니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <article> <h1>무선 키보드</h1> <figure> <img src="keyboard.jpg" alt="흰색 무선 키보드"> <figcaption>책상 위의 키보드</figcaption> </figure> <section><h2>특징</h2><ul><li>가벼운 무게</li></ul></section> <form> <label for="count">수량</label> <input id="count" type="number" min="1"> <button type="submit">주문하기</button> </form> </article> ``` ## 해야 할 일 학습용 HTML 책의 상품 상세 페이지를 완성하세요. 상품 정보, 사진과 설명, 두 가지 특징, 최소 한 권부터 선택하는 수량 입력, 주문 버튼을 의미에 맞게 구성합니다. ## 완성 조건 - `product`라는 `id`의 `<article>`을 한 개 만듭니다. - 상품 글 안의 `<figure>`에 이미지 한 개를 둡니다. - 상품 특징 `<section>`의 목록 바로 안에 항목을 두 개 둡니다. - 상품 폼 안에 `quantity`라는 `id`의 입력칸을 한 개 둡니다. - 상품 폼 안에 `type="submit"`인 버튼을 한 개 둡니다. - 수량 입력의 `min` 값은 `1`입니다. - 제목 단계를 `<h1>`부터 순서대로 사용합니다. - 상품 이미지에 내용을 설명하는 `alt`가 있습니다. - 수량 label과 입력칸이 연결되어 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
47
행사 안내와 신청 폼 페이지 만들기
1
## 이번 단계에서 배울 내용 행사 페이지는 행사 소개와 신청이라는 서로 다른 목적을 함께 담습니다. 행사 소개는 독립적인 `<article>`, 일정은 순서가 있는 `<ol>`, 신청은 별도의 `<section>`과 `<form>`으로 구성할 수 있습니다. 날짜에는 `<time>`, 관련 입력 묶음에는 `<fieldset>`, 반드시 필요한 값에는 `required`를 사용합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <header><h1>개발자 행사</h1><nav>행사 메뉴</nav></header> <main> <article><h2>웹 접근성 세미나</h2><time datetime="2026-09-01">9월 1일</time></article> <section> <h2>참가 신청</h2> <form> <fieldset><legend>참가자 정보</legend><input required></fieldset> <button type="submit">신청하기</button> </form> </section> </main> ``` ## 해야 할 일 HTML 학습 행사의 안내와 신청 페이지를 완성하세요. 머리말의 메뉴, 날짜가 있는 행사 소개, 두 단계 일정, 세 개의 필수 입력을 묶은 신청 폼, 제출 버튼을 구성합니다. ## 완성 조건 - 페이지 `<header>` 안에 `<nav>`를 한 개 둡니다. - 행사 소개 `<article>` 안에 `<time>`을 한 개 둡니다. - `schedule`이라는 `id`의 순서 목록 바로 안에 항목을 두 개 둡니다. - `register`라는 `id`의 영역 안에 필수 입력을 세 개 둡니다. - 신청 영역 안에 `<fieldset>`을 한 개 둡니다. - 신청 영역 안에 `type="submit"`인 버튼을 한 개 둡니다. - 제목 단계를 `<h1>`부터 순서대로 사용합니다. - 세 신청 입력에 각각 연결된 label이 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%
48
HTML 종합 학습 포털 완성하기
1
## 이번 단계에서 배울 내용 학습 포털은 한 페이지 안에 메뉴, 새 소식, 강좌 비교 표, 문의 폼, 보조 안내, 바닥글처럼 다양한 콘텐츠를 담습니다. 각 영역의 의미와 부모·자식 관계를 지키면 내용이 많아져도 문서가 이해하기 쉬워집니다. 마지막 문제에서는 지금까지 배운 제목, 목록, article, time, 표, 폼, 랜드마크, 접근성 속성을 하나의 문서에서 함께 사용합니다. ### 예시 아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다. ```html <header> <h1>과학 학습 포털</h1> <nav aria-label="주요 메뉴"><ul><li>강좌</li><li>소식</li></ul></nav> </header> <main> <section><h2>새 소식</h2><article><time datetime="2026-03-10">3월 10일</time></article></section> <section><h2>강좌 비교</h2><table><caption>강좌 안내</caption></table></section> <section><h2>문의</h2><form><input required><textarea required></textarea></form></section> </main> <aside>학습 도움말</aside> <footer>문의처</footer> ``` ## 해야 할 일 HTML 학습 포털을 완성하세요. 세 항목의 주요 메뉴, 날짜가 있는 새 소식, 세 열의 강좌 비교 표, 필수 제목과 내용 입력이 있는 문의 폼, 보조 안내와 바닥글을 하나의 올바른 문서로 구성합니다. ## 완성 조건 - 머리말 메뉴의 목록 바로 안에 항목을 세 개 둡니다. - `news` 영역의 `<article>` 안에 `<time>`을 한 개 둡니다. - `plans` 표 안에 `<caption>`을 한 개 둡니다. - `plans` 표에 `scope="col"`인 열 제목을 세 개 둡니다. - `contact` 폼 안에 필수 입력칸을 한 개 둡니다. - `contact` 폼 안에 필수 여러 줄 입력칸을 한 개 둡니다. - `<body>` 바로 안에 `<aside>`를 한 개 둡니다. - `<body>` 바로 안에 `<footer>`를 한 개 둡니다. - 내비게이션의 `aria-label`은 `주요 메뉴`입니다. - 제목 단계를 `<h1>`부터 순서대로 사용합니다. - 문의 입력칸과 여러 줄 입력칸에 연결된 label이 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석이 있는 부분을 중심으로 코드를 수정합니다. 3. 미리보기에서 결과를 확인한 뒤 제출합니다.
0
0.00%