Editor
VS Code 같은 편집기에서 HTML, CSS, JS 파일을 작성합니다.
개발 환경 준비 흐름
웹 개발 환경은 편집기, 브라우저, 폴더 구조, 확장 도구가 같은 프로젝트를 바라보도록 맞추는 과정입니다.
Folder
프로젝트 폴더 안에 파일 역할과 경로를 일정하게 둡니다.
Browser
브라우저와 개발자 도구로 결과, 네트워크, 오류를 확인합니다.
Reload
저장 후 새로고침 또는 Live Server로 변경 결과를 반복 점검합니다.
index.html, css, js, assets 폴더를 분리하면 링크 경로 실수가 줄어듭니다.
Elements, Console, Network 탭으로 화면 문제와 코드 오류를 추적합니다.
자동 완성, 포맷팅, Live Server는 반복 작업을 줄이는 보조 도구입니다.
Chrome, Edge, Firefox 등에서 기본 동작과 레이아웃 차이를 확인합니다.
첫 점검
HTML 파일을 브라우저에서 열고 Console에 오류가 없는지 확인합니다.
경로 규칙
상대 경로 기준은 현재 파일 위치이므로 폴더 이동 후 링크를 다시 봅니다.
개발 환경 준비 흐름
저장, 새로고침, 오류 확인, 수정의 루틴을 혼자 반복할 수 있습니다.