10장 ) 웹 콘텐츠에서 사용하는 기술

Reference : 그림으로 배우는 Http & Network Basic

 

10장 ) 웹 콘텐츠에서 사용하는 기술

 

1. HTML

• HTML(HyperText Markup Language)은 웹 상에서 하이퍼텍스트를 보내기 위해 개발된 언어.
• 문서 중에 임의의 장소 정보가 다른 정보에 관련된, 즉 링크되어 있는 문서.
• 마크 업 언어 : 문서의 일부에 특별한 문자열을 붙임. → HTML 태그
• HTML로 쓰여진 문서를 브라우저가 해석해서 렌더링 처리를 한 결과가 웹페이지에 표시된다.

 

디자인을 적용하는 CSS

• CSS (Cascading Style Sheets)는 HTML 각 요소를 어떻게 표시할지를 지시한다.
• Ex)

  .logo{
  padding:20px;
  text-align:center;
  }​

• ".logo"라는 셀렉터로 지정된 번위에 {} 로 둘러싸인 선언 블록이 적용됨.
• 셀렉터는 스타일이 적용되는 범위로, HTML 요소나 특정 클래스, ID 등을 지정할 수 있다.

 

 

2. 다이나믹 HTML

• 정적인 HTML 내용을 클라이언트 사이드 스크립트를 사용해서 동적으로 변경하는 기술.
• HTML 등으로 만들어진 웹 페이지를 JavaScript 등의 클라이언트 사이드 스크립트로 조작하여 동적으로 변화시킨다.

 

HTML을 조작하기 쉽게 해주는 DOM

• DOM (Document Object Model) : HTML 문서와 XML 문서를 위한 API.
• DOM을 사용하면 HTML 내의 요소를 오브젝트로 다룰 수 있어 요소 내의 문자열을 추출하거나 CSS를 프로퍼티로서 변경해 디자인을 변경할 수 있다.
• JavaScript 등의 스크립트를 사용하여 HTML을 쉽게 조작할 수 있다.

 

 

3. 웹 애플리케이션

• 웹 애플리케이션은 웹 기능을 사용해서 제공되는 프로그램을 지칭한다.
• 프로그램이 HTML등의 콘텐츠를 생성함. 이러한 프로그램에 의해 생성된 콘텐츠를 동적 콘텐츠라 부른다.
• 사전에 준비된 콘텐츠는 정적 콘텐츠.

 

웹 서버와 프로그램을 연계하는 CGI

• CGI (Common Gateway Interface) : 웹 서버가 클라이언트에서 받은 리퀘스트를 프로그램에 전달하기 위한 구조.
• 프로그램은 리퀘스트 내용에 맞게 HTML을 생성하는 등으로 동적 콘텐츠를 생성.
• CGI 프로그램으로는 Perl, PHP, Ruby, C언어 등의 프로그램이 사용된다.

 

 

 

4. 데이터 송신에 이용되는 포맷이나 언어

XML (eXtensible Markup Language)

• 목적에 맞게 확장 가능한 범용적으로 사용할 수 있는 마크업 언어.
• HTML과 같은 문서 기술 언어에서 파생되었지만 HTML에 비해 데이터를 기술하는 것에 특화되어 있다.
• HTML과 같이 태그를 사용한 트리구조로 되어있고 독자적으로 확장된 태그가 정의
• 데이터를 재사용하기 쉽다.

 

JSON (JavaScript Objection Notation)

• 경량 데이터 기술 언어
• JavaScript에 있어서 오브젝트 표기법을 바탕으로 한다.
• 데이터형 : flase/null/true/오브젝트/배열/수치/문자열