CSS vs HTML vs 자바스크립트, 대체 뭐가 다른걸까?

우리가 웹사이트를 디자인하거나 개발할 때는, 반드시 알고 있어야만 하는 세 가지의 코딩 언어가 있습니다. 바로 CSS, HTML,자바스크립트(JavaScript)인데요. 일반적으로 모든 웹사이트는 이 3가지 프로그래밍 언어를 사용합니다.

​만약, 여러분이 웹사이트를 운영하고 있지만 개발에 대해서는 잘 모를지라도, 이 세 가지 프로그래밍 언어들 사이의 차이점을 알고 있다면 웹사이트의 개발 과정에서 일어나는 일들을 이해하는 데 보다 도움이 될 겁니다. 웹사이트의 구성요소에 어떤 문제가 발생한다고 했을 때에도, 프로그래밍 언어에 대해서 명확하게 파악하고 있다면, 문제를 일으키는 요소가 무엇이며 그것을 해결하는 방법에 대해서 적절한 판단을 할 수 있기 때문입니다.

​이번 시간 위시켓은 여러분께, CSS, HTML, 자바스크립트의 역할과 차이점에 대해 알려드리겠습니다. 개발 언어들이 웹사이트에 어떻게 영향을 미치고, 어떤 목적으로 사용되는 지를 꼼꼼히 살펴보세요.

​

CSS vs HTML vs 자바스크립트 빠르게 알아보기

CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)
: HTML로 만들어진 문서의 (컬러, 폰트 스타일, 레이아웃, 반응형 특징 등의) 스타일을 지정하는 방식을 규정하는 유명한 스타일 시트 언어입니다. CSS는 웹사이트를 시각적으로 보다 매력적으로 만드는 기능을 제공합니다.

​

HTML
: 웹 브라우저에서 문서 및 웹 페이지가 표시되는 방법을 규정하는 언어이며, 어떠한 웹사이트에서든 블록(block)을 구성하는 데 사용되는 언어이기도 합니다. HTML을 이용하면, 웹사이트의 구조를 만들 수 있습니다.

​

자바스크립트(JavaScript)
: 웹사이트가 로딩된 이후에 CSS와 HTML 구성요소들을 변경할 수 있게 해주며, 이를 통해서 웹사이트를 보다 인터랙티브(interactive)하게 만들고 사용자의 참여율도 높일 수 있습니다.

​

​

웹사이트는 다양한 코딩 언어와 프로그래밍 언어를 사용해서 개발할 수 있으며, 웹 개발에서 가장 많이 사용되는 대표적인 언어들로는 HTML, CSS, 자바스크립트, PHP, 파이썬(Python), 루비(Ruby), SQL 등이 있습니다. 요즘에는 많은 스타트업과 기업가들, 웹 개발자들 사이에서 루비와 PHP의 인기가 아주 많기는 하지만, 기본적인 언어인 HTML, CSS, 자바스크립트만으로도 웹 디자인과 개발에 대한 기초를 이해하기에는 충분합니다.

웹 개발 언어들은 각자 다른 목적을 갖고 있습니다. 예를 들어서 루비는 확장 가능하며 속도가 빠른 프로그래밍 언어이기 때문에, 아주 짧은 기간에 대규모의 웹사이트나 프로그램을 만들 수 있게 도와줍니다. 루비 온 레일즈(Ruby on Rails)라는 프레임워크와 함께 사용하면, 루비로 웹사이트를 만드는 데 필요한 거의 모든 것을 제공해줍니다. SQL같은 언어를 활용하면, 개발자들은 대용량의 데이터베이스를 훨씬 더 간소화된 방식으로 유지하고 최적화할 수 있습니다.

​프로젝트의 종류에 따라서 서로 다른 코드의 언어가 사용됩니다. 또한 특정한 프로그래밍 언어의 인기가 더 많다고 하더라도, 전문적인 웹 개발자들의 상당수는 여전히 자신들만이 선호하는 언어가 있습니다. 그리고 수많은 플랫폼들은 여러 다양한 언어들을 기반으로 구축되어 있습니다. 예를 들어서, 워드프레스(WordPress)는 주로 강력한 PHP 코드로 구축되었지만, HTML과 CSS도 사용되었습니다.

​개발 과정에서 사용하는 주된 언어는 프로젝트의 구체적인 성격과 비즈니스의 목표에 따라서 달라집니다. 이러한 목표가 무엇인지를 잘 파악한다면, 웹사이트나 어플리케이션을 개발할 때 어떤 언어가 가장 이상적인지를 보다 잘 판단할 수 있습니다.

​

​

HTML이란?

HTML은 프로그래밍 언어이며, Hypertext Markup Language(하이퍼텍스트 마크업 언어)의 줄임말입니다. 웹 개발자와 운영자가 웹사이트의 구조를 만들 수 있는 비교적 단순하지만 강력한 프로그래밍 언어로 볼 수 있는데요. 블로그 게시글에 있는 어떤 문장을 굵은 글꼴로 표시하고 싶다면, HTML을 사용해서 쉽게 작업할 수 있습니다. HTML을 사용하면, 어떠한 텍스트 파일에서도 태그(tag)를 이용해서 다양한 효과, 그래픽, 폰트, 색상을 표시할 수 있습니다. 만일 예전에 어떤 종류의 프로그래밍 언어도 사용해본 경험이 없다 하더라도, HTML은 프로그래밍 언어를 배울 수 있는 좋은 시작점이 될 수 있습니다. HTML은 마크업(표기) 언어이며, CSS와 자바스크립트는 HTML을 보강하는 언어이기 때문에 HTML을 가장 먼저 배우는 것이 좋습니다.

​

HTML로 무엇을 할 수 있나?

HTML을 알아야 하는 주된 이유는 웹사이트를 운영자가 사이트의 기본적인 구조를 만들 수 있기 때문입니다. 웹사이트의 기본적인 구조를 만들고 나면, 다른 코딩 언어를 사용해서 디자인을 보강할 수 있습니다.

- HTML에 대한 내용을 기본적으로 이해하고 있다면, 웹사이트에 대한 제어와 유연성을 크게 높일 수 있습니다.
- HTML 코드에 대한 지식을 갖고 있다면, 사용자가 직접 변경할 수 있습니다.
- 웹 개발을 도와주는 플랫폼들은 웹사이트 디자인에서 필요한 복잡한 기능들은 자동으로 구현하는 경우가 많기 때문에, 일부 사소한 변경사항은 사용자가 HTML을 활용해서 직접 처리할 수 있습니다.

​

​

CSS란 무엇인가?

CSS는 HTML 구성요소들이 표시되는 방법을 개선하는 데 주로 사용되는 스타일 시트(style sheet) 언어입니다. CSS는 정적인(static) 프로그래밍 언어이기는 하지만, 웹사이트를 시각적으로 더욱 매력적으로 보이게 만드는데 사용될 수 있습니다. 웹사이트를 세련되며 우아하게 만들고 싶다면, CSS가 그러한 목적에 맞는 프로그래밍 언어입니다. CSS에 대한 내용을 기본적으로 이해하고 있다면, 웹사이트의 전반적인 모양과 느낌에 변화를 줄 수 있습니다. 즉, 브랜드의 미학적인 요소에 맞게 웹사이트의 모습을 디자인 하는 작업에서 유용하게 활용할 수 있습니다.

​

CSS로 무엇을 할 수 있나?

CSS는 주로 정적인 시각효과를 만드는데 사용되기는 하지만, 이 언어의 최신 버전에서는 아주 간단한 애니메이션 효과를 만드는 기능도 일부 제공하고 있습니다.

- 웹 페이지에 있는 일부 텍스트의 색상을 변경하고 싶다면, 기초적인 CSS만으로도 기존의 웹 페이지에 구현되어 있는 HTML 코드에 “스타일” 코드를 추가해서 원하는 작업을 처리할 수 있습니다.
- HTML로 표시된 내용에 더해서 CSS를 사용하면, 웹사이트의 레이아웃과 포맷을 변경할 수 있습니다.
- CSS의 기본에 대해서 알고 나면, 웹사이트의 모습은 물론이고 기존의 디자인에 적용된 모든 HTML을 개선할 수 있을 것입니다.

​

​

자바스크립트란 무엇인가?

자바스크립트는 웹사이트를 보다 인터랙티브 하게 만들고 싶은 운영자들에게는 가장 중요한 프로그래밍 언어입니다. 그리고 이번 글에서 소개하는 세 가지의 기본적인 프로그래밍 언어들 중에서는 가장 복잡한 언어이기도 합니다. HTML은 웹사이트의 구조를 제공하고 CSS는 웹사이트가 표시되는 모습을 제어하게 해준다면, 자바스크립트라는 프로그래밍 언어는 웹페이지에 포함되어 있는 다양한 구성요소들의 동작을 변경할 수 있는 도구를 제공해줍니다. 이러한 도구를 활용하면, 웹사이트의 CSS와 HTML 구성요소들에 인터랙티브 계층을 추가할 수 있습니다.

요즘에 볼 수 있는 대부분의 웹사이트에서는, 어떤 버튼을 클릭하면 새로운 메뉴가 펼쳐지면서 사용자가 웹사이트를 쉽게 탐색할 수 있게 만들어져 있습니다. 메뉴 버튼은 페이지의 옆쪽에 작은 메뉴 형태로 표시되며, 이것 만으로도 페이지에 인터랙티브 요소가 더해지게 됩니다. 이런 기능들은 모두 자바스크립트에 의해서 가능한 것이며, 웹사이트를 보다 정교하면서도 최신 버전으로 보이게 만들어줍니다.

자바스크립트에 대한 기본적인 내용을 이해하고 있으면, 웹사이트에 있는 여러 가지의 인터랙티브 기능들을 조작해서 다양한 범위의 작업을 수행할 수 있습니다. 웹사이트의 디자인과 기능을 완전히 제어하려면, 자바스크립트와 관련된 코딩을 어느 정도는 알고 있어야 합니다.

​

​자바스크립트로 무엇을 할 수 있나?

자바스크립트를 이용해서 할 수 있는 작업의 종류에는 사실상 제한이 없습니다. 자바스크립트는 다음과 같은 경우에 필요한 도구를 제공할 수 있습니다.

​- 웹사이트에 계산기를 만든다
- 다양한 키보드 단축키를 만들어서, 사용자들이 다른 페이지로 쉽게 이동할 수 있게 한다
- 사용자가 페이지에서 스크롤을 내리면 애니메이션을 실행한다

​자바스크립트를 이용하면 HTML과 CSS 구성요소들을 변경할 수 있기 때문에, HTML과 CSS 언어를 배우는 데에도 유용한 도구가 될 수도 있습니다.

​

> 이 글은 'HTML vs. CSS vs. Javascript: What’s the Difference?'를 각색하여 작성되었습니다.