MDN JavaScript 입문 전에 HTML·CSS를 얼마나 알아야 할까
MDN 공식 전제조건과 별도로 수행할 수 있는 기초 점검 과제, 막혔을 때의 복귀 경로를 정리합니다.
MDN JavaScript 핵심 모듈은 이전 JavaScript 경험은 요구하지 않지만 HTML과 CSS 기본을 알고 앞선 학습 모듈을 진행했을 것을 안내합니다. HTML·CSS 전체를 완벽하게 끝내야 한다는 뜻으로 확대하지 말고 기초 과제를 직접 바꿔 설명할 수 있는지 확인하세요.
JavaScript는 처음이어도 HTML·CSS 기본은 전제입니다
MDN의 Dynamic scripting with JavaScript는 이전 JavaScript 지식이 없어도 시작할 수 있다고 설명합니다. 동시에 앞선 모듈을 학습하고 최소한 HTML과 CSS 기본을 알 것을 안내합니다. 따라서 JavaScript를 한 줄도 모르니 들어갈 수 없다는 판단과, 웹문서 구조를 전혀 몰라도 같은 속도로 따라갈 수 있다는 기대를 모두 피합니다. 공식 전제조건 확인일은 2026-11-04입니다. 아래 자기점검은 작성자의 학습 준비안이며 공식 입학 평가나 보장된 수준 기준은 아닙니다.
선수학습은 작은 화면을 설명하는 과제로 확인합니다
버튼 하나와 설명 문단 하나가 있는 연습 페이지를 떠올려 보세요. HTML에서 버튼과 문단이 어느 요소인지 찾고, CSS에서 글자색이나 간격을 정한 선언을 찾아 값을 바꿉니다. 저장 뒤 화면이 어떻게 달라졌는지 설명할 수 있는지 봅니다. 이 단계에서 JavaScript 이벤트 코드를 미리 작성할 필요는 없습니다. 목표는 이후 스크립트가 무엇을 대상으로 동작하는지 이해할 기반이 있는지 확인하는 것입니다.
HTML·CSS 전부를 끝낼 때까지 기다릴 필요는 없습니다
공식 전제는 HTML과 기본 CSS이지 모든 레이아웃 기술과 모든 속성을 암기했다는 요구가 아닙니다. 학습 중 필요한 스타일을 문서에서 찾아 적용하는 것과 기초 개념 없이 코드만 붙이는 것을 구분합니다. 어떤 요소인지도 찾기 어렵다면 HTML로 돌아가고, 선택자가 무엇을 고르는지 모르면 CSS 기초를 먼저 보완합니다. 이미 가능한 부분까지 처음부터 반복해 시간표를 채우기보다 설명하지 못한 부분을 표시합니다.
처음에는 단원별 작은 결과로 진도를 정합니다
MDN의 모듈은 기초 언어와 주변 핵심 주제를 다룹니다. 실제 학습에서는 현재 단원의 예제를 직접 입력하고 변수나 표시 문구 같은 조건을 하나 바꿔 결과를 관찰하는 계획을 세울 수 있습니다. 예제를 그대로 재생한 횟수와 스스로 바꾼 결과를 구분해 기록합니다. 배우지 않은 여러 API를 한꺼번에 결합하는 큰 프로젝트는 원인 찾기를 어렵게 할 수 있으므로 현재 확인하려는 개념을 먼저 정합니다.
안 되면 문법·대상 요소·실행 경로로 나눠 확인합니다
오류 문구가 있으면 원문과 발생 위치를 남기고, 바꾼 파일이 저장되었는지와 브라우저에서 같은 파일을 열었는지 확인합니다. 버튼을 눌러도 반응이 없다면 클릭 이벤트 개념 자체가 어려운지, 대상 요소를 잘못 찾은 것인지 구분해 질문합니다. 오류를 지우기 위해 이해하지 못한 코드를 계속 붙이지 말고 마지막으로 동작했던 작은 예제로 돌아갑니다. 설치가 제한된 기기에는 공식 안내의 온라인 편집기 대안을 검토할 수 있습니다.
다음 학습으로 갈 때 남길 증거를 정합니다
결과 화면 하나와 수정 전후 코드 차이, 바꾼 이유, 남은 질문을 함께 적습니다. 새로운 요구를 보고 같은 개념을 다른 이름이나 값으로 적용할 수 있는지 확인하면 단순 복사를 구분하는 데 도움이 됩니다. 이 기록이 곧 취업 가능성이나 부트캠프 합격을 증명하는 것은 아닙니다. 유료 과정의 선수 수준을 판단할 때는 해당 과정이 실제로 요구하는 사전 과제와도 별도로 대조해야 합니다. 여기서는 코드를 실행하거나 학습 성과를 측정하지 않았습니다.
같은 기준으로 나란히 두기
| 막힌 내용 | 먼저 확인할 범위 | 다음 행동 |
|---|---|---|
| 요소와 속성 의미 | HTML 구조 | 대상 요소를 찾고 이름 붙이기 |
| 스타일이 왜 적용되는지 | CSS 기본 | 선택자와 선언 대조 |
| 변수·조건 자체 | JavaScript 기초 | 해당 단원 예제부터 재현 |
| 저장한 코드가 실행되지 않음 | 파일·실행환경 | 대상 파일과 오류 메시지 확인 |
선택을 확정하기 전 점검
3개 중 0개 확인 · 체크 상태는 페이지를 떠나면 초기화됩니다.
비용과 시간을 숫자로 정리하면 비교가 쉬워집니다.
배움 도구 사용하기 →공식 확인 경로
아래는 기관 정보를 직접 확인할 수 있는 공식 경로입니다. 각 과정과 종목의 상세 공지를 확인하세요. 본문의 선택 기준과 예시는 배움결이 작성했습니다.