[로드 투 정글] 2. 입학 시험(2) - 프론트엔드(HTML, CSS, Javascript)

웹 구성 필수 3요소 - HTML, CSS, Javascript

저번 글에서 웹 서비스에 대한 전체적인 큰 그림을 그려보았다면, 이번 글에서는 웹페이지에 대한 큰 그림을 그려볼 차례입니다. 웹페이지를 만들기 위해서는 필수적으로 알아야 할 3가지 핵심 요소들이 있는데요, 바로 HTML, CSS, Javascript입니다. 이 3가지 핵심 요소들이 모여서 사용자와 상호작용이 가능한 예쁜 웹사이트가 만들어집니다.

 

 

인체의 골격, HTML

HTML(Hyper Text Markup Language)은 웹페이지를 만들기 위해 특별히 만들어진 컴퓨터 언어입니다. 다양한 태그를 통해 데이터를 나열해 정보를 전달하는 것을 목적으로 하고 있는데요. 사람으로 따지면 뼈대와 구조를 담당하고 있다고 할 수 있습니다.

HTML로만 구성된 네이버 홈페이지

 

여기서 태그(Tag)는 <태그명>내용</태그명> 형태로 작성되는 마크업 요소인데, 태그명에 따라 전달하는 정보와 형태가 달라지고, 보통 태그 사이에 전달할 정보를 입력합니다.

 

예를들어 <h1> 태그나 <p> 태그같이 텍스트를 표현하는 태그도 있고, <a> 태그나 <img> 태그처럼 하이퍼링크나 이미지를 표현하는 태그도 있습니다.

 

다양한 종류의 태그들을 사용해서 데이터를 나열하면 위의 사진처럼 정보들이 사용자 화면에 나타납니다. 다만 우리가 늘 보던 웹페이지와는 많이 다른 형태인데, 이는 CSS가 화면을 꾸며주지 않았기 때문입니다.

 

 

인체의 피부와 옷, CSS

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 지정하기 위한 컴퓨터 언어인데요. HTML로 만든 골격에 색상, 크기, 배치, 애니메이션 효과 등을 추가해 더 보기 좋고 예쁜 웹사이트를 만들 수 있습니다. 사람으로 따지자면 피부, 그리고 옷 등의 스타일링을 담당한다고 할 수 있습니다.

CSS를 적용하면 우리가 평소에 보는 웹페이지가 됩니다.

 

말 그대로 HTML의 각각의 요소를 적재적소에 배치하고, 각 요소마다 속성과 값으로 스타일을 주면 위의 사진처럼 평소에 우리가 많이 보는 웹사이트의 형태로 변신하게 됩니다.

 

즉, CSS를 이용하면 (1) 요소들의 레이아웃 배치와 여백 조절, (2) 색상, 글꼴, 정렬 등의 스타일 디자인, (3) 보는 화면에 따라 요소들의 크기가 자동으로 조정되는 반응형 웹 디자인, (4) 애니메이션과 트랜지션 등의 움직이는 효과 주기 등을 할 수 있습니다.

 

 

인체의 근육, Javascript

Javascript는 웹페이지를 동적으로 만들고, 사용자와 상호작용할 수 있게 해 주는 컴퓨터 언어입니다. 위에서 설명한 HTML과 CSS를 이용하면 사용자가 보기에 그럴듯한 웹페이지를 만들 수 있습니다.

 

하지만 자바스크립트가 없다면 어떤 버튼을 눌러도 웹사이트는 묵묵부답, 그대로인 상태일 것입니다. 그저 예쁜 사이트만 덩그러니 놓여져 있게 되는 것이죠.

 

사람으로 따지면 근육과 신경에 해당한다고 할 수 있습니다. 사람이 근육이 있어야 움직일 수 있는 것처럼 웹사이트도 자바스크립트가 있어야만 비로소 사용자와 상호작용할 수 있습니다.

자바스크립트가 있어야 네이버 검색창에서 검색 결과 창으로 이동할 수 있습니다.

 

먼저, 자바스크립트를 이용하면 위의 HTML 요소나 CSS 스타일 같은 웹 요소를 조작할 수 있습니다. 태그를 추가, 수정, 삭제하거나 CSS 스타일을 변경할 수 있죠.

 

그리고 클릭과 입력, 마우스 움직임 같은 이벤트에 대해 어떻게 반응할 지를 처리할 수도 있습니다. 사용자가 검색어를 입력하고 검색 버튼을 눌렀을 때 검색 결과 페이지로 이동하게 만들어 줄 수 있는 것이지요.

 

또 자바스크립트는 C, Python과 같은 엄연한 컴퓨터 언어이기 때문에  변수와 데이터를 다루고, 조건문이나 반복문 등을 사용할 수 있는데요. 뿐만 아니라 배열, 객체와 같이 여러 데이터를 저장하여 관리할 수도 있고 사용자 함수를 정의할 수도 있습니다.

 

심지어 자바스크립트는 웹페이지를 동적으로 변경할 수도 있는데요. 기존의 웹페이지 자체에는 없었던 HTML 요소들을 추가하거나 수정, 삭제를 할 수 있습니다.

 

무엇보다도 서버에게 사용자 요청을 전달하고 응답을 받아 처리해주는 역할을 자바스크립트가 도맡아서 진행합니다. 사용자가 입력한 정보를 받아 서버에게 요청을 보내고, 사용자 요청 처리를 완료한 서버가 보내주는 응답 결과를 받아서 이를 처리해 줍니다.

 

 

마치면서

위의 웹 구성 3요소 중 한 가지를 고르자면 무엇이 가장 중요하다고 생각하시나요? 제 생각에는 단연 자바스크립트가 가장 중요한 것 같습니다. 특히 서버와의 통신을 담당한다는 점에서 그렇다고 할 수 있는데요. 아무튼 위의 웹 구성 핵심 3요소를 살펴보면서 웹페이지에 대한 대략적인 큰 그림은 다 그려 보았다고 할 수 있겠습니다. 다음 장(3장)에서는 웹페이지 쪽의 나머지 구성 요소들인 JQuery와 Ajax를 소개드리려고 합니다. 고생 많으셨습니다!