HTML
제목, 문단, 버튼처럼 화면의 의미 단위를 먼저 작성합니다.
첫 웹 페이지 제작 순서
첫 페이지는 구조를 만들고, 스타일을 연결하고, 작은 상호작용을 붙인 뒤 브라우저에서 확인하는 순서로 완성합니다.
CSS
외부 스타일 시트를 연결해 색, 간격, 레이아웃을 조정합니다.
JS
버튼 클릭 같은 이벤트에 필요한 동작만 연결합니다.
검토
브라우저에서 표시, 콘솔 오류, 파일 경로를 함께 확인합니다.
doctype, html, head, body를 갖춘 뒤 본문 콘텐츠를 채웁니다.
link 태그의 href 경로가 실제 CSS 파일 위치와 맞는지 확인합니다.
script 파일은 DOM이 준비된 뒤 실행되도록 위치와 선택자를 점검합니다.
한 번에 크게 바꾸지 말고 저장 단위마다 화면 변화를 비교합니다.
실습 순서
내용이 보이는 HTML을 먼저 완성하고 CSS와 JavaScript를 순서대로 추가합니다.
오류 추적
화면이 비어 있으면 파일 경로, 태그 닫힘, 콘솔 오류를 차례로 봅니다.
첫 웹 페이지 제작 순서
세 파일의 연결 관계를 설명하고 버튼 클릭에 맞춘 DOM 변경을 구현합니다.