웹사이트 구성 HTML, CSS, JavaScript 뜻

웹사이트를 구성하는 구조, 초보자들을 위해 기본적인 항목부터 해서 정리를 해볼까 합니다. 오늘은 가장 기본이 된다고 볼 수 있는 HTML, CSS, JavaScript에 대해서 뜻과 정의 등을 확인해 보도록 하겠습니다.

웹사이트를 구성하는 기본 요소

HTML
CSS
JavaScript

HTML 이란?

영문을 풀어보면(HyperText Markup Language) 하이퍼 텍스트 마크업 언어라는 의미를 담고 있습니다. 구현하고자 하는 웹 사이트 및 웹 페이지의 구조를 정의하며 TAG를 활용해 텍스트, 이미지, 비디오, 링크 등을 원하는 위치에 배치하고 적용할 수 있습니다.

현재는 HTML5이 서비스 중이며, 이전 버전 대비 더 많은 기능을 제공해 더 다채로운 웹사이트를 제작할 수 있게 되었습니다. 현재 서비스 되고 있는 HTML5에서는 비디오 및 오디오, 캔버스, 폼 컨트롤 등 다양한 타입의 요소가 추가되어있는 상태입니다.

각 태그는 속성을 갖고 있고 속성을 통해 같은 태그라고 할지라도 더 다양하게 표현하고 독창적인 기능을 할 수 있도록 합니다. 간단한 웹사이트는 HTML 만으로도 구축이 가능하니, 웹개발자로 진로를 결정했다면 HTML을 활용해 웹 페이지를 간단하게라도 구현해 보는 연습을 권장합니다.

CSS 란?

HTML로 뼈대를 갖추고 구조를 완성했다면 CSS (Cascading Style Sheets)를 이용해 웹 페이지를 꾸미고 스타일링할 수 있습니다. 시각적인 효과를 준다고 이해해 주시면 되며, CSS를 이용해 글꼴, 색상, 레이아웃 조정 등이 가능 합니다. 쉽게 예를 들면 웹 페이지를 인테리어 한다 또는 색을 입힌다 같은 느낌으로 이해해주시면 될 것 같습니다.

CSS로 표현할 수 있는 시각적인 효과는 계속해서 진화하고 있고 회사 홈페이지 및 비주얼이 중요한 페이지는 HTML 만큼이나 CSS의 기본 구조가 중요하게 작용할 수 있습니다. 몇 가지 코드를 수정하는 것만으로도 홈페이지 전체적인 변화를 적용할 수 있어 필수적인 기술 중 하나로 거론 되는 기술입니다.

JavaScript

HTML로 뼈대를 만들고 CSS로 예쁘게 색칠했다면 이번에는 자바스크립트로 웹 페이지에 동적인 효과와 상호작용을 더해줍니다. 사실상 웹사이트에 방문하는 사용자와 상호작용하는 역할을 수행하기에 순서대로 삼박자가 잘 맞아떨어져야 완성도 있는 웹사이트가 완성될 수 있습니다.

자바스크립트 역시 계속해서 변화, 진화하고 있고 아래와 같은 활용이 가능합니다.