HTML - 1 [브라우저, 웹사이트(HTML, CSS, JavaScript)]

우리는 브라우저라는 도구를 쓴다. 웹사이트 들을 돌아다니는 도구로써 사용하지만

웹사이트를 만들게 되는 개발자에 입장에서 살펴보면 사실 웹사이트를 만드는 것이 아니다.

그저  text를 적는 것일 뿐. 예를 들어보자

 

유투브 뮤직 웹사이트 이다. 이것을 직접 만드는 것이 아니라. 이 웹사이트의 소스를 살펴보면

이와 같이 매우 복잡한 웹사이트의 코드를 볼수 있다. 이러한 Text를 개발자들은 만든다.

이러한 웹사이트의 text를 웹브라우저에게 주게 되면 우리가 보는 웹사이트로 만들어주는 것이다.

 

어느 장소에 어떠한 Text를 적는가 

이규칙만 잘 지켜서 웹브라우저에 text를 넘겨준다면 웹사이트를 만들어주는 것이다.

 

즉, 웹사이트는 text일 뿐이다.

 

웹사이트는 최소 2가지에서 3가지 언어로 구성되어 있다.

1. HTML

2. CSS

3. javascript

오직 이 3가지 언어로만 이루어져 있다.

 

 

HTML (HyperText Markup Language)

웹사이트는 다양한 내용으로 구성되어 있다. 큰 제목, 이미지, 이미지에 대한 설명

링크들, 사이드바, 헤더.. 이러한 내용들을 브라우저는 이해하지 못한다.

웹사이트는 다양한 내용들로 구성되어 있다.

 

이해하지 못하는 브라우저를 위해서 개발자들은 브라우저에게 저러한 내용들을

알려주어야한다. 그때 써야하는 언어가 HTML이다. 

HTML은 어떤 내용이 헤더인지, 어떤 이미지가 어디에 있어야 하는지등 웹브라우저가 이해할 수 있도록

알려주는 언어이다.

즉, HTML은 웹사이트의 내용이 무엇인지에 대하여 웹사이트에게 알려주는 것이다.

 

CSS(Cascading Style Sheet)

CSS는 웹사이트가 어떻게 보여야 하는지 이야기하는 언어이다.

HTML이 웹사이트의 뼈대라면 CSS는 뼈대에 붙은 근육이라는 비유가 적절하겠다.

HTML과 CSS

HTML이 내용을 설명한다면 CSS는 그 내용의 이미지가 얼만큼의 크기로 보여줘야 하는지,

title이 어떤 크기로 보여야하는지 어떤 폰트로 보여야 하는지, Link들은 어떤 색깔로 보여줘야하는지

등의 기능이 있다. 따라서 HTML과 CSS는 같이 쓰인다.

 

웹사이트에서 CSS가 없고 HTML만 있는경우를 보면 쉽게 알수 있다.

일반적인 넷플릭스 사이트이다. 여기서 CSS를 없앤다면

 

 

위 링크들을 몇개만 지우면 

위와 같이 아주 옛날 인터넷 초기에나 보이던 사이트의 모습이 나오게된다.

위 모습들이 바로 HTML언어로 이루어진 content이다. 웹사이트의 뼈대 인 것이다.

 

JavaScript

웹사이트를 똑똑하게 움직이는 형식으로 동적으로 만들어주는 언어이다. 

어딘가를 클릭하면 뭔가 나타거나 어떠한 동작을 만들어주는 언어이다.

위 3가지 언어 중에서 유일하게 프로그래밍 언어이다.

 

HTML과 CSS는 프로그래밍 언어가 아니고, content와 디자인을 위한 것이고

javascript 만 웹프로그래밍을 위한 언어이다.

 

HTML이 뼈, content가 근육을 의미한다면 javascript는 뇌에 해당한다.