TIL33⎟ WEB

今日この文章を書いた日付は、3月12日がWWWの誕生日です!記念WEBストーリー̴̛ᴗ⁍̴̛⁎)

📕 WEB

​

1.WEBの登場背景…？

Internet vs Web
インターネットがオペレーティングシステムだとすれば、Webはオペレーティングシステムの上のプログラムです.
欧州粒子物理研究所では、ティム・バーナスがデータ量が大きくなり、ネットワークが複雑になり、従業員が異なるオペレーティングシステムやアプリケーションを使用するソリューションを提案しました.オペレーティングシステムやプログラムにかかわらず、フォーマットを常に同じにする新しい概念が必要だと思います.
インターネットとハイパーテキストを組み合わせて、異なるコンピュータ間のネットワーク接続を実現しました.
そして、10年来、私たちはWebの前身となるプログラムを作り、また繰り返しのプログラムを作り、世界で初めてWebブラウザWorld Wide Webというプログラムを作りました.
1960年にインターネットが登場して以来、エリートだけのネットワークが1990 Webで出会い、大衆化の道を歩んできた.
オペレーティングシステムにかかわらず、ブラウザさえあれば、スマートフォンでもPCでも、ノートパソコンでも、ウィンドウでも、Macでも、iOSでもAndroidでも、同じ情報を閲覧できるように、一定のフォーマット(HTML)で書かれたドキュメントを提案した.
生成されたHTMLを使って、人々は情報を交換し始めた.
「ネットでかっこいい会社紹介したい?」
情報伝達のHTMLのみに注目して設計できるコードCSSにより、HTMLを設計することができる.
「リンクしたくない他の機能を追加したい…」
「APIリクエストを交換したい…」
「登録と会員登録はどうすればいいですか?」
Webの広範な使用に伴い、他の機能を望んでいる人も現れた.これにはプログラミング言語が必要で、Web上でJavaScriptがプログラミング言語の役割を果たしています.
​

1-2. Webを構成する3つの要素

HTML(コンテンツ、構造)
CSS(設計)
JavaScript(プログラミング言語)
​

2.WebサーバとHTTP

Nexusから、様々なブラウザが市場に登場し、誰でも自由にインターネットが使える時代がやってきました!
WebブラウザをコンピュータにインストールされているWebサーバに接続し、indexを確立します.htmlファイルがほしいです.そう言えば、Webブラウザにファイルを渡すと、Webブラウザが説明して画面に表示されます.
このようにファイルを開けてホームページを見ることと、入力アドレスを入力してホームページを見ることで大きな違いがあります!
入力アドレスとは、そのコンピュータにWebブラウザとWebサーバがある場合、WebブラウザがWebサーバに要求することである.その後、Webサーバはhtmlファイルを開き、Webブラウザに送信します.
ただし、fileで始まるアドレスを入力すると、このコンピュータではWebサーバがこのプロセスに介入しません.Webブラウザの直接インデックス.htmlのファイルを読み取り、画面で開きます.
httpは、WebブラウザとWebサーバが互いに通信する際に使用する通信規約Hyper Text転送プロトコルであり、これを用いてデータを取得する.Webページを転送するプロトコル、すなわち、WebページがブラウザとWebサーバの間で互いに交換される約束がhttpである.異なるコンピュータ上のWebブラウザをWebサーバと通信させるためにはHTTPを使用する必要がある.
​

3. Browser

5つのブラウザ(Chrome、Explorer、FireFox、Opera、Safari)は世界最大のシェアを持つブラウザです.これらのブラウザは、HTML、CSS、JavaScriptを受信することで読み取ります.時間が経つにつれて、彼らは新しい機能を追加し、各言語のバージョンも増加しました.各ブラウザは異なるアプリケーションであるため、ブラウザによって実装方法が異なります.したがって、Webフロント開発者は、異なる消費者が使用するブラウザのバージョンとタイプに従って正常に動作するほど、追加のコードを作成または変更する必要があります.
​

4.反応型ページ

スマートフォンやタブレットが登場するにつれて、問題が発生しました!
スマホで「PCバージョン」のページを見ると画面が切り落とされるからです.だからポータル会社は「m.naver」と言いますcom'/'m.daum.「net」のように、アドレスの前にmのモバイルページが個別に作成されます.しかし、携帯電話やPC版を単独で作成したページを発売するのは不便であり、このような不便を解消するための技術は「反応型ページ」である.ブラウザの横幅に「反応」し、コンポーネントのテクノロジーを変更します.
従来,ある画素以下に幅を下げたり,以上に上げたりすると,異なるCSSが用いられていたが,反応型技術の発展に伴い,汎用的なCSSコードは片側に置かれ,レイアウトを主として動作し,各機器の設計を実現できるようになった.Webページのサイズ(パーセント)は、ユーザーのマシンによって自動的に変形します.
Youtube UIのみを実現したミニプロジェクトで横幅が760 px以下に縮小した場合、レイアウトが異なるためにメディアクエリ@mediascreeを使って変形しました!

@media screen and (min-width: 760px) {
.infoAndUpPnext {
flex-direction : row;
margin : var(--padding) 0;
}
}

​
📎 非専門職向けのIT知識
📎 https://youtu.be/pYOEy_mAMpI