| 인터넷과 웹
- 인터넷이란?
정보 공유를 위해 컴퓨터를 연결하는 방법 (연결 그 자체)
- 월드 와이드 웹(World wide web, web)
전 세계적으로 연결되어 있는 네트워크 통신망
* 사람들이 웹 언어로 소통하고 브라우저가 번역가로 작용하는 일종의 가상의 대도시
https://www.youtube.com/watch?v=J8hzJxb0rpc
[ 간단 히스토리 ]
- sir.팀 버너스리's "Information System : A Proposal" : 실험 결과 유실을 막기 위한 방안 제시
--> 문서, 이미지, 음성, 영상 등을 열람하는 방식 제안
--> HTML 표준을 비롯한 웹 표준안 제작
--> World Wide Web
- HTML(HyperText Markup Language)
: 프로그래밍 언어라기 보다, 데이터를 화면에 표시하기 위한 마크업 언어이다.
: 텍스트 형태로 작성되며, 브라우저 안에서 비로소 효용 가치가 생긴다.
Markup Language vs Markdown Language
Markup Language란,
문서 및 이미지 등을 포함한 데이터를 화면에 표시하기 위해 사용하는 언어의 일종을 말한다.
* 마크업 언어는 컴퓨터와 수학적인 소통을 하는 프로그래밍 언어와는 다르다.
* 마크업 언어는 다른 프로그래밍 언어와 달리, 조건이나 분기가 없으며, 변수와 같이 메모리 공간에 있는 임의의 값을 수정할 수 없다.
* 확장자 : .html
Markdown Language란,
마크업에서 파생된 언어로, tag(ex. <p></p>)로 구성된 마크업과 달리 읽고 쓰기 편한 문서 양식을 제공한다.
* 깃헙의 README.md 에서 사용되는 언어
* 확장자 : .md
- 웹 브라우저
: HTML을 비롯하여, 이미지나 음성, 영상 등의 콘텐츠를 WWW 기반으로 검색/뷰잉하기 위한 응용 프로그램
: 팀 버너스리가 만든 브라우저에서 시작되어 모자이크, 네스케이프 네비게이터, 파이어폭스.... 로 파생되어졌다.
: 현재의 브라우저 종류 (아래 외에도 더 있다)
브라우저 | 크롬 | 엣지 | 사파리 | 파이어폭스 | 웨일 |
회사 | 구글 | 마이크로 소프트 | 애플 | 모질라 | 네이버 |
엔진 | Blink | Blink | WebKit | Gecko | Blink |
OS | windows Android OS Mac OS iOS/iPad Linux |
windows Android OS Mac OS iOS/iPad Linux |
Mac OS iOS/iPad |
windows Android OS Mac OS iOS/iPad Linux |
windows Android OS Mac OS iOS/iPad |
>> 크로스 브라우징 : 작성된 html/css/script 코드가 여러 브라우저에서도 정상적으로 작동할 수 있게 하는 것.
- 브라우저의 엔진에 따라서, 화면이 깨질 수 있다.
- 위의 표를 보면, 크롬/엣지/웨일은 blink 엔진을 쓰기 때문에 크로스브라우징 테스트시 문제가 없을 수 있지만,
사파리나 파이어폭스는 다른 엔진을 사용하기 때문에 테스트시 화면이 깨지는 현상이 발생할 수 있다.
(이는, 각 기기에 호환될 수 있도록 하는 반응형과는 다른 개념이다.)
| 웹 브라우저와 웹표준
웹 접근성 | 웹 사이트에서 제공하는 정보를 모두가 차별, 제한 없이 사용할 수 있게 보장하는 것 - ex.시각 장애인을 위해 [tab]을 통해 콘텐츠 바로가기를 할 수 있게 하는 것 - ex.시각 장애인을 위해 이미지의 alt를 통해 설명을 달아두는 것 |
웹 표준 | 웹 접근성을 높이고 웹의 전반적인 수준을 높이는 것이 웹 표준을 지키는 것 - html, css, script에 의한 작업을 표준에 맞추어 잘 작성했는가 - w3c : 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직. 팀 버너스 리를 중심으로 설립되었다. |
[ w3c : World Wide Web Consortium ]
W3C는 설립목적인 웹 표준과 가이드라인 개발을 수행하고 있으며, 지금까지의 결과로 지난 10년간 80여개의 W3C 권고안을 발표하였다.
- w3c school
: html, css, javascript를 포함하여 sql, python, bootstrap 등에 대한 튜토리얼을 제공하고 있다.
: 프론트엔드 작성할 때 막히는 문법이 있다면 이 사이트에 가서 검색 시 해결되는 경우가 다반사.
- w3c validator
: w3c가 제공하는 또다른 꿀기능은 내가 작성한 코드가 웹표준에 맞는지 확인할 수 있는 validator가 있는 것
: html 뿐만 아니라 css에 대한 validator를 제공하며
: 각 브라우저에서 잘 호환되는지에 대한 cross examination까지 해준다.
* 참조 사항 : 플래시와 실버라이트, ActiveX가 사장된 이유 (더보기)
[ 플래시와 실버라이트, ActiveX가 사장된 이유 ]
2000년도 중반에는 플래시 애니와 플래시 게임들이 많았다.
종이인형 옷입히기, 인형 뽑기 게임 등 다양한 게임들이 참 많았었지.. 아련
그런데 어느 순간 이런 플래시 기반의 콘텐츠들이 쏙 들어가버렸다. 왜 그럴까..?
이유는 시간이 지나면서 IT 회사에서 사용하는 웹 기술이 변화했기 때문이다.
HTML5만으로는 브라우저에서 동적인 화면을 구성하기 어렵기 때문에 나온 것이
플래시, 실버라이트, ActiveX라는 기술이었다.
그런데 시간이 지나며 실버라이트나 ActiveX는 더 이상 사용하지 않게 되었고,
애플사에서 모바일용으로 HTML5를 사용할 것을 선언하면서 자연스레 플래시가 사라졌다.
| 웹 동작의 원리 (출처 : TCP School)
①② 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력함.
③ 사용자가 입력한 URL 주소 중에서 도메인 네임(domain name) 부분을 DNS 서버에서 검색함.
④ DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달함.
⑤⑥ 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성함.
이렇게 생성된 HTTP 요청 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송됨.
⑦ 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변환됨.
⑧ 웹 서버는 도착한 웹 페이지 URL 정보에 해당하는 데이터를 검색함.
⑨⑩ 검색된 웹 페이지 데이터는 또 다시 HTTP 프로토콜을 사용하여 HTTP 응답 메시지를 생성함.
이렇게 생성된 HTTP 응답 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전송됨.
⑪ 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 데이터로 변환됨.
⑫ 변환된 웹 페이지 데이터는 웹 브라우저에 의해 출력되어 사용자가 볼 수 있게 됨.
[ 출처 및 참조 ]
부트캠프 강의를 듣고 각종 자료를 참고하여 정리한 내용입니다.
https://ko.wikipedia.org/wiki/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80
http://tcpschool.com/webbasic/works
https://samsara-ku.dev/common_sense/difference-between-markup-and-markdown/
'Java, Spring > 웹프로그래밍 시작하기' 카테고리의 다른 글
[자바 프로그래밍] DB연결을 위해 필요한 것 (0) | 2022.08.27 |
---|---|
[자바 프로그래밍] 회원정보와 회원가입처리 클래스 (0) | 2022.08.27 |
[자바 프로그래밍] JVM과 자바 개발 환경 구축 (0) | 2022.08.26 |
웹 프로그래밍 기초 개념 - 프론트엔드와 백엔드, 라이브러리/프레임워크? (0) | 2022.08.10 |
[WAS] WAS란? 아파치 톰캣 설치하기 (0) | 2022.04.26 |