Structure
HTML이 제목, 문단, 링크, 폼처럼 문서의 의미를 세웁니다.
HTML CSS JavaScript 역할 분리
세 언어는 한 페이지를 나눠 맡습니다. HTML은 의미 구조, CSS는 표현, JavaScript는 상태 변화와 상호작용을 담당합니다.
Style
CSS가 색, 간격, 정렬, 반응형 규칙을 적용합니다.
Behavior
JavaScript가 이벤트와 데이터를 처리해 화면을 바꿉니다.
Browser
브라우저가 세 결과를 합쳐 접근 가능한 인터페이스로 렌더링합니다.
콘텐츠의 계층과 의미가 먼저 잡혀야 스타일과 스크립트가 안정됩니다.
같은 구조라도 배치, 색상, 폰트 규칙에 따라 사용성이 달라집니다.
사용자 입력, 비동기 응답, DOM 변경을 필요한 지점에만 연결합니다.
내용, 모양, 동작을 섞지 않으면 수정 범위와 디버깅 경로가 짧아집니다.
먼저 할 일
HTML만으로 읽히는 페이지를 만든 뒤 CSS와 JavaScript를 얹습니다.
점검 포인트
스타일이 없어도 의미가 남고, 스크립트가 실패해도 핵심 내용이 보여야 합니다.
HTML CSS JavaScript 역할 분리
버튼 하나를 만들 때 구조, 모양, 클릭 동작을 각각 어디에 둘지 구분합니다.