수익형 블로그를 하기 위해 티스토리나 블로그스폿을 알아보다 보면 가장 먼저 마주하는 용어가 HTML가 CSS입니다. 오늘은 블로그 왕초보를 위한 HTML, CSS, JS 개념을 쉽게 설명해보는 포스팅을 준비했습니다.
웹프런트엔드개발에 필요한 HTML, CSS, JS
웹프론트엔드 개발이란 HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것을 의미합니다. 다시 말해 HTML,CSS, JS를 사용하여 웹페이지를 만들어서 사용자에게 보여주는 것. 그리고 그 사용자가 그 웹페이지를 실제로 사용하는 것을 의미합니다.
사용자가 인터넷 브라우저와 같은 프로그램을 통해 특정 사이트에 접속해서 사이트를 보게 되는 구조인데, 프론트엔드는 '앞단'을 의미하는데, 여기서 의미하는 앞단은 사용자의 앞에 보이는 웹사이트를 프런트엔드라고 말합니다.
비즈니스 로직이라고 불리는 웹사이트가 동작하기 위한 보안과 같은 핵심적인 내용들은 백엔드에서 개발이 되게 됩니다.그래서 우리는 개발자의 유형을 프런트엔드개발자,그리고 백엔드개발자로 나뉘어서 부르는데요.
쉽게 말해 누군가는 웹사이트의 앞단을 만들어 사용자가 볼 수 있는 뷰를 만들고, 누군가는 백엔드를 만들어 그 웹사이트가 문제없이 동작할 수 있게 만드는 것입니다.
웹프런트엔드 개발에서 사용할 수 있는 큰 줄기가 바로 HTML, CSS, JS인 것이고, 이 세 가지가 웹사이트에서 동작할 수 있는 언어라고 정리할 수 있겠습니다. 그리고 이 세가지 언어들이 가지고 있는 역할도 모두 다르다고 할 수 있겠습니다.
HTML이 기획자라면, CSS는 디자이너이다.
여기서 hyper text의 개념은 웹사이트에서 특정한 파란색 글자를 누르면 링크로 넘어가는데 보통 이 링크를 보통 hyper text라고 하고, 이걸 만들 수 있는 언어를 HTML이라고 합니다. 즉 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 다 당하는 것이 HTML인데요. 그래서 HTML은 기획자라고 말할 수 있습니다.
CSS (Cascading Style Sheet) :
실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당하는 것이 CSS입니다. 쉽게 말해 구조를 HTML이 짜 놓으면 그 위에 디자인을 만드는 것이 바로 CSS의 역할입니다.
그렇다면 JS 자바스크립트의 역할은 무엇일까요?
자바스크립트는 콘텐츠를 바꾸고 움직이는 페이지를 동작시키는 동적 처리를 담당합니다.
즉, 구조(HTML)와 스타일(CSS) 그리고 동적(JS) 이 모든 것들이 합쳐져 셔 웹사이트라는 결과물을 만들어서 사용자에게 제공하는 것입니다. 웹개발을 하기 위해서는 이거 세 개를 다 할 줄 알아야 합니다. 우리는 티스토리나 블로그스폿과 같은 블로그 운영에 그 목적이 있기 때문에 이러한 언어를 직접적으로 짤 수 있게 하기보다 표시되어있는 해당 언어들을 이해하고 변경할 수 있는 능력만 갖추면 충분하지 않을까 싶습니다.