K-BOOKS / BEGINNER EDUCATION / R28

기초 66강 · 최종 독학 검수표

기초 18단계와 실습 48강을 완전 초보자가 스스로 작성할 수 있는지 실제로 확인하기 위한 기록지입니다. 코드 자동 검사가 통과해도 학습자 완주를 대신할 수 없습니다.

18단계BASIC 코드 이해
48강입문·A~F·기능·종합
12개운영 서버 최종 시험

기록 원칙: 각 강의마다 시작 파일만 제공하고, 설명을 보면서 스스로 코드를 작성합니다. 정답을 미리 복사한 경우에는 ‘독학 재현 성공’으로 표시하지 않습니다. 이 문서는 브라우저 안의 기록을 자동 저장하지 않으므로 작성 후 인쇄하거나 PDF로 보관하세요.

1 · 코드 이해 BASIC 18단계

번호강의 내용혼자 재현모바일 점검막힌 부분 / 실제 소요시간
B01HTML 한 장의 출발index.html 파일에 오른쪽 예시를 처음부터 직접 입력하세요. CSS·JS는 아직 빈 파일이 정상입니다.
B02상자를 나누는 부모·자식HEADER, MAIN, FOOTER 주석을 각 영역으로 교체하세요. 안쪽에 남겨둔 주석은 이후 강의에서 채웁니다.
B03제목·문단의 의미INTRO_TEXT 주석을 제목과 두 문단으로 바꾸세요. h1과 p 글자가 실제로 나타나는지 확인하세요.
B04링크와 id의 짝NAV 주석을 메뉴 코드로 교체하세요. 소개·작업 메뉴를 누를 때 해당 구역으로 이동하는지 확인하세요.
B05이미지와 상대경로HERO_IMAGE 자리에 figure와 img를 입력하세요. 제공된 images/hero.svg 그림이 보이는지 확인하세요.
B06HTML과 CSS 연결CSS_LINK 주석을 link 태그로 바꾸고 style.css에 세 개의 규칙을 직접 입력하세요.
B07margin·padding·borderstyle.css 맨 아래에 추가하고 padding을 30px로 잠시 줄였다가 되돌려 보세요.
B08부모 너비와 가운데 정렬style.css에 두 규칙을 입력하고 PC와 390px 모바일에서 콘텐츠 폭 차이를 관찰하세요.
B09Flex로 가로 메뉴 만들기style.css의 마지막에 입력하고 브랜드가 왼쪽, 메뉴가 오른쪽으로 오는지 확인하세요.
B10Grid로 카드 3개 만들기CARD_ITEMS에 카드 3개를 추가하고 style.css에 3열 그리드를 작성하세요.
B11이미지와 콘텐츠 넘침 방지style.css에 이미지 규칙을 입력하고 창을 390px로 바꿔 히어로·카드 그림이 잘리는지 확인하세요.
B12@media로 태블릿 화면 구성style.css 맨 아래에 @media 블록을 입력하고 1200px과 768px을 비교하세요.
B13모바일 390px에서 한 줄씩style.css 끝에 모바일 @media를 추가하고 390px, 320px에서 카드가 각각 한 열인지 확인하세요.
B14모바일 메뉴 버튼의 역할MENU_BUTTON 주석 자리에 버튼을 넣고 style.css에 모바일 메뉴 표시 규칙을 추가하세요. 아직 JS를 연결하지 않아 버튼은 열리지 않아도 정상입니다.
B15모바일 메뉴 실제로 열고 닫기SCRIPT_LINK 주석을 script.js 연결 태그로 바꾸고 script.js에 코드를 입력하세요. 390px에서 ☰를 누르면 메뉴가 보여야 합니다.
B16보이는 메뉴가 아니라 사용 가능한 메뉴style.css에 접근성 규칙을 넣고 모바일 팝업에서 Tab키로 메뉴 버튼과 링크에 이동해 보세요.
B17320px·390px 기능 점검과 오류 복구script.js 아래에 닫기 코드를 추가하고 PC·태블릿·모바일·작은 모바일 4개 폭에서 화면 품질 진단을 실행하세요.
B18스스로 바꾸고 오프라인에서 실행하기원하는 브랜드로 이름을 바꾸고 배경색·카드 문구 하나를 수정하세요. 1200·768·390·320px 화면과 메뉴를 모두 확인한 뒤 ZIP으로 내보내 오프라인에서 index.html을 열어보세요.

2 · 기초 제작 실습 48강

번호강의 내용혼자 재현모바일 점검막힌 부분 / 실제 소요시간
I01처음 쓰는 HTMLindex.html에서 제목과 문단을 직접 입력하세요. 제목은 「나의 첫 홈페이지」, 문단은 「오늘부터 시작합니다.」로 작성해보세요.
I02HTML 문서의 뼈대앞 강의의 제목과 문단을 body 안에 넣고 html, head, title, body를 갖춘 HTML 문서로 바꿔보세요.
I03영역 나누기body 안을 header, main, footer 세 영역으로 나누어 배치해보세요. 기존 제목은 main 안에 남겨두세요.
I04링크와 이미지 추가하기main 안에 K-BOOKS 홈으로 이동하는 링크와 예시 이미지 한 장을 넣어보세요.
I05CSS 색상과 글꼴style.css 탭으로 이동해 body에 배경색과 글꼴을 지정하고, h1에 글자색을 넣어보세요.
I06상자·테두리·여백본문에 class="card"를 가진 section을 만들고 CSS에 padding, border, margin을 지정해보세요.
I07Flex로 나란히 놓기card 두 장을 class="card-list" 부모로 감싼 다음, CSS에서 display: flex와 gap을 지정하세요.
I08모바일과 첫 페이지 완성헤더에 메뉴 링크, 본문에 두 카드, 푸터를 유지하고, 640px 이하일 때 카드가 세로로 배치되도록 @media를 추가하세요.
LA1레이아웃 A-1 · 전체 틀.a 유형 첫 단계예요. header.page-head, section.hero, main.page-body, footer.page-foot 네 영역을 만들고 CSS로 각 영역의 색상과 높이를 정해보세요.
LA2레이아웃 A-2 · 로고와 메뉴상단 영역에 a.logo와 nav.menu를 넣으세요. 메뉴에는 홈·콘텐츠·문의 링크를 넣고 CSS에서 display:flex로 정렬합니다.
LA3레이아웃 A-3 · 콘텐츠 분할본문을 3열 콘텐츠 카드 화면으로 구성하세요. article.tile 카드 3개 이상을 만든 뒤 .cards의 grid-template-columns를 지정하고, 700px 이하에서는 한 열로 바꾸세요.
LA4레이아웃 A-4 · 푸터·반응형이전 단계에서 만든 모바일 카드 한 열을 유지하고 푸터·헤더·메뉴까지 @media(max-width:700px)에서 세로로 정리하세요.
LB1레이아웃 B-1 · 전체 틀.b 유형 첫 단계예요. header.page-head, section.hero, main.page-body, footer.page-foot 네 영역을 만들고 CSS로 각 영역의 색상과 높이를 정해보세요.
LB2레이아웃 B-2 · 로고와 메뉴상단 영역에 a.logo와 nav.menu를 넣으세요. 메뉴에는 홈·콘텐츠·문의 링크를 넣고 CSS에서 display:flex로 정렬합니다.
LB3레이아웃 B-3 · 콘텐츠 분할본문을 좌측 정보 + 2열 카드 화면으로 구성하세요. article.tile 카드 3개 이상을 만든 뒤 .cards의 grid-template-columns를 지정하고, 700px 이하에서는 한 열로 바꾸세요.
LB4레이아웃 B-4 · 푸터·반응형이전 단계에서 만든 모바일 카드 한 열을 유지하고 푸터·헤더·메뉴까지 @media(max-width:700px)에서 세로로 정리하세요.
LC1레이아웃 C-1 · 전체 틀.c 유형 첫 단계예요. header.page-head, section.hero, main.page-body, footer.page-foot 네 영역을 만들고 CSS로 각 영역의 색상과 높이를 정해보세요.
LC2레이아웃 C-2 · 로고와 메뉴상단 영역에 a.logo와 nav.menu를 넣으세요. 메뉴에는 홈·콘텐츠·문의 링크를 넣고 CSS에서 display:flex로 정렬합니다.
LC3레이아웃 C-3 · 콘텐츠 분할본문을 공지 + 서비스 3열 화면으로 구성하세요. article.tile 카드 3개 이상을 만든 뒤 .cards의 grid-template-columns를 지정하고, 700px 이하에서는 한 열로 바꾸세요.
LC4레이아웃 C-4 · 푸터·반응형이전 단계에서 만든 모바일 카드 한 열을 유지하고 푸터·헤더·메뉴까지 @media(max-width:700px)에서 세로로 정리하세요.
LD1레이아웃 D-1 · 전체 틀.d 유형 첫 단계예요. header.page-head, section.hero, main.page-body, footer.page-foot 네 영역을 만들고 CSS로 각 영역의 색상과 높이를 정해보세요.
LD2레이아웃 D-2 · 로고와 메뉴상단 영역에 a.logo와 nav.menu를 넣으세요. 메뉴에는 홈·콘텐츠·문의 링크를 넣고 CSS에서 display:flex로 정렬합니다.
LD3레이아웃 D-3 · 콘텐츠 분할본문을 2열 콘텐츠 카드 화면으로 구성하세요. article.tile 카드 3개 이상을 만든 뒤 .cards의 grid-template-columns를 지정하고, 700px 이하에서는 한 열로 바꾸세요.
LD4레이아웃 D-4 · 푸터·반응형이전 단계에서 만든 모바일 카드 한 열을 유지하고 푸터·헤더·메뉴까지 @media(max-width:700px)에서 세로로 정리하세요.
LE1레이아웃 E-1 · 전체 틀.e 유형 첫 단계예요. header.page-head, section.hero, main.page-body, footer.page-foot 네 영역을 만들고 CSS로 각 영역의 색상과 높이를 정해보세요.
LE2레이아웃 E-2 · 로고와 메뉴상단 영역에 a.logo와 nav.menu를 넣으세요. 메뉴에는 홈·콘텐츠·문의 링크를 넣고 CSS에서 display:flex로 정렬합니다.
LE3레이아웃 E-3 · 콘텐츠 분할본문을 4열 제품 카드 화면으로 구성하세요. article.tile 카드 3개 이상을 만든 뒤 .cards의 grid-template-columns를 지정하고, 700px 이하에서는 한 열로 바꾸세요.
LE4레이아웃 E-4 · 푸터·반응형이전 단계에서 만든 모바일 카드 한 열을 유지하고 푸터·헤더·메뉴까지 @media(max-width:700px)에서 세로로 정리하세요.
LF1레이아웃 F-1 · 전체 틀.f 유형 첫 단계예요. header.page-head, section.hero, main.page-body, footer.page-foot 네 영역을 만들고 CSS로 각 영역의 색상과 높이를 정해보세요.
LF2레이아웃 F-2 · 로고와 메뉴상단 영역에 a.logo와 nav.menu를 넣으세요. 메뉴에는 홈·콘텐츠·문의 링크를 넣고 CSS에서 display:flex로 정렬합니다.
LF3레이아웃 F-3 · 콘텐츠 분할본문을 좌측 세로 메뉴 + 카드 화면으로 구성하세요. article.tile 카드 3개 이상을 만든 뒤 .cards의 grid-template-columns를 지정하고, 700px 이하에서는 한 열로 바꾸세요.
LF4레이아웃 F-4 · 푸터·반응형이전 단계에서 만든 모바일 카드 한 열을 유지하고 푸터·헤더·메뉴까지 @media(max-width:700px)에서 세로로 정리하세요.
S01메뉴 1 · 마우스를 올리면 펼치기상품 메뉴의 li에 nav-item 클래스를 붙이세요. 메뉴에 마우스를 올리면 하위 메뉴가 나타나야 합니다.
S02메뉴 2 · 클릭해서 열기열기 버튼을 js-open 클래스로 바꿔보세요. 클릭하면 안내 패널이 펼쳐집니다.
S03메뉴 3 · 닫기 버튼 만들기닫기 버튼에 js-close 클래스를 추가하고 직접 클릭해보세요.
S04메뉴 4 · 키보드로도 조작하기버튼에 js-keyboard-menu를 붙이세요. Enter로 열고 Escape로 닫히는지 확인하세요.
S05메뉴 5 · 모바일 햄버거☰ 버튼의 클래스에 js-mobile-btn를 추가하세요. 펼쳐지는 메뉴를 확인해보세요.
S06메뉴 6 · 메뉴 바깥을 누르면 닫기열기 버튼에 js-outside-open을 붙이세요. 메뉴를 연 뒤 바깥 영역을 눌러 닫히는지 확인하세요.
S07메뉴 7 · 세로 아코디언접었다 펼치는 질문 버튼에 js-acc-trigger를 넣으세요.
S08슬라이드 1 · 다음 버튼다음 버튼에 js-slide-next 클래스를 넣어보세요. 클릭할 때 1→2→3이 바뀌어야 합니다.
S09슬라이드 2 · 자동으로 넘어가기자동 시작 버튼에 js-auto-slide를 붙인 뒤 실행하세요. 버튼을 누르면 2초 간격으로 배너가 바뀝니다.
S10슬라이드 3 · 숫자 버튼2번 이동 버튼에 js-slide-dot를 붙이세요. 버튼을 누르면 두 번째 배너를 보여줍니다.
S11슬라이드 4 · 페이드 효과아래 전환 버튼에 js-fade-change 클래스를 붙이세요. 버튼 클릭 시 배너 문구가 부드럽게 바뀝니다.
S12슬라이드 5 · 일시정지와 재생일시정지 버튼에 js-pause-slide를 넣고, 자동 슬라이드가 멈추거나 재개되는지 확인하세요.
S13슬라이드 6 · 이전/다음 키보드슬라이드 영역에 js-key-slide 클래스를 넣고, 해당 영역을 클릭한 뒤 왼쪽/오른쪽 방향키로 이동하세요.
S14탭 메뉴 · 선택한 내용 표시「수업 소개」 버튼에 js-tab 클래스를 붙이세요. 클릭하면 대응하는 탭 내용이 나타납니다.
S15팝업 · 열고 닫기공지사항 버튼에 js-popup-open을 추가하세요. 팝업을 열고 닫기까지 직접 확인하세요.
FINAL종합 실습 · 나의 첫 완성 사이트HTML에 header·nav·section.hero·main.cards·footer를 만들고, CSS에서 display:grid와 @media를 적용하세요. 완성했다면 PC와 모바일 두 화면을 꼭 점검하세요.

3 · 운영 서버·학습기록 최종 검증

번호실제 확인 사항통과결과·증빙·재현 방법
01계정/접근비회원과 로그인 회원을 각각 열고 서로의 코드가 노출되지 않는지 확인
02BASIC 코드 보존B01에서 직접 작성한 HTML을 저장한 뒤 새로고침하고 동일 내용인지 확인
03BASIC 저장 실패저장 공간 부족 상황에서 단계 이동·완료·체크포인트·JSON 복원을 막는지 확인
04BASIC 백업B01에서 JSON 다운로드를 요청하고 실제 다운로드 폴더에 파일이 있는지 확인
05BASIC 복원BASIC JSON을 복원해 HTML/CSS/JS, 진도, 퀴즈, 이해 기록이 일치하는지 확인
0648강 시작I01에서 직접 작성한 소스가 다음 강의 이동 후에도 유지되는지 확인
0748강 저장회원 I01에서 Ctrl+S→서버 저장 완료→다른 브라우저 로그인 후 동일 코드 확인
0848강 충돌서로 다른 브라우저에서 같은 강의 수정 후 충돌 안내와 안전한 복구 확인
09미리보기FINAL에서 편집 중 미리보기를 열고 PC/모바일 변환 및 자동 갱신 확인
10미리보기 장애미리보기 빈 화면·응답 지연 시 다시 실행하고 작성 코드가 그대로인지 확인
11반응형320/390/768/1200px에서 가로 넘침, 카드 겹침, 이미지 누락을 눈으로 확인
12독학 완결설명·시작 파일만 보고 작업한 뒤 정답 참고 없이 독립 변경을 수행할 수 있는지 확인

최종 승인 기록 (수동 입력)

테스트 학습자: ____________________　 시작일: __________　 완료일: __________

막힘 없이 완주: □ 예 □ 아니오　　 운영 회원 DB 검증: □ 통과 □ 보류

최종 판정: □ 승인(LOCK) □ 오류 교정 후 재시험 □ 운영 검증 보류

남은 결함 및 조치: _____________________________________________________________________

검수자: ____________________　검수일: ____________________