MDN HTML 입문, 코딩 경험이 없어도 어디부터 시작하면 될까

HTML을 몰라도 시작할 수 있지만 파일 준비는 구분합니다

MDN의 Structuring content with HTML은 이전 HTML 지식을 요구하지 않습니다. 다만 기본적인 컴퓨터·웹 이용, 작업 환경 준비, 파일 생성·관리에는 익숙할 것을 안내합니다. 편집기 설치부터 낯설다면 사전지식을 요구하지 않는 Getting started에서 필요한 항목을 먼저 볼 수 있습니다. 이 구분은 공식 경로의 전제조건을 읽은 것이며 모든 사람에게 똑같은 학습 시간을 약속하는 기준은 아닙니다. 공식 안내 확인일은 2026-11-04입니다.

내 시작점을 정하는 작은 진단 과제를 해 봅니다

다음은 배움결이 제안하는 자기 점검이며 MDN의 공식 합격시험이 아닙니다. 빈 폴더를 하나 만들고 편집기에서 index.html이라는 파일을 저장한 뒤 같은 파일을 다시 열어 보세요. 어느 폴더에 저장했는지 설명할 수 없거나 확장자를 바꾸지 못한다면 파일 관리 단원부터 보완합니다. 이 과제가 가능하다면 제목과 문단을 작성하는 HTML 기초로 진행합니다. 인터넷에 공개 배포하는 일까지 시작 조건에 넣지는 않습니다.

설치가 막히면 학습 내용과 환경 문제를 나눕니다

파일 생성이 제한된 기기를 쓰는 경우 MDN은 온라인 편집기를 시도할 수 있다고 안내합니다. 다만 온라인 편집기가 소스의 일부 구조를 대신 관리할 수 있으므로 무엇을 직접 썼는지 구분해 적습니다. 학교·회사 기기에서 프로그램 설치 권한이 없다면 임의로 보안 설정을 해제하지 말고 허용된 도구를 확인합니다. 도구 화면을 사용할 수 있게 된 것과 HTML 구조를 이해한 것을 같은 진도로 세지 않습니다.

첫 문서는 기능보다 구조를 확인하는 과제로 정합니다

가상의 동아리 안내문을 만든다고 정해 보세요. 모임 이름은 제목, 소개는 문단, 준비물은 목록, 공식 안내는 링크로 표현하는 과제입니다. 색과 애니메이션은 이번 과제의 완료 조건에서 빼고 어떤 내용에 어떤 구조가 맞는지 설명합니다. 이 과제는 작성자가 만든 연습안이며 MDN 공식 과제를 복제한 것이 아닙니다. 실제 링크를 넣을 때는 연결할 원문을 확인하고 비밀번호나 개인 연락처를 연습 문서에 넣지 않습니다.

완료는 강의를 본 시간이 아니라 재현으로 확인합니다

편집기의 내용이 저장되어 있고 브라우저에서 의도한 문서가 열리는지 봅니다. 그런 다음 예제 화면을 닫고 제목이나 준비물 하나를 바꿔 다시 표시해 보세요. 어떤 태그가 어떤 역할을 하는지 말할 수 있고 수정 위치를 찾을 수 있으면 다음 단원으로 갈 근거가 됩니다. 화면이 비슷하다는 이유만으로 구조가 맞다고 판단하지 말고 단원의 연습·평가 안내와도 대조합니다. 여기서는 실제 학습자의 과제를 실행·평가하지 않았습니다.

막혔을 때 돌아갈 단원을 증상으로 정합니다

파일 자체를 못 찾으면 저장 위치와 확장자, 화면이 갱신되지 않으면 저장 여부와 열어 둔 파일을 먼저 확인합니다. 링크가 다르면 목적지 주소와 상대 경로를 살피고, 요소 구조를 설명하지 못하면 해당 HTML 단원으로 돌아갑니다. 해결 기록에는 관찰한 화면, 시도한 변경, 결과를 적어 질문할 자료로 만듭니다. 계속 막힌다는 이유만으로 곧바로 유료 과정이 필요하다고 결론 내리지 말고 부족한 것이 환경 안내인지 개념 설명인지 피드백인지 나눠 선택합니다.

기준을 맞춰 본 비교표

직접 세어 볼 항목

• 컴퓨터에서 폴더와 파일을 직접 만들 수 있는지 확인
• 모르는 전제는 Getting started의 해당 항목으로 돌아가기
• HTML 과제의 구조를 바꿔 재현하고 오류 기록 남기기

3개 중 0개 확인 · 체크 상태는 페이지를 떠나면 초기화됩니다.

근거 자료와 확인 주소

아래는 기관 정보를 직접 확인할 수 있는 공식 경로입니다. 각 과정과 종목의 상세 공지를 확인하세요. 본문의 선택 기준과 예시는 배움결이 작성했습니다.

• MDN Getting started modules ↗
• MDN Structuring content with HTML ↗