WEB / HyperText / HTTP-get,post / HTML / CSS vs SSS 정리

 

  WEB  

HyperText 문서들이 인터넷을 통해 연결된 시스템

web의 시작 : World-wide-web = www = w3

 

구성 :

통신 프로토콜 (http) / contents(hypertext 문자들 / 링크를 통해 다른 문서로 접근할 수 있는 문서 ex.html

* http는 링크를 통해 다른 문서로 접근할 수 있다. 웹에서 우리가 접근하는 통신 프로토콜은 http 

 

주소 체계 : URL 

프로토콜HTTP (TCP/IP) + 주소체계URL + 데이터 포맷 Hypertext 

 

Web browser : web에 접근하기 위한 응용 소프트 웨어

(ex. google- crome , microsft - internet explorer, apple - safari )  

 

 

 

 

* Hypertext란?

 

컴퓨터를 통하여 저장된 정보를 학습자가 자신의 필요와 관심 및 인지 스타일에 따라 자유롭게 검색하도록 도와주는 비순차적 텍스트의 전개원리.  이 그림에서 한 개의 페이지처럼 보이는 정보단위를 노드(node)라고 하고 점으로 서로 연결하고 있는 것처럼 보이는 연결점을 링크(link)라고 한다.

 

 

 

 

노드와 링크를 단위로 하는 정보의 구조화 방식

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

  HTTP  

[HyperText Transfer protocol]

 

인터넷에서 웹 서버와 사용자의 인터넷 브라우저 사이에서 Hyper Text 문서를 전송하기 위해 사용되는 통신 규약 

 

* HyperText = 문서 중간중간에 특정 키워드를 두고 문자나 그림을 상호 유기적으로 결합하여 연결시킴으로써 서로 다른 문서라도 하나의 문서인 것처럼 보이면서 보기 쉽게 만드는 방식이다. 

 

http의 첫번째 버전은 인터넷을 통해 가공되지 않은 데이터를 전송하기 위한 단순한 프로토콜이었으나 데이터에 대한 전송과 요구, 응답에 대한 수정 등 가공된 정보를 포함하는 프로토콜로 개선되었다. 인터넷 주소 http://www... 의 뜻은 www로 시작되는 인터넷 주소에 HyperText 문서의 교환을 http 통신규약으로 처리하라는 뜻이다. 

 

HTTP는 웹 Client(브라우저) <-> web server 사이를 이어주는 프로토콜 

- 응용계층에서 동작

- 응용 프로그램에 접근하여 다양한 역할을 함 

- 통신의 단계 - 요청(requset ) , 응답 (response) 

 

 

HTTP 특징 

1. Connectionless Protocal  :

client가 request 를 server에 보내면 server는 client에 맞는 response를 보내고 접속을 끊음.  성능상 비효율적 

 

2. Stateless Protocal (상태정보 유지x)  이에 대한 대안으로 ↓↓ 쿠키 & 세션 

 

- 쿠키 : Client 에 저장되는 키와 값이 들어있는 작은 데이터 파일 

- 세션 : Server는 일정 시간동안 Client로부터 전달되는 requrest를 통해 하나의 그룹으로 보고 하나의 세션으로 식별. Client 가 server로 최초 request를 보내면 유일한 식별자 (ID)인 세션 ID를 부여 

- Client에서도 server의 응답을 이용하여 세션ID를 쿠키로 저장 

- Request 시에 server는 request header의 쿠키 정보 (세션ID)를 확인하고 server에 저장된 세션ID와 비교하여 사용자 식별 

 

 

 

HTTP Request 메세지 (REQ)

 

 

<- request경우 start line 중요! 

 

 

<- header 

 

<- 빈 한 줄

<- body 

 

 

 

 

구성요소 1. method (get, post) : 서버가 수행해야 할 동작을 정의 

* GET :

- 가장 일반적인 http request 형태. 요청 데이터의 인수를 web browers URL 로 전송, client가 요청하는 데이터를 주소창(URL)끝에 표시 ->  (ex..../?userid='root'&userpw='root')) 

=> URL에 데이터가 표시되어 보안에 취약 

- 주소창을 통해하는 모든 requrest 

- web page를 불러오거나 간단한 data 요청 시 사용 

 

* POST : 

- data를 server로 제출하는 용도

- 다른 사용자가 링크로 해당 page 볼 수 없다. 

- server에 저장된 내용에 변화 ex) 로그인 정보, 게시물 저장/수정/삭제 등 (DB와 연결되는) 

- parameter 정보가 request body에 포함되어 사용자에게 get 보다 노출되지 않아 보안적으로 우수 

 

구성요소 2. request URI : 상대 경로 및 절대 경로로 request 가능

 

구성요소 3. 프로토콜 버전 , 통신을 사용할 때 사용하는 버전 정의

 

구성요소 4. request header : 필요한 조건이나 특성을 나타내는 필드

 

구성요소 5. request body :

Client가 server로 보내는 추가적인 데이터, post로 사용할 경우 추가, 다양한 포맷의 데이터 추가 가능. 

 

 

 

HTTP Response 메세지 (RES) 

- server에서 쓰이는 프로토콜 버전, requrest에 대한 실행 결과 내용 

- headers 정보 뒤에는 실제 데이터 (html or img file) 를 전달

- 데이터 전달이 끝나면 server 연결을 끊음 (부하를 줄이기 위한 특징) 

 

Response 구성 

 

 

<- 프로토콜 버전 / 상태코드(200,400..) / 상태코드 설명

 

<- 전달할 데이터의 형식과 길이 등의 메타정보 

ex. 글자 형태, connection type, 등등.. 

 

<- 응답 body : head의 요청 등의 경우 생략 가능 

                    Request에 대한 결과 

 

 

 

 

 

 

---

 

 

 

 

 

 

  HTML  

[HyperText Markup Language]

 

HTML : 가장 단순한 형태의 Web language / HTML Tags 로 구성 

- 웹사이트의 뼈대, 몸체를 담당 (CSS는 옷과 악세사리 역할)  

- 우리에게 친숙한 웹사이트를 만들 때 이용됨 

- HyperText를 효과적으로 전달하기 위한 script 언어 

- web server에 html 문서를 저장하고 있다가 client 가 요청하면 해당 page를 전송

- web page 해석 후, web browser로 표현: Static Web Page 

 

 

 

 

 

* Static Web Page (정적 웹 페이지) 

장점 : 보안상 웹 해킹이 어려운 점 

단점 : 변화를 반영하거나 새로운 것을 추가하기 위해 많은 시간이 걸림 

 

<-> Dynamic web page (동적 웹 페이지) 

사용자의 요청, 상황에 따라 내용이 달라짐 

 

 

 

 

 

---

 

 

 

 

  CSS / SSS  

CSS  [ Cascading Stype Sheets ]

 

- Markup Language 가 실제로 표시되는 방법을 기술하는 언어 

- Client 측 언어 ex) JavsScript, VBS 

- html, Xhtml 에 주로 쓰이며 XML에도 사용 가능

- w3c 의 표준

- 레이아웃, 스타일 정의할 때 자유도가 높음 

- HTML로 뼈대, 몸체를 만들면 CSS로 옷과 악세사리로 치장하는 너낌

 => 똑같은 html에 css 만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있음 

- 웹 브라우저에서 해석되어 화면에 적용 -> server 부담을 줄임 ↓

- CSS3의 경우 그림자 효과, 그라데이션, 그래픽 편집, 애니메이션 기능 추가되어 어도비 플래시를 어느정도 대체하고 있다. 

 

 

SSS [ Server Side Script ]

 

- server 측 언어 ex) ASP(Windows), JSP(JAVA) , PHP(오픈소스).. 

- 동적인 언어 

- web server가 SSS로 작성된 page 를 내부적으로 실행하고 실행결과를 html 파일로 만들어 client에게 전송 

 

 

 

css & sss 구별하는 이유 

-> 보안성 증가

사용자측 언어와 (css) 서버측 언어 (sss) 를 구분해 놓음으로써 사용자 측에서 서버에 쉽게 접근하지 못하게 할 수 있다. 이를 통해 로그인 검증과 같은 보안상 중요한 작업들은 서버측 언어로 구현해 놓아 보안성을 높일 수 있음. 실제 DB, 데이터베이스에 

 

 

 

 

 

 

 

 

 

 

 

참고 블로그 : 감사합니다

https://blog.naver.com/wsw3727/222309972825

https://g0pher.tistory.com/174