HTML, CSS JavaScript의 역할은 무엇인가?

웹 개발

웹 개발이란 간단하게 생각하면 웹 사이트를 만드는 것이라고 생각할 수 있다. 하지만 직접 개발을 해보면 간단하게 개발할 수 없다(ㅠㅠ). 물론 포트폴리오 사이트나 홍보 사이트처럼 정보만 전달하는 웹 사이트는 비교적 간단할 수 있다. 이런 것을 정적 웹 사이트라고 한다.

 하지만 웹 사이트는 눈으로 확인 가능한 부분만 개발하는 것은 아니다. 회원을 관리해야 하거나 글을 작성해야 하거나 작성된 글에 공감을 표시하거나 쇼핑몰처럼 어떤 상품을 보고 결제하는 것 등 다양한 서비스들을 제공해야 할 수도 있다. 이러한 어떤 기능들이 있는 웹 사이트를 동적 웹 사이트라고 한다.

 

 웹은 사용자에게 보여지는 것 뿐만 아니라 사용자가 이용할 수 있는 기능과 서비스 모두를 담을 수 있어야 한다.

 

프론트 엔드

 앞서 말한 사용자에게 어떤 것을 보여주는 부분, 사용자가 볼 수 있는 영역을 개발하는 것을 프론트 엔드 개발이라고 한다. 웹 사이트를 디자인 하거나 사용자 동작에 반응하는 기능들을 개발할 수 있다. 이때 사용되는 것이 HTML, CSS, JavaScript이다.

 

백엔드

 백엔드 개발은 사용자가 볼 수 없는 부분 회원 정보나 게시판의 글 등은 서버에 저장되는데 이러한 데이터들을 처리하는 것이 백엔드 개발이다. 이때 사용되는 것이 Java, 파이썬, PHP 등이 있다.

 

웹 개발의 기본 HTML, CSS, JavaScript

웹의 뼈대를 만드는 HTML

 먼저 HTML이 프로그래밍 언어는 아니다. HTML은 Hypertext Markup Language, 하이퍼텍스트 마크업 언어이다. HTML은 요소들로 구성되어 있고 해당 요소는 태그를 사용하여 작성할 수 있다. 제목, 본문, 이미지 표 등 웹 요소들이 있다.

 

웹 문서를 꾸며주는 CSS

 CSS를 사용하지 않고 HTML로만 작성한 웹 사이트는 안예쁘다. 물론 HTML로만 작성된 웹도 존재한다. 하지만 CSS를 사용하면 웹 사이트를 훨씬 더 예쁘게 꾸며줄 수 있다. 웹 문서를 볼 수 있는 다양한 기기들이 많다. 여러 기기들에서 같은 웹을 보려면 해당 기기에 규격을 맞춰서 보여줘야하는데 이러한 부분들을 CSS를 통해서 해결할 수 있다. 이것을 반응형 웹 디자인이라고 한다.

 

사용자 동작에 반응하는 기능을 개발하는 JavaScript

 웹 사이트에서 특정 요소를 클릭하거나 스크롤을 하거나 마우스를 올렸을 때 동적인 효과를 보여주는 기능을 개발하려면 JavaScript가 필요하다. 지금은 엄청난 발전을 해서 JavaScript만으로도 정말 다양한 웹 사이트를 개발할 수 있고 JavaScript 기반의 수많은 라이브러리와 프레임워크도 존재한다. 이러한 것들도 함께 사용하면 엄청난 웹을 개발할 수 있다.