kh교육

(2025062703) 네트워크와 인터넷 ,ip address 간단 설명,패킷 통신방법 & html

boangod 2025. 6. 27. 14:08

네트워크와 인터넷

인터넷이란?

  • 전 세계 수백만 대의 컴퓨팅 장비를 연결한 네트워크
  • '인터넷에 연결된 장치' : 호스트(Host) = 종단 시스템(End System)  / 휴대폰, 데스크톱, 태블릿, 맥북 등

특징은?

  • 인터넷에 연결된 장치는 서로 데이터를 주고받을 수 있음
  • 호스트들은 네트워크 응용 프로그램을 통해 인터넷에 참여됨
  • 데이터를 주고받는 방법은 통신 링크(케이블, 무선, 위성 등)로 연결됨

 

 

 

+ 인터넷은 보통 그릴 때 구름표시로 그림 ☁️

badwidth = 네트워크 처리율


Protocol

프로토콜 (protocol)은 통신이나 데이터 처리 등의 분야에서 서로 다른 시스템 간데이터를 주고받는 규칙의 체계

 


네트워크 구조

Network Edge

  • 응용프로그램, 호스트
  • end system을 network edge라고 합니다. 그래서 host = end system입니다.
  • host는 Client/server로 나뉩니다. Client에서 요청을 보내면 Server에서 요청을 받고 응답을 해줍니다.

Network Core

  • 라우터, network of network (얼마나 가용성을 확보할 수 있는가가 가장 중요)
  • 회선 교환 (Circuit Switching)
    • 주로 방송에서 사용하고, 통신 세션동안 전용 회선을 이용하는 방법 ,특정 채널을 할당받는 것입니다. 경로, 대역폭을 예약해서 사용합니다. 그리고 FDM : 아날로그(주파수로 나눔)로 나누고, TDM : 디지털 (시 간으로 나눔)로 나눕니다.
  • 패킷 교환 (Packet Switching)
    • 주로 통신에서 사용하고, 데이터를 일정 크기의 단위로 나누어 불연속적으로 네트워크에 전송하는 방법 입니다. 대역폭 공유에 더 효과적이지만 과도하게 많은 데이터들이 들어오면 패킷이 지연되거나 손실됩니다. 그리고 패킷망은 통계적 다중화방식으로 보냅니다.(먼저 보낸 놈이 먼저 받음)

 

 

 

네트워크 분류를 하자면

Telecommunication networks

├── Circuit-switched networks

│ ├── FDM

│ └── TDM

└── Packet-switched networks

├── Networks with VCs

└── Datagram Networks

이렇게 가능합니다.

 

보통 network layer 아래를 코어라하고, 위를 에지라고 한다.


ISP

Internet Service Provider: 우리가 돈 내고 인터넷 쓰게 해주는 회사 (KT, SK, LG 등)

Tier-1 ISP (글로벌) → Tier-2 ISP → Tier-3(지역 ISP) → 가정이나 회사

투명성 : 있긴 있는데 관심이 없음,보이지 않고 볼 필요도 없음(안 봐도 댐)


 

간단한 패킷 통신 방식

왼쪽 client, 오른쪽 server

 

 

Filezilla가 메시지를 서버로 보내고 싶으면 

메시지를 밑에 tcp로 보내고 tcp는 filezilla(4230 port)과 21 port를 붙여서 segment라는 정보를 밑에 ip로 보냅니다.

그럼 ip는 자신의 ip1.1.1.2와 서버ip1.1.1.3과 위에서 받은 segment정보를 합쳐 datagram을 이더넷에 보냅니다.

그럼 ethernet은 자신의 정보랑 서버의 정보를 합치고 위에서 받은 datagram을 합쳐 서버 쪽으로 보냅니다.

간단하게 이런 방법으로 통신이 됩니다.

 

포트가 있어야 네트워크 참여가능합니다.

+ 식별자 : 평상시에 구분할수 있는 숫자로 정해둔 거(예 사본, 학번, 군번 등) 중복되면 안 됨, 대상에 있어 번호가 없으면 안 됨. not null 이여야 함.


ip address

 

주소 vs 일렬번호

 

주소 : 범위를 점점 줄일 수 있는 것

일렬번호 : 제품을 구분할 수 있는 번호

시퀀스 번호 : 구별만 해도 되는 번호

 

ipaddress는 서브넷마스크랑 같이 있어야 의미가 있다.

 

   192.168.10.155

네트워크 주소 | 컴퓨터 주소

 

넷마스크는 어디까지가 네트워크 주소인지 알 수 있게 하는 역할

 

왜 네트워크 주소를 알아야 하지?

나랑 네트워크주소가 같은 애들끼리 통신할 수 있기 때문입니다.


html기본 템플릿

밑에 코드가 가장 기본적인 템플릿입니다.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ex01.html</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

여기는 실습 페이지 입니다.
<br>
여기는 ast12의 페이지 입니다.

</body>
</html>

 

첫 사이트 야호

 

위에 사진은 사이트 띄운 것입니다.

 

글자 관련 태그

<font size="#">,<font>  : #부분에 1~7숫자 넣어서 글자 크기를 설정합니다.

<h#></h>                      : #부분에 1~6숫자 넣어서 글자 크기를 설정합니다. 제목표시로 사용합니다.

 

글자색 일괄 지정 : <body text="#색상코드 or 영어 색 이름"></body>

원하는 부분 글자색 지정 : <font color="#색상 코드 or 영어 색 이름"></font>

글꼴 지정 : <font face="글꼴 이름"></font>

 

(예시)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ex01.html</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<font size ="5" face ="궁서체" color="red">웹 페이지</font>입니다.
</body>
</html>

 

글자 장식

<b></b> : 글자를 굵게 표시 

<i></i>   : 글자를 이탤릭체로 표시 

<small></small>  : 글자 크기를 한단계 작게 표시

<big></big>  : 글자 크기를 한단계 크게 표시

<s></s>  : 글자 중앙에 줄을 표시

<u></u> : 글자 밑에 밑줄 표시

 

예약문자

&lt;       : < 표시

&gt;      : > 표시

&quot;  : " 표시

&nbsp; : 빈칸표시

&amp;  : &표시

 

(예시)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ex01.html</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
기본 <b>굵게</b><i>기울림</i> <small>작게</small> <big>크게</big> <s>가운데줄</s> <u>밑줄</u><br>
&nbsp;&nbsp;&nbsp;&nbsp; &lt; &gt; &quot; &amp
</body>
</html>

 

문단 꾸미기

<br> : 줄바꿈 태그

<p></p> : 단락을 구분해주는 태그

 - 형식 : <p align="속성">...</p>

 - 속성 :  left :  왼쪽 정렬(기본값)

             center : 가운데 정렬

             right : 오른쪽 정렬

<center></center> : 정렬 (요즘은 안씀)

<hr> : 페이지에 수평선을 표시하는 태그

 - 속성 : align : 수평선 정렬 위치 지정

              ┖ left, center, right

            width : 수평선 넓이

             ┖ 속성값 : 백분율

            size  :  수평선 높이

            color : 수평선 색상 지정

           noshade : 그림자 없이 평면으로 수평선 표시

(예시)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ex01.html</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<hr>
<p align="right">지은이</p>
<hr color ="red" align="right" width="200" size ="5">
<p align="center">제목</p>
<hr color ="red" size ="3">
<p align="center">
이곳이 본문을<br>
작성하는<br>
자리입니다.<br>
</p>
</body>
</html>

 

테이블 만들기

<table></table> : 테이블 범위 지정 ,여기에 속성을 주면 테이블 전체에 적용된다.

<tr></tr> : 테이블 세로쪽 셀 , 여기에 속성을 주면 해당열에 모든 셀에 영향을 준다.

<td></td> : 테이블 가로쪽 셀, 해당 셀에만 영향을 준다.

 

속성

<table> 태그 속성

<table 속성1="속성값1" 속성2="속성값2">

align : 테이블 전체 위치지정

┖ 값 : left, center,right

background : 테이블 배경화면으로 사용할 이미지 주소 지정

bgcolor : 테이블 배경색 지정

┖ RGB코드 or 영어 색 이름

border : 테이블 테두리 두께 지정

boardrcolor : 테이블 테두리 색 지정

cellpadding : 셀과 셀 내에 입력되는 데이터 사이 간격 지정

cellspacing : 테이블 내의 각 셀 사이의 간격 지정

width : 테이블 넓이 지정

height : 테이블 높이 지정

 

<tr> 태그 속성

valign : 셀 안에 있는 데이터의 세로위치 지정

┖ top, middle, bottom

 

<td> 태그 속성

colspan : 현재 셀과 다른 행의 셀을 병합

rowspan : 현재 셀과 다른 열의 셀을 병합

 

(예시)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ex01.html</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<table border="1" align="center">
<tr>
<td width="100">1행 1열</td>
<td width="100">1행 2열</td>
<td width="100">1행 3열</td>
</tr>
<tr align="center">
<td width="300">2행 1열</td>
<td width="300">2행 2열</td>
<td width="300">2행 3열</td>
</tr>
<tr align="center">
<td width="100">3행 1열</td>
<td width="100">3행 2열</td>
<td width="100">3행 3열</td>
</tr>
</table>




</body>
</html>

 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ex01.html</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<table border="1" align="center">
<tr>
<td width="100" rowspan="2">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="200" colspan="2">&nbsp;</td>
</tr>
</table>




</body>
</html>