Web 과 HTML, CSS, JavaScript 3대장

웹의 세계는 빠르게 변하고 있습니다.

Java, PHP, Ruby on Rails 등 정말 다양한 언어로 웹을 만들 수 있지만

결국 이들의 최종 목적지는 HTML, CSS, JavaScript 임을 기억해야 합니다.

다양한 언어들을 사용하면, 위 3가지 결과물들을 빠르고 정교하게 만들 수 있을 뿐이죠.

HTML, CSS, JavaScript 를 간단한 그림으로 표현하면 다음과 같습니다

HTML 은 웹사이트 콘텐츠들의 골격을 형성하는 뼈대 역할을 하고,

CSS는 그 위에 살과 옷가지들의 스타일링을 통해 그래픽적인 요소를 웹사이트에 더해 줍니다.

JavaScript는 여기에 근육을 더해, 웹사이트가 움직이거나, 사용자의 입력에 반응하도록 인터렉션을 만들어 줍니다

(* CSS로도 애니메이션을 만들 수는 있지만, 동적인 요소를 좀 더 집중적으로 관장하기 위해서는 JavaScript 가 필수 적입니다)

Modern HTML / CSS Basics

웹 기술은 HTML, CSS, JavaScript 를 바탕으로

결국 사람들이 원하는 내용들 표현하는 걸 도와주는 데에 초점이 맞추어져 있다고 할 수 있습니다.

하지만 몇 년 전까지 HTML, CSS는 기존에 사용되는 그래픽 툴에 비해 사용성이 무척이나 떨어졌습니다.

특히 CSS는 직관적이지 않고 중의적일 수 있는 몇몇 Property 들의 이름과 너무 다양한 Property 들을 제공함으로써, 웹사이트의 그래픽을 만드는 데 있어 개발자들을 난감한 상황에 빠뜨리기 일 수였습니다.

위 그림처럼 CSS를 처음 접한 개발자들은, 자신이 표현하고 싶은 그래픽을 아무리 해도 제대로 표현하기 힘든 경우가 많았습니다.

하지만 CSS에 flex와 grid property들이 등장하면서 상황은 달라졌습니다

3 ~ 4가지의 CSS Property를 규칙대로 조합해야만 했던 어려웠던 정렬과 배치 기법들을

flex를 사용하면 한 줄에 해결할 수 있게 되었죠.

또한 화면에 그리드를 간격(gutter)과 함께 정확하게 잡기 위해선 때론 복잡한 수치계산이 필요했었습니다.

하지만 grid를 사용하면 1~2 줄에 브라우저가 계산해주는 정확한 grid를 얻을 수 있게 되었습니다.

Modern HTML and CSS Basics에서는 이제야 쓸만해진 CSS Property 들을 배워봅니다.

처음 HTML, CSS를 접하는 분들에게도, 앞으로 이 코스는 웹을 만들어 나가시는 데에 있어 명확하고 강력한 기준이 될 것이라고 확신합니다.