Browser rendering

하나의 UI는 구조, 표현, 동작 세 책임이 합쳐져 만들어진다

HTML은 의미와 순서, CSS는 표시 규칙, JavaScript는 사용자 행동에 대한 반응을 맡는다.

언어	책임	UI 예시	섞이면 생기는 문제
HTML	문서 구조와 의미	제목, 입력창, 버튼, 결과 목록	동작 때문에 의미 없는 div가 늘어남
CSS	간격, 색, 정렬, 반응형 표시	버튼 스타일, 목록 레이아웃	스크립트로 스타일을 직접 조작
JavaScript	이벤트와 상태 변경	클릭 후 목록 추가, 입력값 검증	구조와 표현까지 모두 JS에 몰림
Browser	세 결과를 합쳐 화면 렌더링	DOM, CSSOM, Event Loop	책임 경계가 흐려 디버깅 어려움

같은 버튼 하나라도 태그 선택은 HTML, 보이는 규칙은 CSS, 클릭 후 변경은 JavaScript 책임이다.