[HTML, CSS, JS] Web Basic
Web 기초
1. Internet
여러개의 컴퓨터를 network로 묶어서 사용하는 것은 LAN (Local Area Network) 입니다.
Internet 이란 쉽게 설명하여 전세계적인 Network를 즉 물리적인 네트워크 망을 지칭합니다.
2. Service
인터넷을 잘 이용하기 위해서는 인터넷 위에 여러가지 프로그램이 동작하여야 합니다. 이런 프로그램을 Service라고 합니다. 쉬운 예로 하기의 서비스가 있습니다.
Email (SNTP)
Torrent
Web service
여기서 웹서비스는 HTML, CSS, JavaScript를 이용해서 웹페이지를 만들고
web서버가 이 web page를 web client에게 전송해서 데이터르 주고 받는 서비스 입니다.
3. CS 구조
Client - Server 구조를 의미합니다.
Web Client - Web Server 프로세스 단위로 나눔, 프로그램 단위로 나눔
Web Client(Web Browser - Chrome, IE, Edge, Safari, Firefox, Opera)
Web Server : 데이터를 제공하는 역할을 하는 process (프로그램) Apache web server
Web Server에서 제공되는 데이터는 Web page 형태로 제공되는 데이터 Web Application 형태로 제공되는 데이터
HTML, CSS, JavaScript 언어로 이 데이터를 만들어서 제공합니다.
4. 기본적인 Web Service
정적 웹 서비스 (Static Web Service) : HTML, CSS, JS 클라이언트가 특정 HTML 파일을 요청
동적 웹 서비스 (Dynamic Web Service) : HTML, CSS, JS + Python, Java, C++
5. 개발환경 세팅
Pycharm을 이용해서 작성해 보겠습니다.
6. 예제 작성
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 일반적인 설정이 와요!! -->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- BROWSER에 출력하고 싶은 내용이 와요!! -->
<h1> 이것은 소리없는 아우성!! 껄껄 </h1> <!-- heading 글자크기를 크게 // 문장전체 : element, <> : tag-->
<img src="image/download.jpg"> <!-- img src 그림을 삽입 // property-->
<!-- element, tag, property -->
</body>
</html>
Web 서버가 web 클라이언트에게 제공할 HTML을 만들었습니다.
전제조건 및 html을 실행하는 과정은 아래와 같아요.
웹서버가 일단 존재해야 해요
웹서버가 내가 작성한 프로젝트를 인식해야해요!! > configure
웹서버프로그램을 기동(실행)하면 자신이 인식하고 있는 프로젝트를 웹에서 사용할 수 있도록 deploy(전개)해요!!
클라이언트가 접속할 서버 컴퓨터의 IP와 포트번호를 정하게 되요!
웹클라이언트를 실행해야해요!! - chrome을 실행해요!!
크롬을 이용해서 웹서버에 접속해서 우리가 작성한 HTML파일을 받아와요!
크롬브라우저가 받은 html을 해석해서 화면을 그려요!! (rendering)
7. HTML VS CSS VS JS
HTML : tag로 구성이 되요! 문서의 구성, 구조(DOM_Document object model)과 내용을 담당
CSS : 문서의 style을 담당
JavaScript : 문서의 동적처리를 담당
Leave a comment