티스토리 뷰
2020.07.22~ Postype 블로그에서 옮겨온 글
Web basic - 01, 02 web 개요, 정적/동적 웹
Web Service
1. Internet
- 일반적으로 하나의 컴퓨터를 standalone 으로 사용하지 않고, 여러개의 컴퓨터를 network로 묶어서 사용한다. => LAN (Local Area Network)
- Network of Network => 전세계적으로 연결되어 있는 물리적인 네트워크 망.
- 인터넷이란 용어는, 물리적인 네트워크 망을 지칭하는 용어다.
2. 서비스 (Service)
- Internet을 이용하기 위해서는 여러가지 Service(프로그램들)가 필요
- email (SMTP)
- 파일전송 (FTP)
- Web Service (World Wide Web Service)
- HTML, CSS, JavaScript로 web page를 만들고
- web 서버가 이 web page를 web client에게 전송해서 데이터를 주고 받는 서비스
3. Web Serive
- (World Wide) Web Serive는 CS 구조로 동작한다.
- CS 구조 : Client - Server
- Web Client - Web Server
- Web Client (Web Browser)
- 서버에 의해서 제공된 데이터를 가져다 사용하는 process (프로그램)
- Chrome, IE, Edge, Safari, firefox, Opera
- Web Server
- 데이터를 제공하는 역할을 하는 process (프로그램)
- Apache web server
4. Web Server에 의해 제공되는 데이터는
- 1) Web Page 형태로 제공되는 데이터
- 2) Web Application 형태로 제공되는 데이터.
- => HTML, CSS, JavaScript 언어로 이 데이터를 만들어서 제공
5. 기본적인 Web Serive 분류
- 정적 웹 서비스 (static web service)
- 클라이언트가 특정 HTML 파일을 요청한다.
- HTML, CSS, JavaScript로 처리 가능
- 동적 웹 서비스 (dynamic web service)
- 클라이언트가 특정 프로그램을 실행해서 그 결과를 요청한다.
- HTML, CSS, JavaScript + Python (/ Java/ C++)
5-1. Web 개발 환경의 변화
- static/ dynamic web service의 request/response 과정 차이 이해 (하단 그림)
- Round Trip => SPA (Single Page Application)으로 변화하고 있다!
- Front-end Web Application을 작성해야 한다.
- AJAX (서버와의 통신을 통해 data만! 받아온다 => 비동기 방식
- 프론트 화면의 틀이 되는 HTML 코드는 초반에 한번만 서버에서 받아온 후 data만 갈아끼운다.
6. 웹 서버가 웹 클라이언트에게 데이터를 전달하는 전체적인 과정
- 1) 웹 서버가 일단 존재해야 한다.
- 2) 웹 서버가 내가 작성한 프로젝트를 인식해야 한다. => Configure
- 3) 웹 서버 프로그램을 기동/실행하면,
- 자신이 인식하고 있는 프로젝트를 웹에서 사용할 수 있도록 deploy (전개)한다.
- 클라이언트가 접속할 서버 컴퓨터의 IP와 포트 번호를 정하게 된다!!
- 4) 웹 클라이언트를 실행해야 한다. -> 크롬을 실행한다.
- 5) 크롬을 이용해서 웹 서버에 접속해서 우리가 작성한 HTML 파일을 받아온다.
- 6) 크롬 브라우져가 받은 HTML을 해석해서 화면을 그린다. -> rendering
7. HTML5 : 지금 우리가 사용하고 있는 HTML 버전
- HTML5 = HTML + CSS + JavaScript
- HTML 표준안 + CSS 표준안 + JavaScript의 API
- (JavaScript 표준은 따로 있고 함수가 들어가있다고 이해)
- HTML5가 지향하는 것 -> Web Application을 만들 수 있다.
- => Angular, React, View.js
HTML은 tag로 구성된 언어
- tag는 두가지 종류가 있다.
- 1) block level element - 무조건 1라인을 차지
- 2) inline level element - 내용에 대한 영역만 차지
- tag는 중첩 구조를 가질 수 있다.
- 이때 부모와 자식, 후손의 관계가 성립한다.
- HTML 용어
- 1) element - tag와 tag 안에 포함된 요소들을 통칭해서 element라고 부른다.
- 2) tag
- 3) property (attribute)
- HTML은 크게 2가지 부분으로 구성된다.
- 1) <head> : 설정부분 - UTF-8: 유니코드, 다국어 지원
- 2) <body> : web browser에 rendering할 데이터
02_html_element.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
color: red;
background-color: yellow;
font-size: 30pt;
}
.myclass {
color: blue;
background-color: lightpink;
}
</style>
</head>
<body>
<h1 class="myclass">아우성!!! </h1>
<h2>아우성!!!!h2</h2>
<h3 class="myclass">아우성!!!!h3</h3>
<h4>아우성!!!!h4</h4>
<span>이것은 소리 없는 아우성!!</span>
<div>이것은 소리 없는 아우성!!</div>
<!-- data-author: data 접두어로 새 속성 정의 -->
<img src="image/car.jpg" width="300" data-author="홍길동">
<!-- ul => unordered list -->
<ul>
<li>서울</li>
<li class="myclass">인천</li>
<li>제주</li>
</ul>
<!-- ol => ordered list -->
<ol>
<li>서울</li>
<li>인천</li>
<li>제주</li>
</ol>
<!--- 앵커 => 하이퍼링크 -->
<a href="http://www.naver.com">여기를 클릭클릭!!</a>
<br><br>
<!-- 사용자 입력 양식 -->
<input type="button" value="버튼을 누르세요!!">
<input type="text">
<input type="date">
<input type="color">
<div>
<h1> 하하ㅏㅏ하ㅏㅏㅏ...</h1>
</div>
</body>
</html>'멀티캠퍼스 AI과정 > 02 Web & Django Basic' 카테고리의 다른 글
| Web basic - 04,05 jQuery로 JSON 형식 데이터 받기, Open API (0) | 2020.11.14 |
|---|---|
| Web basic - 03 jQuery, Bootstrap (0) | 2020.11.14 |
| Web basic - 02 JavaScript, jQuery (0) | 2020.11.14 |
댓글