HTML CSS JS

웹 3요소 역할 분리

HTML은 구조, CSS는 표현, JavaScript는 동작을 맡습니다. 세 역할을 섞지 않고 나누어 읽으면 첫 웹 페이지의 책임 경계가 선명해집니다.

HTML문서 뼈대와 의미
CSS배치와 시각 스타일
JavaScript상태와 상호작용
Browser세 요소를 합쳐 화면화
01

HTML

제목, 문단, 목록, 링크처럼 콘텐츠의 의미와 계층을 만듭니다.

02

CSS

색, 여백, 크기, 배치 규칙으로 같은 HTML을 다르게 보이게 합니다.

03

JavaScript

클릭, 입력, 데이터 변경처럼 사용자의 행동에 반응합니다.

04

분리 기준

내용을 바꾸는 일인지, 모양을 바꾸는 일인지, 행동을 바꾸는 일인지 나눕니다.

처음 작성할 때

  • HTML 태그는 보이는 모양보다 의미에 맞춰 고릅니다.
  • CSS는 공통 규칙과 예외 규칙을 분리해 점점 정리합니다.
  • JavaScript는 작은 이벤트 하나부터 연결해 동작을 확인합니다.

파일 감각

.html콘텐츠
.css스타일
.js동작
DevTools확인