9일차 - 웹 콘텐츠에서 사용하는 기술

오늘은 웹에서 다양한 콘텐츠를 보여주기 위해 사용되는 여러 기술들을 배웠다.

웹 페이지를 표현하기 위한 언어 뿐만 아니라 데이터 송신을 용이하게 하는 XML이라 JSON에 대해서도 알 수 있었다.

 

 

1. HTML (HyperText Markup Language)

웹 페이지의 대부분은 HTML로 되어 있기 때문에 HTML에 대해 알아볼 필요가 있다.

HTML은 웹 상에서 하이퍼텍스트를 보내기 위해서 개발된 언어이다.

여기서 말하는 하이퍼텍스트란 문서 시스템의 하나로서, 문서 중에 임의의 장소의 정보가 다른 정보에 링크되어 있는 문서이다.

마크업 언어는 문서의 일부에 특별한 문자열(HTML에서는 HTML 태그라고 부른다.)을 붙임으로써 문서를 수식하는 언어이다.

우리가 보고 있는 naver웹 페이지, google웹 페이지, 혹은 이 글이 담긴 웹 페이지 등 대부분은 HTML이 사용되고 있고 HTML로 쓰여진 문서를 브라우저가 해석해서 렌더링 처리를 한 결과를 우리가 보는 것이다.

 

 

2. CSS (Cascading Style Sheets)

CSS는 HTML 각 요소를 어떻게 표시할지를 지시하는 것으로 스타일 시트라고 불리는 사양중 하나이다.

같은 HTML 문서라도 CSS를 바꾸면 웹 페이지는 다른 디자인을 가지게 된다.

CSS는 문서의 구조와 디자인을 분리한다는 이념에서 만들어진 것이다.

 

 

3. 다이나믹 HTML

다이나믹 HTML은 정적인 HTML 내용을 클라이언트 사이드 스크립트를 사용해서 동적으로 변경하는 기술이다.

클라이언트 사이드 스크립트란?
웹에서 사용되는 스크립트 언어 중 클라이언트 쪽에서 실행되는 스크립트 언어를 말한다.
대표적으로 자바스크립트, VB스크립트가 있다.
스크립트 언어는 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어로 응용 프로그램과 독립하여 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어 최종사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다.

다이나믹 HTML이 사용되는 예시를 들면 더보기 버튼을 누르면 내용이 펼쳐지거나 쇼핑몰에서 제품의 사진을 마우스 휠로 확대하거나 축소할 때이다.

동적으로 바꾸고 싶은 HTML 요소를 지정하기 위해서 DOM이라는 구조를 사용한다.

-DOM (Document Object Model)

DOM은 HTML 문서와 XML 문서를 위한 API로 DOM을 사용하면 자바스크립트 등의 스크립트를 사용하여 HTML을 쉽게 조작할 수 있다.

DOM에는 여러 가지 메소드가 준비되어 있어 메소드를 사용하면 HTML의 각 요소를 참조할 수 있다.

 

 

4. 웹 애플리케이션

웹 애플리케이션은 웹 기능을 사용해서 제공되는 프로그램을 말한다.

예를 들어, 쇼핑 사이트나 인터넷 뱅킹, SNS 등 다양한 것들이 존재한다.

웹이 보급됨에 따라 프로그램이 HTML 등의 콘텐츠를 생성할 필요성이 생기게 되었고 이렇게 프로그램에 의해서 생성된 콘텐츠를 동적 콘텐츠라고 부르고 사전에 준비된 콘텐츠는 정적 콘텐츠라고 부른다.

 

동적콘텐츠를 클라이언트에게 보여주기 위해서는 웹 서버와 프로그램을 연계하는 CGI가 필요하다.

- CGI (Common Gateway Interface)

CGI는 웹 서버가 클라이언트에서 받은 리퀘스트를 프로그램에 전다라기 위한 구조이다.

CGI에 의해 프로그램은 리퀘스트 내용에 맞게 HTML을 생성하는 등 동적으로 콘텐츠를 생성할 수 있다.

 

웹 서버와 프로그램을 연계해 프로그램에서 동적 콘텐츠를 생성하는 것이 아닌 서버 상에서 동적 콘텐츠를 만드는 서블릿이라는 프로그램이 있다.

- Servlet

서블릿은 서버 상에 HTML 등의 동적 콘텐츠를 생성하기 위한 프로그램이다.

CGI는 리퀘스트마다 프로그램을 가동하기 때문에 대량의 액세스가 있으면 웹 서버에 부하가 걸리게 된다.

하지만, 서블릿은 웹 서버와 같은 프로세스 속에서 동작하기 때문에 비교적 부하는 적게 하여 동작할 수 있다.

 

 

5. XML (eXtensible Markup Language)

XML은 목적에 맞게 확장이 가능하여 범용적으로 사용할 수 있는 마크업 언어로 XML을 사용하여 인터넷을 통해 데이터 공유를 용이하게 할 수 있다.

XML은 HTML과 같이 태그를 사용한 트리 구조로 독자적으로 확장된 태그가 정의되어 있다.

이러한 점에 의해 XML 구조를 해석하고 파서 기능을 통해 데이터 추출을 쉽게 할 수 있다.

 

 

6. JSON ( JavaScript Object Notation)

JSON은 경량 데이터 기술 언어로서 javascript에 있어서 오브젝트 표기법을 바탕으로 하고 있다.

JSON데이터는 단순하고 가볍다는 장점이 있고 javascript에서 간단하게 읽어올 수 있어 Ajax에서 많이 이용한다.

또한, 여러 프로그래밍 언어에서도 JSON을 쉽게 다루기 위한 라이브러리에 집중하고 있다.

JSON에서 다룰 수 있는 데이터형은 false/null/true/오브젝트/배열/수치/문자열 등 7가지가 있다.