Web Service
1. Internet
일반적으로 하나의 컴퓨터를 standalone으로 사용하지 않고
여러 개의 컴퓨터를 network으로 묶어서 사용한다.
=> Local Area Network
=> Network로 구성된 전 세계적인 Network => Internet (network of network)
=> 인터넷이란 용어는 물리적인 네트워크망을 지칭하는 용어
2. 서비스(Service)
인터넷을 잘 이용하기 위해서는 인터넷위에 여러 가지 프로그램이
동작하고 있어야 한다. 이런 프로그램을 통칭해서 Service라고 한다.
- email
- 토렌트
- web service : HTML, CSS, JavaScript를 이용해서 web page를 만들고
web서버가 이 web page를 web client에게 전송해서
데이터를 주고받는 서비스
3. Web Service는 기본적인 구조가 CS구조이다.
CS구조 : Client -Server구조
Web Client - Web Server
Web Client(Web Browser - Chrome, IE, Edge, Safari, firefox, Opera)
Web Server(직접 만들수도 있다. 하지만 상용 프로그램을 사용)
4. Web Service
- 정적 웹 서비스 (static web service) => HTML, CSS, JavaScript
- 동적 웹 서비스 (dynamic web service => THML, CSS, JavaScript + Python 등등
5. 개발환경 세팅
개발툴 => web storm => PyCharm 만든 회사와 같은 회사
=> HTML,CSS,JavaScript를 사용하기 가장 괜찮은 툴 중 하나. 다만, 유료.
서버가 클라이언트에게 제공할 HTML만들기.
-> 1. 웹서버가 일단 존재해야한다.
2. 웹서버가 내가 작성한 프로젝트를 인식해야 한다. => Configure
3. 웹서버프록램을 기동(실행)하면 자신이 인식하고 있는 프로젝트를
웹에서 사용할 수 있도록 deploy(전개) 한다.
클라이언트가 접속할 서버 컴퓨터의 IP와 포트번호를 정하게 된다.
4. 웹 클라이언트를 실행한다. (크롬을 실행한다.)
5. 크롬을 이용해 웹서버에 접속해 작성한 HTML 파일을 받아온다.
6. 크롬브라우져가 받은 HTML을 해석해서 화면을 그림(랜더링)
HTML => tag로 구성된다.
문서의 구성, 구조(DOM, Document Object Model)와 내용 담당
CSS => 문서의 style을 담당
JavaScript => 문서의 동적 처리를 담당
기본적인 주소모양 : http://localhost:63343/HTML_basic/01_index.html
접속할주소:포트번호/프로젝트명/파일명
모든 내용은 html태그 안에 위치를 해야한다.
태그들은 정해져있다.
앞에 들여쓰기는 가독성을 위해 사용해주면 좋다. 필수는 아니다.
6. HTML5 : HTML의 특정 버전
초기에 웹은 당연히 static web service 위주였다.
HTML 1.0 ~~===>HTML4.01 (1999년)
HTML의 표준은 W3C(World Wide Web Consortium)에서 관리한다.
2000년으로 넘어오면서 더이상 HTML 버전업의 의미가 없다는 의견이 나옴.
이유 1. 태그(기능)가 정해져 있어서 확장성에 문제가 있다.
2. 정형성이 없음. (유지보수에 문제가 발생)
=> XML + HTML => XHTML 1.0탄생 >> But. 사용자들의 외면 : 망함
=> HP, Opera, IBM 기타등등 workgroup 결성
=> HTML5 를 웹 표준으로 지정됨.
=> HTML5가 지향하는 것 : Web Application(Angular, React, View.js)을 만들 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 일반적인 설정 -->
<meta charset="UTF-8"> <!--인코딩 설정-->
<title>제목자리</title>
<!-- 이 안에 CSS문법을 사용한다 -->
<!-- h1태그를 찾아서 기능을 수행 -->
<style>
h1{
color: #ff0000;
}
</style>
<script>
function my_func() {
alert("소리없는 아우성.")
}
</script>
</head>
<body>
<!-- BROWSER에 출력하고 싶은내용-->
<h1> <!--heading 1-->
이것은 소리없는 아우성!
aaaabbbbccccdddd
</h1>
<input type="button" value="클릭!" onclick="my_func()">
<br>
<br>
<img src="image/coronavirus.jpg"> <!-- 사진 파일을 저장했을때 -->
<!--웹에서 가져올때-->
<!--<img src="https://image.shutterstock.com/image-photo/coronavirus-2019ncov-novel-
concept-resposible-600w-1625951248.jpg">-->
<!--
element : 각각의 요소
tag : 기능
property(attribute) : 태그 속성들 (부가적인 정보)
-->
</body>
</html>'교육 > web' 카테고리의 다른 글
| 2020.07.31 ~ 2020.08.03 Django project (0) | 2020.08.03 |
|---|---|
| 2020.07.30 Django (0) | 2020.07.30 |
| 2020.07.28~2020.07.29 Web 예제 (0) | 2020.07.28 |
| 2020.07.24 AJAX (0) | 2020.07.28 |
| 2020.07.23 Web(HTML, CSS, jQuery) (0) | 2020.07.23 |
댓글