CWN(CHANGE WITH NEWS) - 프론트엔드의 핵심 3요소, HTML·CSS·JavaScript

웹 개발은 크게 프론트엔드(Front-end) 개발과 백엔드(Back-end) 개발로 나뉜다. 해당 요소의 개발에는 무수히 많은 언어가 있다. 프론트엔드와 백엔드의 차이에 따라 사용하는 언어도 나뉘게 된다.

그 중, 사용자가 웹 사이트 또는 웹 어플리케이션의 URL을 입력하거나 모바일 어플리케이션을 다운받을 때 마주하게 되는 모든 인터페이스를 '프론트엔드'라고 한다. 프론트엔드가 한눈에 알아보기 쉽고 이용하기 편리해야 많은 사용자들의 참여를 이끌어 낼 수 있어, 웹 개발에서 그 역할이 매우 중요하다. 그렇기 때문에 웹 시장에서 경쟁력을 갖추기 위해서는 매끄러우면서도 강력한 프론트엔드를 개발하는 것이 필수이다. 이때, 프론트엔드의 개발 요소가 바로 HTML, CSS, 자바스크립트이다.

■ HTML: 뼈대, 전체적인 구조를 설계하는 역할
HTML(Hypertext Markup Language)은 웹의 전체적인 구조를 만들어 낼 수 있는 역할을 한다. 프론트엔드에서 HTML이 중요한 이유는 웹 사이트의 기본적인 뼈대를 구축하는 역할이기 때문이다. 해당 구조를 설계를 해야만 추후 CSS와 자바스크립트를 사용해 추가, 보강할 수 있기 때문에 프론트엔드의 기본 토대를 쌓는 아주 중요한 과정이라고 할 수 있다.

■ CSS: 뼈대에 살을 붙이고, 꾸미는 역할
CSS(Cascade Styling Sheet)는 웹페이지의 디자인과 스타일을 정하는 과정이다. 레이아웃의 크기, 색깔, 모양 등을 포함한 모든 시각적인 효과를 담당한다. CSS는 HTML을 꾸며주는 역할로, HTML 파일 안에서 CSS를 사용할 수는 있으나, CSS 파일 안에서는 HTML을 사용할 수 없다.

■ 자바스크립트: 실제로 동작하게 하고, 반응하게 하는 '뇌'의 역할
자바스크립트는 웹사이트를 보다 동적이게 만드는 역할로, 보다 인터렉티브한 웹 서비스를 만들고 싶은 개발자들에게는 가장 중요한 프로그래밍 언어이다. 웹 서비스 사용시 특정 버튼을 클릭하면 새로운 메뉴들이 펼쳐지거나 사용자의 동작에 따라 반응하며 웹 구성요소의 동작을 변경시키는 등의 변화를 만들어 내는 것이 모두 자바스크립트를 통해야 가능한 일이다. 자바스크립트에 대한 내용을 이해한다면 더욱 더 다양한 범위의 작업을 수행할 수 있다.

이렇듯 프론트엔드는 백엔드 개발과 달리 실질적으로 우리 눈에 보이는 가시적인 영역을 담당하고 있기 때문에 자신이 작성한 코드를 바로 서버로 확인할 수 있다는 점에서 코딩 입문자의 흥미를 이끄는데 매우 효과적이다. 따라서 코딩에 처음 발을 들인 입문자라면 이 언어들을 시작으로 코딩의 세계에 입문하는 것을 추천한다.

[ⓒ CWN(CHANGE WITH NEWS). 무단전재-재배포 금지]