HTML, CSS, JavaScript

브라우저 안의 frontend는 정확히 세 가지 언어로 만들어집니다. 손으로 직접 쓸 필요는 없지만, 각각이 무엇을 담당하는지는 알아야 합니다.

HTML은 구조입니다 — 내용과 그 뼈대죠. "여기 제목이 있다, 여기 문단이 있다, 여기 버튼이 있다"라고 말합니다. 페이지의 명사인 셈입니다. HTML만 있으면 꾸밈없는 밋밋한 문서, 라벨이 붙은 텍스트 파일 같은 모습입니다. 브라우저는 여러분의 HTML을 DOM(Document Object Model, 문서 객체 모델)이라 불리는, 메모리 안에 살아있는 객체 트리로 바꿉니다. 코드가 "페이지를 바꾼다"고 할 때, 실제로는 DOM을 바꾸는 것이고, 브라우저는 거기에 맞춰 다시 그립니다.

CSS는 스타일입니다 — 모든 것이 어떻게 보이는가죠. 색깔, 글꼴, 간격, 배치, 왼쪽이냐 가운데냐, 작은 화면이냐 큰 화면이냐. CSS는 페이지에 무엇이 있는지를 바꾸지 않고, 그것이 어떻게 보여지는지만 바꿉니다. HTML이 명사라면, CSS는 형용사입니다.

JavaScript(JS)는 동작입니다 — 여러분이 상호작용할 때 무슨 일이 일어나는가죠. 클릭에 귀 기울이고, 데이터를 backend로 보내고, 스피너를 보여주고, 응답이 돌아오면 DOM을 업데이트합니다. HTML과 CSS는 정적입니다. JavaScript가 페이지로 하여금 무언가를 하게 만듭니다. 동사인 셈이죠. (같은 언어가 흔히 backend도 돌리는데, 그래서 이 언어를 어디서나 보게 됩니다.)