웹 개발과 HTML & CSS & JavaScript

이미지 출처: https://dribbble.com/search/html?color=d4f49c

HTML (HyperText Markup Language)

웹페이지의 구조(Structure)를 담당하는 마크업 언어 입니다.

글자 그대로, HTML은 프로그래밍 언어가 아닙니다. 그러나 HTML은 웹 페이지를 구성하는 틀, 뼈대가 되는 언어입니다.

HTML의 구조를 잘 짜놓으면, 자바스크립트로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있습니다.

의미있는(Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발할 수 있습니다.

CSS (Cascading Style Sheets)

디자인 요소를 시각화하는 스타일(Presentation) 시트 언어 입니다.

HTML과 같은 마크업 언어가 표현되는 방법을 결정하며, 구조의 외부와 내부를 꾸미는 역할을 담당합니다.

JavaScript

단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용(Interaction) 할 수 있게 해주는 프로그래밍 언어 입니다.

 

이미지 출처: https://codepen.io/dkennedy/pen/VLzaPY

웹 개발은 집을 만드는 것에 비유할 수 있습니다.

 

집의 구조는 웹 개발에서 HTML 문서를 작성하는 것과 같습니다.

집 구조를 하나의 문서로 본다면, 여기가 도면이고, 여기가 문이다 명확하게 표시를 해주어야 합니다.

이것을 HTML 문서로 바꾼다면 컴퓨터가 이해할 수 있게 클래스로 명시해야 합니다. 그래야 나중에 CSS를 적용할 수도 있습니다.

 

벽면의 색과 재질에 대한 정보를 간단히 적어두는 것은 CSS를 작성하는 것과 같습니다.

CSS로 표현한다면, HTML 문서의 벽면 클래스를 찾아서 벽면 색과 재질에 대한 정보를 간단하게 적어두면 됩니다.

 

알전구를 설치하고 밤이 되면 켜지게하는 알고리즘을 작성하는 것은 자바스크립트 코드를 작성하는 것과 같습니다.

 

실제 웹 개발과정도 이와 비슷합니다.

 

기획자가 대강의 와이어프레임을 그리고 이를 HTML로 먼저 작성합니다.

이후 디자이너가 만든 디자인을 웹페이지에 구현하기 위해 CSS를 작성하고, 

기능 구현을 위해 자바스크립트를 작성합니다.