Browser Rendering

하나의 UI는 세 책임이 합쳐져 만들어진다

브라우저는 HTML로 화면의 의미 구조를 읽고, CSS로 보이는 규칙을 입히고, JavaScript로 사용자 행동에 반응하게 만듭니다.

HTML

HTML의 의미 구조 정의

제목, 입력창, 버튼, 결과 영역처럼 UI의 의미와 순서를 만든다.

CSS

표시 방식 결정

간격, 색, 정렬, 반응형 배치로 같은 구조를 사용하기 좋게 만든다.

JS

JavaScript의 이벤트 반응 연결

클릭, 입력, 데이터 변경을 감지해 화면의 상태를 바꾼다.

오늘의 할 일

입력한 내용을 목록에 추가하는 작은 웹 UI

추가
책임 구조 표현 동작

실무 감각: 같은 버튼 하나라도 태그 선택은 HTML, 버튼의 색과 간격은 CSS, 클릭 후 목록을 갱신하는 일은 JavaScript의 책임이다.