HTML,CSS

Web 기본 정리

킹king 2020. 12. 11. 15:29
반응형

1. Internet

전 세계의 컴퓨터들이 자료 공유를 위해 서로 연결되어있는 것.

 

클라이언트와 서버로 구성되며

TCP/IP라는 기본 프로토콜을 통해 제공되고 있음.

 

 

2. WWW (World Wide Web)

인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 공간.

 

웹브라우저를 통해 접속할 수 있음.

 

https://www.javatpoint.com/what-is-world-wide-web

 

텍스트, 그림, 소리, 영상 등 정보를 하이퍼텍스트 방식으로 제공.

 

※ Hyper-text

문서 내부에 또 다른 문서로 연결되는 참조를 집어넣음으로써

웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술.

 

 

※ Internet과 WWW의 차이점

혼용하여 쓰이지만 인터넷은 단순히 기기가 연결되어있는 것을 의미하고,

WWW은 특정 주소로 이동하여 데이터를 공유할 수 있다는 것임.

 

인터넷을 사용하면서 이메일 전송, 채팅 등 여러 기능을 할 수 있는데,

그중 제일 유용한 기능 하나가 바로 WWW에 접속하여 다른 사이트로 이동하는 것임.

 

 

3. Web Browser

WWW를 통해 특정 페이지를 보여주는 기능을 하는 프로그램.

(크롬, 익스플로러, 파이어폭스 등)

 

 

4. Web Server

웹브라우저에서 특정 URL의 데이터를 제공하는 곳.

 

※ URL (Uniform Resource Location)

주소.

특정 페이지의 위치를 찾기 위한 정보.

 

 

5. HTTP

WWW에서 정보를 주고받는 규칙.

웹프로토콜 중 하나.

 

아래 6번에서

웹브라우저가 특정 URL에 대해 데이터를 요청하고,

웹서버가 그 데이터를 주는

이런 방식을 통틀어서 HTTP라고 할 수 있음.

 

※ HTTP와 HTTPS의 차이

HTTP

- 더 빠름

 

HTTPS

- 보안강화

 

※ HTTP1.0과 2.0의 차이

- 더 빠름

 

 

6. 특정 URL 접속 시 진행 방법

 

---> 웹브라우저에서 url 입력 후 엔터.

---> url이 도메인(naver.com) 형식이라면 먼저 DNS 서버로 이동.

 

※ 도메인

IP주소(1.172.44.249)를 외우기 어려워서 문자로 나타낸 주소 체계.

 

※ DNS 서버

도메인과 IP 주소를 저장하고 있는 데이터베이스.

 

---> 해당 도메인의 IP 주소를 웹브라우저로 보냄.

---> 웹브라우저에서 IP 주소를 이번엔 웹서버로 보냄.

---> 웹서버에서 해당 IP 주소의 HTML를 보냄.

---> 웹브라우저가 받은 HTML을 가지고 HTMLDOM을 생성하기 시작.

---> 중간에 <link>에서 만난 CSS를 웹서버에서 가져와서 CSSDOM 생성하기 시작.

---> 중간에 <script>에서 만난 JAVASCRIPT를 웹서버에서 가져와서 실행★

---> 요청/응답 여러번 하면서 HTML, CSS를 다 받았으면 최종적으로 합쳐서 Render Tree 생성.

---> 웹브라우저에서 화면에 보여줌.

 

※ ★ <--- 이 부분이 문제인 이유

아직 HTML 로딩도 안되었는데 Javascript가 실행되면 문제가 생김.

이를 방지하기 위해 defer 등과 같은 옵션이 생김.

'HTML,CSS' 카테고리의 다른 글

스무스한 fade효과가 적용된 모달창 기본 코드  (0) 2021.08.06
기종 별 input 모양  (0) 2021.04.06
SCSS 기본 정리  (0) 2020.12.09
HTML 몰아서 정리  (0) 2020.11.16
티스토리에서 코드 예쁘게 올리기(highlight.js)  (0) 2019.12.18

모든 게시물(특히 과거 게시물)은 잘못된 방법으로 처리한것을 좋다고 써놨을 수 있습니다. 참고만 하시고 틀린게 있다면 댓글 남겨주세요~