웹 사이트는 텍스트일 뿐이다.

이 글은 노마드코더의 코코아톡 클론코딩 강의를 들으며 작성한 내용입니다. 

웹 사이트는 텍스트로 구성된 문서이다. 

보통 우리가 웹 사이트를 만든다고 하면 굉장한 무언가를 생각하기 쉽다. 하지만 노마드 코더는 말한다. 웹 사이트는 그저 텍스트로 구성된 문서일 뿐이라고. 그래서 그 문서를 출력해서 보게 되면 그저 알아보기 어려운 문서일 뿐이라고. 하지만 그 문서를 받아들여 해석하고 우리가 봐왔던 웹 사이트의 모습으로 만들어주는 것이 바로 웹 브라우저이다. 

 

필요한 텍스트는 단 3종류 뿐

그럼 웹 사이트를 구성하는 텍스트는 어떻게 구성이 되어 있을까? 지금부터 텍스트는 언어로 표현을 한다. 우선 가장 중요한  첫 번째 언어는 HTML이다. 이 언어는 배우는 데 30분도 안걸린다 생각될 정도로 쉽다. 솔직히 언어라고 잘 표편하지도 않는다. 두 번째 언어는 CSS이다. CSS를 배우는 데도 30분 정도가 소요된다. 하지만 CSS 부터는 연습의 영역으로 많은 연습을 할 수록 더욱 잘 활용할 수 있다. 마지막 언어는 Javascript이다. 

 

Content를 만드는 HTML

HTML을 이용해서는 우리가 보는 웹 사이트의 content들을 만들어 낸다. content에는 title, link, image, image 설명, 날짜, text 등이 있다. 브라우저는 인간이 사용하는 언어를 이해하지 못한다. 그래서 우리가 보는 웹 사이트를 그대로 이해하지 못한다. 때문에 인간이 해야할 일은 브라우저에게 content가 무엇인지 알려주는 것이다. 마치 "브라우저야~ 이건 image이고, 그 image에는 설명이 달려있어. 이건 title이고 이건 날짜야."라고 설명해주는 것과 같다. 이렇게 브라우저에게 content 구조를 설명해주는 데 사용되는 유일한 것이 바로 HTML이다. 따라서 HTML은 웹사이트의 뼈대가 된다. 이렇게 HTML로 만들어진 웹사이트는 CSS 없이는 굉장히 정적인 상태로 아름답지 않은 모습이다. 

 

Content를 꾸미는 CSS

CSS는 HTML과 함께 사용하며 브라우저에게 HTML로 설명하는 content가 어떻게 보여야 하는지에 대해 알려주는 데 사용한다. HTML이 "브라우저야 이건 title 이야" 라고 말한다면 CSS는 "브라우저야 그 title은 녹색이야" 라고 말하는 방식이다. 다른 예시로 HTML이 "브라우저야 이건 image야" 라고 할  때 CSS는 "브라우저야 그 image는 가로 25px 세로 200px 이야" 라고 설명해주는 것이다. CSS는 HTML로 만들어진 뼈대에 근육을 붙이는 것이다. CSS를 통해서 HTML로 만들어진 웹사이트가 좀 더 아름다운 모습으로 변하게 된다. HTML 없이는 CSS를 사용할 수 없고 CSS 없이는 HTML은 굉장히 멋없어 보일 것이다. 따라서 HTML과 CSS는 반드시 함께해야 한다. 

 

웹 사이트를 동적으로 만드는 Javascript

모든 웹사이트가 상호작용을 하진 않는다. 때문에 그런 형태의 웹 사이트에선 필요하지 않지만 버튼을 눌렀을 때 어떤 곳으로 이동을 한다거나 무언가가 출력된다거나 하는 상황이 필요한 경우에는 웹 사이트의 뇌 역할을 하는 Javascript가 필요하다. 따라서 HTML과 CSS만으로도 웹사이트를 충분히 만들 수 있다. 하지만 상호 작용하는 동작이 필요한 웹사이트에서는 Javascript가 필요하다. HTML, CSS, Javascript 중 Javascript만이 유일하게 프로그래밍 언어이다.