html, css, javascript가 뭐야?

 

먼저 홈페이지를 만든다고 하면

세 가지를 알아야 하는데요. 

 

HTML, CSS, Javascript가 있습니다.

 

요즘은 HTML, CSS도 필요 없고 Javacsript만으로 다 할 수는 있습니다. 

그럼에도 HTML과 CSS를 배워야 하는 이유는 기본기이기 때문이죠. 

기본기라고 해서 만만하게 보시는 분들도 있는데

생각보다 잘하는 게 쉽지는 않습니다. 

 

CSS가 조금 더 어렵습니다. HTML에 비해서요. 

이게 습관을 잘못 들이면 코딩을 이상하게  하기가 쉬워져요. 

처음부터 기본기를 잘 잡아서 해나가시는 게 좋구요. 

 

각각의 역할을 알아보자면,

HTML은 hyper text markup language인데요. 

쉽게 말하면 웹의 구조라고 보시면 됩니다. 

 

요즘은 웹 사이트를 문서로 보는 시각과

웹 사이트를 애플리케이션으로 보는 시각이 나뉘는데요. 

 

그런데 현재는 웹 사이트를 웹 애플리케이션으로 보고 있어요. 

하지만 웹 사이트 문서들도 존재해요. 

웹의 역사가 꽤 긴데요. 

그동안은 대부분 다 문서로서 기능을 했다면요. 

 

애플리케이션이 나온지는 15년 됐는데요. 

5년 전부터 애플리케이션이 뜨고 있는 거라서요. 

 

기존의 몇 십 년간은 웹 문서가 주요한 역할을 했구요. 

문서의 구조를 담당하는 게 html인 거죠. 

 

html이 프로그래밍 언어인가?

이걸 두고 개발자들 간의 논쟁도 있었어요. 

개인적인 입장에서는 html이 프로그래밍 언어는 아니라고 봐요. 

 

네이버 메인 홈페이지는 웹 문서라고 보시면 됩니다. 

웹의 구조에 컨텐츠가 들어 간게 html이거든요. 

CSS는 웹의 구조와 컨텐츠를 디자인 해주는 거라고 보시면 됩니다. 

 

웹의 구조와 컨첸츠를 열심히 코딩해서 입력을 하고 

디자인이 아무것도 없으면 보기가 안 좋으니까 

여기에 CSS를 붙여서 디자인을 입혀주게 되는 것이죠. 

 

우선 네이버 메인 화면을 보시면,

 

어떤게 html이고 어떤게 css인지 구별이 완되죠?

 

키보드에서 F12를 누르거나 ctrl+shift+i 혹은 화면에 마우스를 댄 상태에서 

오른쪽 커서를 누르고 '검사'를 클릭해 주세요. 

 

 

 

그러면 오른쪽에 개발자 도구가 나오는데요. 

 

 

개발자 도구는 웹 프로그래밍을 하시면

평생 함께 해야 합니다. 

 

 

'console'을 클릭해준 다음에 동그라미 안에 있는 작대기를 클릭해주면

화면이 깨끗해 집니다. 이전에 있던 글이 지워져요. 

 

document.head.parentNode.remveChild(document.head);

이걸 한 번 쳐 볼게요. 

 

 

방금 친 내용은 자바스크립트입니다. 

자바스크립트는 예전에는 웹의 동작이라고 했는데요. 

그런데 요즘에 이렇게 표현하는 게 맞아요. 

웹의 모든 것이라고 보면 쉽죠. 

 

더이상 동작만 하는 것이 아니라

컨텐츠도 자바스크립트가 넣고 

디자인도 자바스크립트로 할 수 있거든요. 

 

그래서 웹 프로그래밍을 하시려면

자바스크립트를 무조건 잘하셔야 합니다. 

 

대신 html과 css는 기본기라고 했죠?

document.head.parentNode.remveChild(document.head);

를 입력해 놓고 엔터를 치세요.

 

 

이렇게 하면 css가 사라집니다. 

디자인이 사라지면서 문서로 보이죠?

 

css를 제외한

즉 네이버에서 디자인을 제외하고

웹 구조를 볼 수 있는 화면입니다.