웹디자인(웹퍼블리싱) 분야에 관심이 생겨 이것저것 검색하다 보면

아마 HTML, CSS, 자바스크립트(Javascript) 등과 같은 프로그래밍 언어들을 먼저 접하게 되실 텐데요.

이런 언어들이 있다는 것을 알고 나면 이것들의 차이점은 무엇인가, 다 배워야하는 건가 등의 의문점이 드실 거예요.

그리하여 그린컴이 준비해보았습니다!

웹을 구축하고 있는 HTML, CSS, 자바스크립트의 차이점! 같이 알아보도록 해요~

HTML

HTML(HyperText Markup Language)은 웹 페이지 제작을 위한 가장 기본적인 마크업 언어인데요.

*마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

제목, 단락, 목록 등 웹페이지의 내용과 구조를 구축하는 역할을 하고 있습니다.

집 또는 사람으로 비유하자면 골격, 뼈에 해당하는 것이죠.

네이버 웹페이지에서는 위 이미지에 해당하는 부분을 말할 수 있는데요.

앞서 말했듯이 웹페이지를 구성하는 내용이 표현되고 있는 것을 확인할 수 있죠.

HTML은 이처럼 웹의 기반이 되는 틀 작업을 위해 사용된다고 보면 되겠습니다.

CSS(Cascading Style Sheets)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어인데요.

위와 같이 HTML로 구축해놓은 구조에 꾸밈 작업을 통해, 사용자가 보기 좋은 화면을 만들어주는 역할을 하고 있습니다.

즉 색상, 글꼴, 크기, 레이아웃 등 시각적인 디자인을 위해 사용되는 것이죠.

집을 인테리어하고/ 사람은 옷을 입고, 머리를 만지고, 화장을 하는 등의 꾸미는 것이라고 보시면 됩니다.

구조를 구성하고 있는 HTML에 CSS를 넣어주면 위와 같이 우리가 흔히 보는 네이버 웹페이지 화면을 마주할 수 있습니다.

이렇게 HTML과 CSS를 통해 제작된 웹페이지는 멈춰진 화면, 정적인 화면에 불과합니다.

이걸 가지고 웹사이트가 완성되었다고 하기에는 좀 부족하죠.

골격을 바탕으로 형태를 만들어놓고, 옷 입히고 꾸며놨다고 해서 사람이라고 하기에는 어색한 것과 같은 맥락입니다.

진정으로 사람다워지려면 움직임과 같이 동적인 면이 있어야되는 것과 같이

웹사이트도 사용자가 어떤 명령을 내렸을때 그에 맞는 반응이 있어야 합니다.

그 동작을 추가해주는 역할을 객체 지향 스크립트 언어인 자바스크립트(JavaScript)가 담당하고 있습니다.

더보기를 누르면 안보이던 메뉴가 보이고, 화살표를 누르면 정해진 페이지로 넘어가고,

화면이 옆으로 넘어가는 등의 동적인 작업을 가능하게 해주는 것입니다.

이렇게 웹디자인에 사용되는 세 언어에 대해서 알아보았는데요.

이제 쉽게 구분을 하실 수 있겠죠?

물론 이외에도 웹사이트를 구축하는데 사용되는 언어는 매우 다양합니다.

하지만 HTML, CSS, 자바스크립트만으로도 웹디자인의 기초를 이해하고 제작을 하는 것까지 충분히 가능합니다.

기본 그 자체라고 말씀드리면 더 이해가 쉬우시겠죠?

기본기를 단단하게 쌓아두어야 앞으로의 역량을 확장시킬 수 있는 가능성이 높아지니

웹디자이너를 꿈꾼다면 일단 HTML, CSS, 자바스크립트부터 시작하시는 것을 추천드립니다.

그린컴퓨터아트학원에서는 여러분들을 위한, 전문적이면서도 재미있게 배울 수 있는 웹디자인/프론트엔드 과정을 운영 중이니,

멋진 웹디자이너를 꿈꾸신다면 도전해보시길 바라겠습니다!

그린컴은 여러분의 꿈을 응원합니다 :)