웹은 HTML, CSS, JavaScript로 만들어진다. 처음에 웹이 등장할 때만 해도 HTML만 있었다. 웹은 정보를 담기 위한 목적으로 만들어졌기에, HTML 하나 만으로도 충분했다. 하지만 오늘날에 웹은 CSS와 JavaScript까지 세트처럼 당연하게 받아들이고 있다.
Contents
HTML, CSS, JavaScript
코딩을 처음 접할 때 가장 먼저 접하는 게 HTML이다. 그 다음으로 CSS, JavaScipt 순으로 배우게 된다.
집에 비유해 HTML, CSS, JavaScript 기능을 간단히 설명하면 다음과 같다.
- HTML - 집을 지을 때 뼈대를 의미한다. 이미 집의 문과 창문까지 모든 걸 다 지었다.
- CSS - 집을 지었는데 철과 목재 덩어리만 있다. 그래서 페인트를 칠 해 이쁘게 보이도록 디자인을 했다.
- JavaScript - 문과 창문이 있는데 움직이질 않는다. 그래서 베어링을 추가해 문이 열리고 닫히도록 했다.
최근의 HTML 스펙이 필요하다면 공식 문서를 참조하면 된다. 2022년 6월 17일에 업데이트 된 HTML 공식 스펙을 확인할 수 있다.
HTML / HTML5
HTML을 프로그래밍 언어라고 부르지 않는다. HTML은 문서를 작성할 때 표준이 되는 마크업 언어일 뿐이다. HyperText Markup Language의 약자인 HTML은 웹의 내용과 구조를 태그를 통해 형상화한다.
마크업(Markup)은 명령어인 태그(tag)를 시작 <>과 </>으로 표현한 요소(element)들을 이용해서 웹 문서를 작성하는 것을 지칭한다.
HTML5는 기존 HTML의 <div> 태그를 대체할 수 있는 시멘틱 태그를 추가했다. 시멘틱 태그는 <div>와 동일하게 컨테이너 역할을 할 뿐이지만, 시멘틱 태그 명칭만으로도 어떤 의도로 사용했는 지 의미를 명확히 제시한다. 또한 멀티미디어, SVG 등 멀티미디어 및 그래픽을 지원하고, 그 동안 단방향 통신에 머물던 통신 기능을 서버와 양방향 통신이 가능할 수 있는 소켓 통신을 지원한다. 특히 CSS3를 지원함으로써 반응형웹이 등장할 수 있는 토대가 됐다.
HTML5에서 새롭게 추가된 시맨틱 태그로는 헤더를 의미하는 <header>, 내비게이션을 의미하는 <nav>, 본문의 영역을 의미하는 <section>, 본문 안의 개별 컨텐츠 영역을 의미하는 <article>, 푸터를 의미하는 <footer>, 사이드 영역을 의미하는 <aside> 등이 있다. 이러한 시맨틱 태그가 등장하기 전에는 이 모든 의미를 담당하는 태그는 <div> 뿐이었다.
반응형웹의 등장
오늘날 웹은 단순하지 않다. 그 이유는 웹을 보여주는 플랫폼이 너무 다양하기 때문이다. 컴퓨터 모니터로 충분했던 HTML 시대가 아니라 이제는 태블릿, 모바일 그것도 크기가 다양한 모바일에 구조를 잡아주어야 하기 때문이다.
그래서 진화를 거듭하다가 현재 HTML5가 되었고, 이를 기반으로 웹을 담는 플랫폼이 무엇이든지 상관없이 동일한 모습을 보여주는 반응형 웹 구현이 가능해졌다.
반응형웹은 웹페이지의 UI가 디바이스 화면 크기에 맞게 유동적으로 반응하는 것을 의미한다.
HTML은 진화를 거듭해 현재는 HTML5까지 왔고, HTML5는 구조 설계에 머물지 않고 디자인을 담당하던 CSS의 영역까지 욕심을 내고 있다. 디자인을 담당하던 CSS도 CSS3까지 진화하면서 동적 움직움을 담당하던 JavaScript 영역까지 욕심을 내고 있고, 동적 요소를 책임지던 JavaScript는 프론트영역을 넘어 백엔드영역까지 진출하고 있다.
