HTML & CSS & JavaScript
Web Application 개발에서 빼놓을 수 없는 3가지 언어
HTML, CSS, JavaScript의 정의와 역할에 대해 간단하게 알아볼까요?
HTML
HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당합니다. 골격을 짜는 것이라 간단하게 개발하기도 하지만 각 Tag들을 이용해 구조적으로 잘 짜두면 CSS나 JavaScript를 작성할 때 훨씬 편해질 수 있어서 깔끔한 Code를 작성할 수 있어요. DIV와 CSS로 원하는 페이지를 만들 수도 있지만 HTML만 봤을 때 가독성이 떨어지게 되고 CSS를 입히기 위해서 Class를 남발해야 할 수도 있기 때문이죠! HTML을 작성할 때는 웹 페이지의 골격을 구조적으로 만들어서 다른 개발자나 디자이너 분들도 한눈에 이해할 수 있도록 해야 합니다.
아래는 h1, h2, h3 Tag를 이용해서 Hello World를 작성한 거예요. CSS 없이 Tag만으로도 원하는 구조를 보여줄 수 있어요. 아래로 내려갈수록 중요도가 낮아지는 걸 HTML만으로도 표현할 수 있답니다.
See the Pen Hello World(HTML) by ShinEunYoung (@shineunyoung) on CodePen.
CSS
CSS(Cascading Style Sheets)는 마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당합니다. HTML의 Tag 이름이나 Id, Name를 이용해 대상이나 대상의 하위, 형제들을 꾸며 줄 수 있어요. 여러분이 웹페이지에서 보는 시각적인 부분은 대부분 CSS의 역할입니다.
아래처럼 CSS를 이용하면 골격만 있던 HTML에 배경 색을 넣고 글씨 색을 바꾸고 글자의 위치를 변경할 수 있어요.
See the Pen Hello World(HTML&CSS) by ShinEunYoung (@shineunyoung) on CodePen.
JavaScript
JavaScript는 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당합니다. HTML과 CSS는 정적인 언어인데 이 두 가지를 동적으로 처리할 수 있게 합니다. 정적으로 작성되어 있는 HTML에 글자를 변경하거나 Table을 추가할 수도 제거할 수도 있습니다. 글자 위에 마우스를 올렸을 때 글자 색을 바꾸거나 사용자가 잘못된 값을 Input Box에 입력하였을 때 경고 창을 띄울 수도 있어요. 이런 동적인 모든 작업을 수행하는 언어입니다.
아래는 2초마다 배경색을 바꾸도록 JavaScript를 작성한 것입니다.
See the Pen Hello World(HTML & CSS &Javascript) by ShinEunYoung (@shineunyoung) on CodePen.
이렇게 WEB 개발에 필요한 3가지 언어의 역할에 대해 간단히 살펴보았습니다.
개인적으로 웹 개발을 하다 보면 초기 구조와 다른 것을 추가하거나 삭제할 경우 HTML에서 해결하지 않고 JavaScript에서 해결을 하는 경우도 있었고, Style을 먹일 때도 JavaScript에서 해결하는 경우가 많았는데 앞으로는 되도록 깔끔한 코드를 위해 각 역할에 맞게 개발하도록 노력해야 할 것 같네요.
댓글