<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>Dev Life Notes</title>
    <link>https://dimenshun.tistory.com/</link>
    <description>한 소년의 개발 일기</description>
    <language>ko</language>
    <pubDate>Thu, 28 May 2026 17:20:11 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>dimenshun</managingEditor>
    <image>
      <title>Dev Life Notes</title>
      <url>https://tistory1.daumcdn.net/tistory/7670943/attach/019c6ea692704cae97c5bde508703593</url>
      <link>https://dimenshun.tistory.com</link>
    </image>
    <item>
      <title>  허브</title>
      <link>https://dimenshun.tistory.com/271</link>
      <description>&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1157&quot; data-origin-height=&quot;424&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bvILK4/dJMcafZsEzp/FEDRNL9JoDO1QfYEChsz61/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bvILK4/dJMcafZsEzp/FEDRNL9JoDO1QfYEChsz61/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bvILK4/dJMcafZsEzp/FEDRNL9JoDO1QfYEChsz61/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbvILK4%2FdJMcafZsEzp%2FFEDRNL9JoDO1QfYEChsz61%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;702&quot; height=&quot;257&quot; data-origin-width=&quot;1157&quot; data-origin-height=&quot;424&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h1&gt;  네트워크 장비&lt;/h1&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;물리 계층의 대표장비 - 허브
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;최근에는 거의 사용되지 않는다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;데이터 링크 계층의 대표장비 - 스위치&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;⭐ 물리 계층에는 주소 개념이 &lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;없다&lt;/b&gt;&lt;/span&gt;!&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;단지 호스트와 통신 매체 간의 연결과 통신 매체상의 송수신이 이뤄질 뿐, 물리 계층 장비는 송수신되는 정보에 대한 어떠한 조작이나 판단도 하지 않음.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;⭐ 데이터링크 계층에는 주소 개념이 &lt;b&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt;있다&lt;/span&gt;&lt;/b&gt;!&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;MAC 주소&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;데이터 링크 계층 이상 장비들은 송수신지 특정, 조작 가능&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;✅ 허브&lt;/h2&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;물리 계층의 허브(Hub)&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;여러 대의&lt;/b&gt; &lt;b&gt;호스트를 연결&lt;/b&gt;하는 장치&lt;/li&gt;
&lt;li&gt;리피터 허브 혹은 이더넷 허브&lt;/li&gt;
&lt;li&gt;포트(port) - 커넥터를 연결할 수 있는 연결 지점&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bptMKY/dJMcaajycp6/Lyu4FKuqRRZYdQQAu2XRkK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bptMKY/dJMcaajycp6/Lyu4FKuqRRZYdQQAu2XRkK/img.png&quot; data-origin-width=&quot;739&quot; data-origin-height=&quot;381&quot; data-is-animation=&quot;false&quot; style=&quot;width: 50.1663%; margin-right: 10px;&quot; data-widthpercent=&quot;50.76&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bptMKY/dJMcaajycp6/Lyu4FKuqRRZYdQQAu2XRkK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbptMKY%2FdJMcaajycp6%2FLyu4FKuqRRZYdQQAu2XRkK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;739&quot; height=&quot;381&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Io5lv/dJMcadtLJaB/YVABNaQ3uh95fmYXnCu3F0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Io5lv/dJMcadtLJaB/YVABNaQ3uh95fmYXnCu3F0/img.png&quot; data-origin-width=&quot;828&quot; data-origin-height=&quot;440&quot; data-is-animation=&quot;false&quot; style=&quot;width: 48.671%;&quot; data-widthpercent=&quot;49.24&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Io5lv/dJMcadtLJaB/YVABNaQ3uh95fmYXnCu3F0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIo5lv%2FdJMcadtLJaB%2FYVABNaQ3uh95fmYXnCu3F0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;828&quot; height=&quot;440&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;1️⃣ 받은 정보는 모든 포트로 내보냄&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;정보에 대한 어떠한 &lt;u&gt;조작도 판단도 하지 않음&lt;/u&gt;&lt;/b&gt;(물리 계층 장비니까)&lt;/li&gt;
&lt;li&gt;전달받은 신호를 다른 모든 포트로 그대로 다시 내보냄
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;데이터 링크 계층&lt;/b&gt;에서 패킷의 MAC 주소를 확인하고 자신과 관련 없는 주소는 폐기&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;2️⃣ 반이중 통신&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;반이중 모드&lt;/b&gt; - 1차선 도로처럼 &lt;b&gt;송수신을 번갈아&lt;/b&gt; 가면서 하는 통신 방식
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;ex) 무전기&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;b&gt;전이중 모드&lt;/b&gt; - 송수신을 동시에 &lt;b&gt;양방향&lt;/b&gt;으로 할 수 있는 통신 방식
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;ex) 휴대전화&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;⚠️ 또 다른 물리 계층장비, 리피터&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;허브 이외 물리 계층의 대표적인 장비&lt;/li&gt;
&lt;li&gt;전기 신호가 감소하거나 왜곡되는 것을 방지하기 위해 &lt;b&gt;전기 신호를 증폭&lt;/b&gt; 시키는 장치&lt;/li&gt;
&lt;li&gt;리피터는 물리 계층의 장비이므로 신호에 대한 어떠한 판단이나 조작을 하지 않음
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;그저 신호를 증폭 시키기만 함&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;허브는 리피터의 상위 호환 ( 리피터 기능을 포함 하는 경우가 많음 )&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;❗충돌&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bvdDMU/dJMcajgruTN/9rlf8NlpSqyQ4tcWVFfRyK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bvdDMU/dJMcajgruTN/9rlf8NlpSqyQ4tcWVFfRyK/img.png&quot; data-origin-width=&quot;623&quot; data-origin-height=&quot;330&quot; data-is-animation=&quot;false&quot; style=&quot;width: 49.0309%; margin-right: 10px;&quot; data-widthpercent=&quot;49.61&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bvdDMU/dJMcajgruTN/9rlf8NlpSqyQ4tcWVFfRyK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbvdDMU%2FdJMcajgruTN%2F9rlf8NlpSqyQ4tcWVFfRyK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;623&quot; height=&quot;330&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bNycol/dJMcabW32Us/V6pHrelLGdzkr13MVKRiA0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bNycol/dJMcabW32Us/V6pHrelLGdzkr13MVKRiA0/img.png&quot; data-origin-width=&quot;746&quot; data-origin-height=&quot;389&quot; data-is-animation=&quot;false&quot; style=&quot;width: 49.8063%;&quot; data-widthpercent=&quot;50.39&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bNycol/dJMcabW32Us/V6pHrelLGdzkr13MVKRiA0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNycol%2FdJMcabW32Us%2FV6pHrelLGdzkr13MVKRiA0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;746&quot; height=&quot;389&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;동시에 허브에 신호를 송신하면 충돌(콜리전)이 발생&lt;/li&gt;
&lt;li&gt;허브에&lt;b&gt; 호스트가 많이 연결되어 있을수록 충돌 발생 가능성이 높다&lt;/b&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 콜리전 도메인 - 충돌이 발생할 수 있는 영역&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;허브에 연결된 모든 호스트는 같은 콜리전 도메인에 속함.&lt;/li&gt;
&lt;li&gt;당연히 충돌은 피해야 한다 &amp;rarr; 콜리전 도메인은 작아야 한다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;rarr; &lt;b&gt;스위치&lt;/b&gt;는 &lt;b&gt;콜리전 도메인을 줄이는 네트워크 장비&lt;/b&gt;이다.&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;  해결법&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 넒은 콜리전 도메인으로 인한 충돌, 어떻게 해결할까??&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;CSMA/CD 사용&lt;/li&gt;
&lt;li&gt;다른 네트워크 장비 사용 (스위치)&lt;/li&gt;
&lt;/ul&gt;</description>
      <category>CS/네트워크</category>
      <category>cs</category>
      <category>network</category>
      <category>네트워크</category>
      <category>물리계층</category>
      <category>허브</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/271</guid>
      <comments>https://dimenshun.tistory.com/271#entry271comment</comments>
      <pubDate>Thu, 18 Dec 2025 08:51:26 +0900</pubDate>
    </item>
    <item>
      <title>더 나아가, HTML5</title>
      <link>https://dimenshun.tistory.com/270</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span&gt;✅&lt;/span&gt; 새로운 제출 양식&lt;/h2&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;316&quot; data-origin-height=&quot;445&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/txeHv/dJMcaihxcNo/r4KnsKIHNOq6TMLSkgEa0k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/txeHv/dJMcaihxcNo/r4KnsKIHNOq6TMLSkgEa0k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/txeHv/dJMcaihxcNo/r4KnsKIHNOq6TMLSkgEa0k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtxeHv%2FdJMcaihxcNo%2Fr4KnsKIHNOq6TMLSkgEa0k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;316&quot; height=&quot;445&quot; data-origin-width=&quot;316&quot; data-origin-height=&quot;445&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&amp;nbsp;input 태그에는 다양한 타입들이 존재한다. ( 이것을 하나 하나 다 외우지말고, 필요할때 찾아서 사용할 것 !! )&lt;/li&gt;
&lt;/ul&gt;
&lt;pre id=&quot;code_1765196717164&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;body&amp;gt;
  &amp;lt;form action=&quot;form.php&quot;&amp;gt;
    &amp;lt;input type=&quot;number&quot; min=&quot;10&quot; max=&quot;15&quot;&amp;gt;
    &amp;lt;input type=&quot;submit&quot;&amp;gt;
  &amp;lt;/form&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/4yV5L/dJMcahbQQS2/TL3kW9wEVhkz6ru5469G6K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/4yV5L/dJMcahbQQS2/TL3kW9wEVhkz6ru5469G6K/img.png&quot; data-origin-width=&quot;311&quot; data-origin-height=&quot;477&quot; data-is-animation=&quot;false&quot; style=&quot;width: 15.1208%; margin-right: 10px;&quot; data-widthpercent=&quot;15.3&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/4yV5L/dJMcahbQQS2/TL3kW9wEVhkz6ru5469G6K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4yV5L%2FdJMcahbQQS2%2FTL3kW9wEVhkz6ru5469G6K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;311&quot; height=&quot;477&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/CDNXA/dJMcachjlgy/Z198MvwVJglXxFi06Eiku0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/CDNXA/dJMcachjlgy/Z198MvwVJglXxFi06Eiku0/img.png&quot; data-origin-width=&quot;296&quot; data-origin-height=&quot;82&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;84.7&quot; style=&quot;width: 83.7164%;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/CDNXA/dJMcachjlgy/Z198MvwVJglXxFi06Eiku0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCDNXA%2FdJMcachjlgy%2FZ198MvwVJglXxFi06Eiku0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;296&quot; height=&quot;82&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;input 타입 속성을 &lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;number&lt;/b&gt;&lt;/span&gt;로 줌으로써, 모바일 에서는 바로 입력 창이 숫자로 나타내는 것을 알 수 있다.&lt;/li&gt;
&lt;li&gt;&lt;b&gt;min, max&lt;/b&gt; 속성을 통해 최소값은 10, 최대값은 15로 지정하면 서버에 데이터를 보낼때 해당 범위 내 숫자 데이터가 들어가지 않으면 해당하는 &lt;b&gt;알림창&lt;/b&gt; 이 나타나게 된다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추가적으로 input 타입 속성을 소개 하겠다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/yDOgJ/dJMcajm9z1d/Aa79nsr5j5gZScKpm5RPS0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/yDOgJ/dJMcajm9z1d/Aa79nsr5j5gZScKpm5RPS0/img.png&quot; style=&quot;width: 25.8232%; margin-right: 10px;&quot; data-origin-width=&quot;240&quot; data-origin-height=&quot;251&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;26.44&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/yDOgJ/dJMcajm9z1d/Aa79nsr5j5gZScKpm5RPS0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyDOgJ%2FdJMcajm9z1d%2FAa79nsr5j5gZScKpm5RPS0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;240&quot; height=&quot;251&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c4jFQ7/dJMcacO9eKc/9U1KdVDygCR68pZ74K6pT0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c4jFQ7/dJMcacO9eKc/9U1KdVDygCR68pZ74K6pT0/img.png&quot; style=&quot;width: 49.0808%; margin-right: 10px;&quot; data-origin-width=&quot;398&quot; data-origin-height=&quot;219&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;50.25&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c4jFQ7/dJMcacO9eKc/9U1KdVDygCR68pZ74K6pT0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc4jFQ7%2FdJMcacO9eKc%2F9U1KdVDygCR68pZ74K6pT0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;398&quot; height=&quot;219&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bBuIGt/dJMcahXeQCC/nvaaFuBHJLJEBznJMmehZK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bBuIGt/dJMcahXeQCC/nvaaFuBHJLJEBznJMmehZK/img.png&quot; data-origin-width=&quot;215&quot; data-origin-height=&quot;255&quot; data-is-animation=&quot;false&quot; style=&quot;width: 22.7704%;&quot; data-widthpercent=&quot;23.31&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bBuIGt/dJMcahXeQCC/nvaaFuBHJLJEBznJMmehZK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbBuIGt%2FdJMcahXeQCC%2FnvaaFuBHJLJEBznJMmehZK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;215&quot; height=&quot;255&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;548&quot; data-origin-height=&quot;313&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bK7rka/dJMcadAtiSm/03hYQ7Hh0K0He8KeCub2z1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bK7rka/dJMcadAtiSm/03hYQ7Hh0K0He8KeCub2z1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bK7rka/dJMcadAtiSm/03hYQ7Hh0K0He8KeCub2z1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbK7rka%2FdJMcadAtiSm%2F03hYQ7Hh0K0He8KeCub2z1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;548&quot; height=&quot;313&quot; data-origin-width=&quot;548&quot; data-origin-height=&quot;313&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;✅ 입력 값 체크하기&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;앞서 input 타입의 속성인 &lt;b&gt;email, url&lt;/b&gt; 같은경우는 자동으로 형식에 맞춰서 &lt;b&gt;입력 값에 대한 검증&lt;/b&gt;을 받는다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;placeholder 속성은 &lt;b&gt;사용자가 입력하기 전에 설명을 나타내는 표시&lt;/b&gt;다.&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;html xml&quot; data-ke-language=&quot;html&quot;&gt;&lt;code&gt;&amp;lt;body&amp;gt;
  &amp;lt;form action=&quot;register.php&quot;&amp;gt;
    &amp;lt;input type=&quot;text&quot; name=&quot;id&quot; placeholder=&quot;아이디를 입력하세요.&quot; required
    pattern=&quot;[a-zA-Z].+&quot;&amp;gt;
    &amp;lt;input type=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;이메일 입력하세요.&quot; required&amp;gt;
    &amp;lt;input type=&quot;submit&quot;&amp;gt;
  &amp;lt;/form&amp;gt;
&amp;lt;/body&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✍️ 유효성&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;input 타입에 &lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;required&lt;/b&gt;&lt;/span&gt;를 선언하면, 해당하는 태그에는 &lt;b&gt;&lt;u&gt;무조건 입력값을 작성&lt;/u&gt;&lt;/b&gt;해야 한다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  정규 표현식 (패턴)&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;여기서 [ ] 괄호 내에 정규 표현식을 작성한다. 이때 [ ] 는 &lt;b&gt;알파벳 1글자&lt;/b&gt;를 의미한다.
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;[A-Za-z]&lt;/b&gt;&lt;/span&gt;는 대,소문자 A부터 Z형식 알파벳 1글자만의 형식을 허용한다.&lt;/li&gt;
&lt;li&gt;[A-Za-z]. 에서 &lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;.&lt;/b&gt;&lt;/span&gt;을 추가하면 모든 형식을 허용한다.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;+&lt;/b&gt;&lt;/span&gt; 는 어떤 문자건 하나라도 와야한다는 의미를 가진다.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;[0-9]&lt;/b&gt;&lt;/span&gt; 숫자의 표현은 0~9까지인 이런식 으로 작성할 수 있다.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://opentutorials.org/course/909/5142&quot;&gt;[참고] 정규 표현식이란? - 생활코딩&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1765201089055&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;university&quot; data-og-title=&quot;정규 표현식이란? - 생활코딩&quot; data-og-description=&quot;정규표현식 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이&quot; data-og-host=&quot;opentutorials.org&quot; data-og-source-url=&quot;https://opentutorials.org/course/909/5142&quot; data-og-url=&quot;https://opentutorials.org/course/909/5142&quot; data-og-image=&quot;&quot;&gt;&lt;a href=&quot;https://opentutorials.org/course/909/5142&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://opentutorials.org/course/909/5142&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url();&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;정규 표현식이란? - 생활코딩&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;정규표현식 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;opentutorials.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>프로그래밍/HTML,CSS</category>
      <category>html5</category>
      <category>web</category>
      <category>웹</category>
      <category>프론트엔드</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/270</guid>
      <comments>https://dimenshun.tistory.com/270#entry270comment</comments>
      <pubDate>Mon, 8 Dec 2025 22:39:08 +0900</pubDate>
    </item>
    <item>
      <title>[level 1] 잡은 물고기의 평균 길이 구하기 - 293259</title>
      <link>https://dimenshun.tistory.com/269</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a style=&quot;color: #4493f8; text-align: start;&quot; href=&quot;https://school.programmers.co.kr/learn/courses/30/lessons/293259&quot;&gt;문제 링크&lt;/a&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;사용 언어 : SQL&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;971&quot; data-origin-height=&quot;522&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cn2lIY/dJMcadN0nSS/lZ5VslLkXzdpz4D6q63gTk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cn2lIY/dJMcadN0nSS/lZ5VslLkXzdpz4D6q63gTk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cn2lIY/dJMcadN0nSS/lZ5VslLkXzdpz4D6q63gTk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcn2lIY%2FdJMcadN0nSS%2FlZ5VslLkXzdpz4D6q63gTk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;971&quot; height=&quot;522&quot; data-origin-width=&quot;971&quot; data-origin-height=&quot;522&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;pre id=&quot;code_1765196485122&quot; class=&quot;sql&quot; data-ke-language=&quot;sql&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;SELECT ROUND(AVG(IFNULL(LENGTH,10)), 2) &quot;AVERAGE_LENGTH&quot;
FROM FISH_INFO&lt;/code&gt;&lt;/pre&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ IFNULL, ROUND 함수&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;IFNULL(a, b)은 만약 a컬럼의 값이 NULL 값이라면, b로 대체한다는 의미를 가졌다.&lt;/li&gt;
&lt;li&gt;ROUND(a, b)는 반올림 하는 함수이며, a컬럼의 b번째 자리에다가 반올림을 해준다는 의미를 가진다.&lt;/li&gt;
&lt;/ul&gt;</description>
      <category>코딩테스트(Algorithm)/프로그래머스</category>
      <category>Java</category>
      <category>Python</category>
      <category>SQL</category>
      <category>알고리즘</category>
      <category>코딩테스트</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/269</guid>
      <comments>https://dimenshun.tistory.com/269#entry269comment</comments>
      <pubDate>Mon, 8 Dec 2025 21:23:39 +0900</pubDate>
    </item>
    <item>
      <title>[level 1] 조건에 부합하는 중고거래 댓글 조회하기 - 164673</title>
      <link>https://dimenshun.tistory.com/268</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a style=&quot;color: #4493f8; text-align: start;&quot; href=&quot;https://school.programmers.co.kr/learn/courses/30/lessons/164673&quot;&gt;문제 링크&lt;/a&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;사용 언어 : SQL&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1030&quot; data-origin-height=&quot;947&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bRFVBK/dJMcaiIwxnY/fwXCEQZYoQYCNuuFLYFOd1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bRFVBK/dJMcaiIwxnY/fwXCEQZYoQYCNuuFLYFOd1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bRFVBK/dJMcaiIwxnY/fwXCEQZYoQYCNuuFLYFOd1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbRFVBK%2FdJMcaiIwxnY%2FfwXCEQZYoQYCNuuFLYFOd1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1030&quot; height=&quot;947&quot; data-origin-width=&quot;1030&quot; data-origin-height=&quot;947&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;pre id=&quot;code_1764678213073&quot; class=&quot;sql&quot; data-ke-language=&quot;sql&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;SELECT U.TITLE, U.BOARD_ID, R.REPLY_ID, R.WRITER_ID, R.CONTENTS, 
DATE_FORMAT(R.CREATED_DATE, &quot;%Y-%m-%d&quot;) CREATED_DATE
FROM USED_GOODS_BOARD U JOIN USED_GOODS_REPLY R ON U.BOARD_ID = R.BOARD_ID
WHERE U.CREATED_DATE LIKE &quot;2022-10%&quot;
ORDER BY CREATED_DATE ASC, U.TITLE ASC;&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>코딩테스트(Algorithm)/프로그래머스</category>
      <category>Java</category>
      <category>Python</category>
      <category>SQL</category>
      <category>알고리즘</category>
      <category>코딩테스트</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/268</guid>
      <comments>https://dimenshun.tistory.com/268#entry268comment</comments>
      <pubDate>Tue, 2 Dec 2025 21:24:07 +0900</pubDate>
    </item>
    <item>
      <title>[level 2] 조건에 맞는 아이템들의 가격의 총합 구하기 - 273709</title>
      <link>https://dimenshun.tistory.com/267</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a style=&quot;color: #4493f8; text-align: start;&quot; href=&quot;https://school.programmers.co.kr/learn/courses/30/lessons/273709&quot;&gt;문제 링크&lt;/a&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;사용언어 : SQL&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;822&quot; data-origin-height=&quot;470&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/sJ8ly/dJMcad1uLSw/HMpiFgCye7OI6hBZ7QEWsK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/sJ8ly/dJMcad1uLSw/HMpiFgCye7OI6hBZ7QEWsK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/sJ8ly/dJMcad1uLSw/HMpiFgCye7OI6hBZ7QEWsK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsJ8ly%2FdJMcad1uLSw%2FHMpiFgCye7OI6hBZ7QEWsK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;822&quot; height=&quot;470&quot; data-origin-width=&quot;822&quot; data-origin-height=&quot;470&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;pre id=&quot;code_1764509222436&quot; class=&quot;sql&quot; data-ke-language=&quot;sql&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;SELECT SUM(PRICE) TOTAL_PRICE
FROM ITEM_INFO
WHERE RARITY = 'LEGEND'&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>코딩테스트(Algorithm)/프로그래머스</category>
      <category>Java</category>
      <category>Python</category>
      <category>SQL</category>
      <category>알고리즘</category>
      <category>코딩테스트</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/267</guid>
      <comments>https://dimenshun.tistory.com/267#entry267comment</comments>
      <pubDate>Sun, 30 Nov 2025 22:26:58 +0900</pubDate>
    </item>
    <item>
      <title>2. 표 만들기 (Table)</title>
      <link>https://dimenshun.tistory.com/266</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;⭐ 표 만들기&lt;/h2&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ 기본 태그 &amp;lt;Table&amp;gt;, &amp;lt;tr&amp;gt;, &amp;lt;td&amp;gt;&lt;/h3&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
  &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;table border=&quot;1&quot;&amp;gt;
    &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;이름&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;성별&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;주소&amp;lt;/td&amp;gt;
    &amp;lt;/tr&amp;gt;
    &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;최진혁&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;남자&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;경북 경산시&amp;lt;/td&amp;gt;
    &amp;lt;/tr&amp;gt;
    &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;안유빈&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;여자&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;경북 밀양시&amp;lt;/td&amp;gt;
    &amp;lt;/tr&amp;gt;
  &amp;lt;/table&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;186&quot; data-origin-height=&quot;104&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cAxbKO/dJMcacuJLA1/vK639nm5IslPtZzngztjf0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cAxbKO/dJMcacuJLA1/vK639nm5IslPtZzngztjf0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cAxbKO/dJMcacuJLA1/vK639nm5IslPtZzngztjf0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcAxbKO%2FdJMcacuJLA1%2FvK639nm5IslPtZzngztjf0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;186&quot; height=&quot;104&quot; data-origin-width=&quot;186&quot; data-origin-height=&quot;104&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저, 테이블을 만들기 위해선 &lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;table&amp;gt; &amp;lt;/table&amp;gt;&lt;/b&gt;&lt;/span&gt; 태그로 감싸줘야 한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;td&amp;gt; &amp;lt;/td&amp;gt;&lt;/b&gt;&lt;/span&gt; 태그는 &lt;u&gt;&lt;b&gt;항목(item)을 묶어주는 역할&lt;/b&gt;&lt;/u&gt;을 한다. (td는 &lt;u&gt;&lt;b&gt;table data&lt;/b&gt;&lt;/u&gt;를 의미 )&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;tr&amp;gt; &amp;lt;/tr&amp;gt;&lt;/b&gt;&lt;/span&gt; 태그는 &amp;lt;td&amp;gt;태그들을 &lt;u&gt;&lt;b&gt;그룹핑&lt;/b&gt;&lt;/u&gt;을 해주는 역할을 한다. ( tr은 &lt;u&gt;&lt;b&gt;table row&lt;/b&gt; &lt;/u&gt;즉, 행을 의미함.)&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;table의 속성인 &lt;b&gt;border = &amp;ldquo;1&amp;rdquo;&lt;/b&gt; 로 테두리 선을 그을수 있다. (숫자는&lt;b&gt; 선의 굵기&lt;/b&gt;를 의미함.)
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;요즘은 CSS라는 스타일 시트를 이용해서 더 좋게 꾸밀수 있음.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ 구조적으로 더 알아가기&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위의 태그들을 응용해서 추가적으로 살펴보자.&lt;/p&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;ko&quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
  &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;table border=&quot;1&quot;&amp;gt;
    &amp;lt;thead&amp;gt;
      &amp;lt;tr&amp;gt;
        &amp;lt;th&amp;gt;이름&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;성별&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;주소&amp;lt;/th&amp;gt; &amp;lt;th&amp;gt;회비&amp;lt;/th&amp;gt;
      &amp;lt;/tr&amp;gt;
    &amp;lt;/thead&amp;gt;
    &amp;lt;tbody&amp;gt;
      &amp;lt;tr&amp;gt;
        &amp;lt;td&amp;gt;최진혁&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;남자&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;경북 경산시&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;1000&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
        &amp;lt;td&amp;gt;안유빈&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;여자&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;경북 밀양시&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;200&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
    &amp;lt;/tbody&amp;gt;
    &amp;lt;tfoot&amp;gt;
      &amp;lt;td&amp;gt;합계&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;1500&amp;lt;/td&amp;gt;
    &amp;lt;/tfoot&amp;gt;
  &amp;lt;/table&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;221&quot; data-origin-height=&quot;133&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/EFrwx/dJMcaf54fSF/nOP1L6tD5osKSSZWqWdNKK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/EFrwx/dJMcaf54fSF/nOP1L6tD5osKSSZWqWdNKK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/EFrwx/dJMcaf54fSF/nOP1L6tD5osKSSZWqWdNKK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEFrwx%2FdJMcaf54fSF%2FnOP1L6tD5osKSSZWqWdNKK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;221&quot; height=&quot;133&quot; data-origin-width=&quot;221&quot; data-origin-height=&quot;133&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;제목으로 쓰던 td 태그를 &lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;thead&amp;gt; &amp;lt;/thead&amp;gt;&lt;/b&gt;&lt;/span&gt;로 감싸주고, &amp;lt;td&amp;gt;태그들을 &lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;th&amp;gt;&lt;/b&gt;&lt;/span&gt;로 바꿔주면 해당 테이블의 제목으로 보고 굵은 글씨와 가운데 정렬이 된다.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&amp;lt;tbody&amp;gt; &amp;lt;/tbody&amp;gt;&lt;/span&gt;태그를 통해 영역을 구분을 할수 있고, 추가적으로 &lt;span style=&quot;background-color: #9feec3;&quot;&gt;&amp;lt;tfoot&amp;gt; &amp;lt;/tfoot&amp;gt;&lt;/span&gt;태그로 마무리하는 구조를 볼수 있다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ 병합&lt;/h3&gt;
&lt;pre id=&quot;code_1763557822711&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;ko&quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
  &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;table border=&quot;1&quot;&amp;gt;
    &amp;lt;thead&amp;gt;
      &amp;lt;tr&amp;gt;
        &amp;lt;th&amp;gt;이름&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;성별&amp;lt;/th&amp;gt;&amp;lt;th&amp;gt;주소&amp;lt;/th&amp;gt; &amp;lt;th&amp;gt;회비&amp;lt;/th&amp;gt;
      &amp;lt;/tr&amp;gt;
    &amp;lt;/thead&amp;gt;
    &amp;lt;tbody&amp;gt;
      &amp;lt;tr&amp;gt;
        &amp;lt;td&amp;gt;최진혁&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;남자&amp;lt;/td&amp;gt;&amp;lt;td rowspan=&quot;2&quot;&amp;gt;경북 경산시&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;1000&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
        &amp;lt;td&amp;gt;안유빈&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;여자&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;200&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
    &amp;lt;/tbody&amp;gt;
    &amp;lt;tfoot&amp;gt;
      &amp;lt;td&amp;gt;합계&amp;lt;/td&amp;gt;&amp;lt;td colspan=&quot;2&quot;&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;1500&amp;lt;/td&amp;gt;
    &amp;lt;/tfoot&amp;gt;
  &amp;lt;/table&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;224&quot; data-origin-height=&quot;129&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/mp4QC/dJMcafkG7lI/lBwbfgd25c0nTNpwz7p9Qk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/mp4QC/dJMcafkG7lI/lBwbfgd25c0nTNpwz7p9Qk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/mp4QC/dJMcafkG7lI/lBwbfgd25c0nTNpwz7p9Qk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fmp4QC%2FdJMcafkG7lI%2FlBwbfgd25c0nTNpwz7p9Qk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;224&quot; height=&quot;129&quot; data-origin-width=&quot;224&quot; data-origin-height=&quot;129&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;행(수직 병합)&lt;/b&gt;을 병합하려면 태그의 속성에 &lt;b&gt;rowspan = &amp;ldquo;2&amp;rdquo;&lt;/b&gt; ( 2개의 행을 병합 할것이다. )&lt;/li&gt;
&lt;li&gt;&lt;b&gt;열(수평 병합)&lt;/b&gt;끼리 병합하려면 태그의 속성에&lt;b&gt; colspan = &amp;ldquo;2&amp;rdquo;&lt;/b&gt;&amp;nbsp;( 2개의 열을 병합 할 것이다. )&lt;/li&gt;
&lt;/ul&gt;</description>
      <category>프로그래밍/HTML,CSS</category>
      <category>html</category>
      <category>table</category>
      <category>web</category>
      <category>웹</category>
      <category>표</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/266</guid>
      <comments>https://dimenshun.tistory.com/266#entry266comment</comments>
      <pubDate>Wed, 19 Nov 2025 22:09:59 +0900</pubDate>
    </item>
    <item>
      <title>1. 기본 문법과 태그</title>
      <link>https://dimenshun.tistory.com/265</link>
      <description>&lt;h2 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size26&quot;&gt;⭐ 웹페이지 구조&lt;/h2&gt;
&lt;pre style=&quot;background-color: #f8f8f8; color: #383a42; text-align: start;&quot;&gt;&lt;code&gt;&amp;lt;html&amp;gt;
	&amp;lt;head&amp;gt;
	( 부가적인 정보 )
	&amp;lt;/head&amp;gt;
	&amp;lt;body&amp;gt;
	( 본문 내용 )
	&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;주로 부가적인 정보&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;head&amp;gt; &amp;lt;/head&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;태그 안에서 주로 쓰인다.&lt;/li&gt;
&lt;li&gt;&lt;b&gt;본문인 태그&lt;/b&gt;들은&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;body&amp;gt; &amp;lt;/body&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;태그 안에서 쓰이고 있다.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&amp;lt;html&amp;gt;태그&lt;/span&gt;는 &amp;lt;head&amp;gt;, &amp;lt;body&amp;gt; 태그를 감싸주는 역할로 약속을 해두었다.&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;❓ DOCTYPE&lt;/h3&gt;
&lt;pre class=&quot;apache&quot;&gt;&lt;code&gt;&amp;lt;!DOCKTYPE html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;DOCKTYPE은 이 브라우저에게 &lt;b&gt;&lt;u&gt;어떠한 표준을 따르고 있는 태그&lt;/u&gt;들&lt;/b&gt;인지를 알려주기 위함. ( 구조상 &lt;b&gt;최상단&lt;/b&gt;에 위치 )&lt;/p&gt;
&lt;h3 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size23&quot;&gt;✅ 태그는 열고 닫는다?&lt;/h3&gt;
&lt;pre id=&quot;code_1763554712088&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;h1&amp;gt;오늘의 명언&amp;lt;/h1&amp;gt;
	우리 모두는 &amp;lt;strong&amp;gt;자신의 힘&amp;lt;/strong&amp;gt;으로 발견한 내용을 가장 쉽게 익힌다.&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;501&quot; data-origin-height=&quot;105&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Z8lPy/dJMcabvPoPX/Pz1REiOtvY6ik67CNozr80/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Z8lPy/dJMcabvPoPX/Pz1REiOtvY6ik67CNozr80/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Z8lPy/dJMcabvPoPX/Pz1REiOtvY6ik67CNozr80/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZ8lPy%2FdJMcabvPoPX%2FPz1REiOtvY6ik67CNozr80%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;501&quot; height=&quot;105&quot; data-origin-width=&quot;501&quot; data-origin-height=&quot;105&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #006dd7;&quot;&gt;&amp;lt;strong&amp;gt;&lt;/span&gt;(텍스트)&lt;span style=&quot;background-color: #ee2323;&quot;&gt;&amp;lt;/strong&amp;gt;&lt;/span&gt; - &lt;b&gt;문자를 강조&lt;/b&gt;하게 표현한다. ( &lt;b&gt;텍스트&lt;/b&gt; )
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;파란&lt;/span&gt; 부분은 &lt;u&gt;&lt;b&gt;시작태그&lt;/b&gt;&lt;/u&gt;, &lt;span style=&quot;color: #ee2323;&quot;&gt;빨간&lt;/span&gt; 부분은 &lt;u&gt;&lt;b&gt;닫히는 태그&lt;/b&gt;&lt;/u&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;h1&amp;gt;(제목)&amp;lt;/h1&amp;gt;&lt;/b&gt; &lt;/span&gt;- h1 부터 h6까지 &lt;b&gt;제목을 나타내는&lt;/b&gt; 태그.&lt;/li&gt;
&lt;li&gt;HTML도 언어이기 때문에 규칙을 따라야 한다. 아무리 줄 띄어쓰기를 해도 변화가 없을 것임.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ 링크 연결 &amp;lt;a&amp;gt;태그&lt;/h3&gt;
&lt;pre id=&quot;code_1763554797448&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;body&amp;gt;
	&amp;lt;h1&amp;gt;오늘의 명언&amp;lt;/h1&amp;gt;
	  우리 모두는 &amp;lt;strong&amp;gt;자신의 힘&amp;lt;/strong&amp;gt;으로 발견한 내용을 가장 쉽게 익힌다.
	  (&amp;lt;a href=&quot;https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4&quot; target=&quot;_blank&quot; title=&quot;인물 정보&quot; &amp;gt;도널드 커누스&amp;lt;/a&amp;gt;) 
&amp;lt;/body&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;538&quot; data-origin-height=&quot;185&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/pTknq/dJMcabCASDg/dnFkt4aldGLNgBTsWHFmU1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/pTknq/dJMcabCASDg/dnFkt4aldGLNgBTsWHFmU1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/pTknq/dJMcabCASDg/dnFkt4aldGLNgBTsWHFmU1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpTknq%2FdJMcabCASDg%2FdnFkt4aldGLNgBTsWHFmU1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;538&quot; height=&quot;185&quot; data-origin-width=&quot;538&quot; data-origin-height=&quot;185&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;a&amp;gt; &amp;lt;/a&amp;gt;&lt;/b&gt;&lt;/span&gt; - &lt;u&gt;&lt;b&gt;링크&lt;/b&gt;&lt;/u&gt;를 걸어두는 태그 (anchor의 약자)
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;태그에는 &lt;b&gt;속성&lt;/b&gt;이라는 기능을 가지고 있다.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;href = &amp;ldquo; (경로명) &amp;ldquo;&lt;/b&gt;&lt;/span&gt; - 링크를 클릭시 해당 경로로 이동함.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;target = &amp;ldquo;_blink&amp;rdquo;&lt;/b&gt;&lt;/span&gt; - 새로운 탭으로 열음.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;title = &amp;ldquo;인물 정보&amp;rdquo;&lt;/b&gt;&lt;/span&gt; - 해당 태그에 마우스를 갖다대면, 툴팁을 보여줌.&lt;/li&gt;
&lt;li&gt;어떤 속성이 먼저 앞에 있든 뒤에 있든 순서는 중요하지 않음.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ 리스트 나열 &amp;lt;li&amp;gt;, 그룹핑 &amp;lt;ol&amp;gt;, &amp;lt;ul&amp;gt; 태그&lt;/h3&gt;
&lt;pre id=&quot;code_1763554887110&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;body&amp;gt;
  &amp;lt;ol&amp;gt;
    &amp;lt;li&amp;gt;기술소개&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;기본문법&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;하이퍼텍스트와 속성&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;리스트와 태그의 중첩&amp;lt;/li&amp;gt;
  &amp;lt;/ol&amp;gt;

  &amp;lt;ul&amp;gt;
    &amp;lt;li&amp;gt;최진혁&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;최유빈&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;한이람&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;한이은&amp;lt;/li&amp;gt;
  &amp;lt;/ul&amp;gt;
&amp;lt;/body&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;206&quot; data-origin-height=&quot;224&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/NHrKG/dJMcadG8mJw/YARRYubv98tkvOxOvgYZoK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/NHrKG/dJMcadG8mJw/YARRYubv98tkvOxOvgYZoK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/NHrKG/dJMcadG8mJw/YARRYubv98tkvOxOvgYZoK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNHrKG%2FdJMcadG8mJw%2FYARRYubv98tkvOxOvgYZoK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;206&quot; height=&quot;224&quot; data-origin-width=&quot;206&quot; data-origin-height=&quot;224&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;li&amp;gt; &amp;lt;/li&amp;gt; -&lt;/b&gt;&lt;/span&gt; &lt;b&gt;리스트를 나열&lt;/b&gt; 하는 태그 (list의 약자)&lt;/li&gt;
&lt;li&gt;주로 그룹핑할때 쓰이는 태그들로 &amp;lt;li&amp;gt;태그와 같이 쓰인다.
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;ul&amp;gt; &amp;lt;/ul&amp;gt;&lt;/b&gt;&lt;/span&gt; - &lt;b&gt;순서없이 나열&lt;/b&gt;하는 태그 (unordered list 약자)&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;ol &amp;lt;/ol&amp;gt;&lt;/b&gt;&lt;/span&gt; - &lt;b&gt;순서가 있게 나열&lt;/b&gt;하는 태그 (ordered list약자)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ 웹 페이지 제목 &amp;lt;title&amp;gt;과 문자 코드 맞추기&lt;/h3&gt;
&lt;pre id=&quot;code_1763554924600&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
  &amp;lt;title&amp;gt;HTML - 수업소개&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;h1&amp;gt;HTML&amp;lt;/h1&amp;gt;
  &amp;lt;ol&amp;gt;
    &amp;lt;li&amp;gt;기술소개&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;기본문법&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;하이퍼텍스트와 속성&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;리스트와 태그의 중첩&amp;lt;/li&amp;gt;
  &amp;lt;/ol&amp;gt;

  &amp;lt;h2&amp;gt;선행학습&amp;lt;/h2&amp;gt;
  &amp;lt;p&amp;gt;
    본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된&amp;lt;br&amp;gt;
    수업은 아래 링크를 통해서 접근하실 수 있습니다.
  &amp;lt;/p&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;해당 부분들은 위 태그들과 다르게 부가적인 태그들이다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;title&amp;gt;(제목)&amp;lt;/title&amp;gt;&lt;/b&gt; &lt;/span&gt;- 웹 페이지의 제목을 설정하는 태그&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;892&quot; data-origin-height=&quot;288&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/kyApx/dJMcahivAg9/lx7Ri3OrKi7JicSv6q3GK1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/kyApx/dJMcahivAg9/lx7Ri3OrKi7JicSv6q3GK1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/kyApx/dJMcahivAg9/lx7Ri3OrKi7JicSv6q3GK1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkyApx%2FdJMcahivAg9%2Flx7Ri3OrKi7JicSv6q3GK1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;892&quot; height=&quot;288&quot; data-origin-width=&quot;892&quot; data-origin-height=&quot;288&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;글씨가 깨지는 경우가 있다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;**&amp;lt;meta charset=&amp;rdquo;UTF-8&amp;rdquo;&amp;gt;**&lt;/b&gt;&lt;/span&gt;로 지정한다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span&gt;✅&lt;/span&gt; 단락 &amp;lt;p&amp;gt;태그&lt;/h3&gt;
&lt;pre id=&quot;code_1763555169474&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
  &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;p&amp;gt;[1] Hypertext Markup Language (HTML) is the standard markup language[a] for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.&amp;lt;/p&amp;gt;
  &amp;lt;p&amp;gt;[2] Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.&amp;lt;/p&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt; &amp;lt;p&amp;gt; &amp;lt;/p&amp;gt;&lt;/b&gt;&lt;/span&gt;태그는 &lt;b&gt;paragraph&lt;/b&gt;의 약자로, &amp;ldquo;&lt;b&gt;&lt;span data-token-index=&quot;1&quot;&gt;단락&lt;/span&gt;&lt;/b&gt;&amp;rdquo; 을 의미한다. 주로 텍스트의 단락을 구분할때 쓰인다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span&gt;✅&lt;/span&gt; 줄바꿈 &amp;lt;br&amp;gt;태그&lt;/h3&gt;
&lt;pre id=&quot;code_1763555220199&quot; class=&quot;html xml&quot; data-ke-language=&quot;html&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
  &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;p&amp;gt;[1] Hypertext Markup Language (HTML) is the standard markup language[a] for documents designed to be displayed in a web browser.&amp;lt;br&amp;gt; It defines the content and structure of web content.&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.&amp;lt;/p&amp;gt;
  &amp;lt;p&amp;gt;[2] Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.&amp;lt;br&amp;gt; HTML describes the structure of a web page semantically and originally included cues for its appearance.&amp;lt;/p&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;br&amp;gt;&lt;/b&gt;&lt;/span&gt;태그는 A forced line-break의 약자로, &amp;ldquo;강제로 줄을 바꾼다&amp;rdquo; 라는 의미를 가진 태그이다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&amp;lt;br&amp;gt; 태그는 &lt;b&gt;닫는 태그가 없다.&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;두번쓰면 두번 줄바꿈되며, 선언한 태그 수에 따라 줄바꿈 처리된다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ 이미지 &amp;lt;img&amp;gt;태그&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;http://pixa.bay.com&quot;&gt;pixa.bay.com&lt;/a&gt; - 이미지 생성 사이트 ( 저작권 X )&lt;/p&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
  &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
  &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;img src=&quot;./img/flowers1.jpg&quot; alt=&quot;꽃 이미지&quot; width=&quot;150&quot; height=&quot;200&quot;&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&amp;lt;img&amp;gt;&lt;/b&gt; &lt;/span&gt;태그는 웹 페이지에 이미지를 포함하는 태그를 말한다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;src = &amp;ldquo;경로&lt;/b&gt;&amp;rdquo;&lt;/span&gt; - &lt;b&gt;이미지의 경로&lt;/b&gt;를 설정한다.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;alt = &amp;ldquo;(설명)&amp;rdquo;&lt;/b&gt;&lt;/span&gt; - 이미지를 불러올 수 없을때, &lt;b&gt;텍스트(설명)로 대체&lt;/b&gt;한다.&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;width , height&lt;/b&gt; &lt;/span&gt;- &lt;b&gt;가로, 세로 길이와 비율을 설정&lt;/b&gt;할 수 있다.
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;가로 100은 100픽셀, 50%는 웹페이지의 50%크기를 의미.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;⏰ 변천사와 통계&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;HTML 연대기&lt;/li&gt;
&lt;li&gt;HTML 통계&lt;/li&gt;
&lt;/ul&gt;
&lt;figure id=&quot;og_1763555079743&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;HTML Study - AWR SEO Guide&quot; data-og-description=&quot;This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.&quot; data-og-host=&quot;www.advancedwebranking.com&quot; data-og-source-url=&quot;https://www.advancedwebranking.com/seo/html-study&quot; data-og-url=&quot;https://www.advancedwebranking.com/seo/html-study&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/b87SaT/hyZN5zzgiD/8ixkvoJCOHsYAqV3W6kqcK/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/ieqNB/hyZNX4clNu/18Gr4PAmnmurS2BCwwJLk0/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/MxKlS/hyZOepJPem/z1FFceVQm6ctd0HrKJxamK/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080&quot;&gt;&lt;a href=&quot;https://www.advancedwebranking.com/seo/html-study&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://www.advancedwebranking.com/seo/html-study&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/b87SaT/hyZN5zzgiD/8ixkvoJCOHsYAqV3W6kqcK/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/ieqNB/hyZNX4clNu/18Gr4PAmnmurS2BCwwJLk0/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/MxKlS/hyZOepJPem/z1FFceVQm6ctd0HrKJxamK/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;HTML Study - AWR SEO Guide&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;www.advancedwebranking.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;주로 쓰는 HTML 태그들의 빈도 수를 나타낸다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;개발자들이 가장 많이 쓰는 태그들 위주로 학습하는 것이 좋을 것이고, 빈도수가 낮은 태그들은 검색해서 찾아서 쓰는것이 바람직하다.&lt;/p&gt;</description>
      <category>프로그래밍/HTML,CSS</category>
      <category>html</category>
      <category>web</category>
      <category>웹</category>
      <category>태그</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/265</guid>
      <comments>https://dimenshun.tistory.com/265#entry265comment</comments>
      <pubDate>Wed, 19 Nov 2025 21:28:35 +0900</pubDate>
    </item>
    <item>
      <title>  이더넷 ( 연결 매체, 프레임 )</title>
      <link>https://dimenshun.tistory.com/264</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;  이더넷 (Ethernet)&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;현대 LAN, 특히 유선 LAN 환경에서 가장 대중적으로 사용되는 기술&lt;/li&gt;
&lt;li&gt;다양한 통신 매체의 규격, 송수신되는 프레임의 형태, 프레임을 주고받는 방법 등이 정의된 기술
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;물리 계층과 데이터 링크 계층이 밀접하게 연관된 이유!&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;920&quot; data-origin-height=&quot;311&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/nP9me/btsQK2z8YLn/nYXcMTIK8WOzLYbJPzXSPK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/nP9me/btsQK2z8YLn/nYXcMTIK8WOzLYbJPzXSPK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/nP9me/btsQK2z8YLn/nYXcMTIK8WOzLYbJPzXSPK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnP9me%2FbtsQK2z8YLn%2FnYXcMTIK8WOzLYbJPzXSPK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;624&quot; height=&quot;211&quot; data-origin-width=&quot;920&quot; data-origin-height=&quot;311&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 유선 LAN 환경은 대부분 이더넷을 기반으로 구성&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;물리 계층에서는 사용되는 케이블? 이더넷 규격을 따름&lt;/li&gt;
&lt;li&gt;데이터 링크 계층에서 주고받는 프레임? 이더넷 프레임의 형식을 따름&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 국제 표준으로써의 이더넷&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;모두 특정 이더넷을 표준을 이해하고, 따른다고 봐도 무방함.&lt;/li&gt;
&lt;li&gt;이더넷은 &lt;b&gt;IEEE 802.3&lt;/b&gt;이란 이름으로 국제 표준이 됨&lt;/li&gt;
&lt;li&gt;IEEE 802.3 == 이더넷 관련 &lt;span style=&quot;color: #f89009;&quot;&gt;&lt;b&gt;다양한 표준&lt;/b&gt;&lt;/span&gt;의 모음&lt;/li&gt;
&lt;li&gt;&amp;ldquo;이더넷 표준에 따라 지원되는 네트워크 장비, 통신 매체의 종류, 전송 속도 등이 달라짐&amp;rdquo;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 이더넷 표준에 따라 통신 매체의 종류, 속도가 달라진다?&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;423&quot; data-origin-height=&quot;192&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/moEtT/btsQM44wPFd/QyK9SLVyOOSQKXxkkeL1KK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/moEtT/btsQM44wPFd/QyK9SLVyOOSQKXxkkeL1KK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/moEtT/btsQM44wPFd/QyK9SLVyOOSQKXxkkeL1KK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmoEtT%2FbtsQM44wPFd%2FQyK9SLVyOOSQKXxkkeL1KK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;423&quot; height=&quot;192&quot; data-origin-width=&quot;423&quot; data-origin-height=&quot;192&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 전송 속도&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;숫자만 표기되어 있으면 &lt;b&gt;Mbps&lt;/b&gt; 속도&lt;/li&gt;
&lt;li&gt;숫자 뒤에 G가 붙는 경우 &lt;b&gt;Gbps&lt;/b&gt; 속도&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;(100Base-T 케이블은 100Mbps 속도 지원, 10GBASE-T는 10Gbps 속도 지원)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;전송 속도 표기 의미&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;10Mbps&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;100&lt;/td&gt;
&lt;td&gt;100Mbps&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;1000&lt;/td&gt;
&lt;td&gt;1000Mbps(1Gbps)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2.5G&lt;/td&gt;
&lt;td&gt;2.5Gbps&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;5G&lt;/td&gt;
&lt;td&gt;5Gbps&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;10G&lt;/td&gt;
&lt;td&gt;10Gbps&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;40G&lt;/td&gt;
&lt;td&gt;40Gbps&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;100G&lt;/td&gt;
&lt;td&gt;100Gbps&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ BASE&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;BASE는 베이스 밴드의 약자로, 변조 타입을 의미&lt;/li&gt;
&lt;li&gt;변조 타입 - 비트 신호로 변환된 데이터를 통신 매체로 전송하는 방법&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  고속 이더넷 &amp;amp; 기가비트 이더넷&lt;/h3&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;이더넷은 지금도 계속 발전하는 중&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;고속 이더넷
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;100Mbps 가량 속도를 지원하는 표준&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;기가비트 이더넷
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;1Gbps 가량 속도를 내는 이더넷 표준&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;10기가 비트 이더넷
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;10Gbps 가량 속도를 내는 이더넷 표&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  통신 매체&lt;/h2&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;종류&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추가 특성 표기(통신 매체의 종류) 케이블 종류&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;C&lt;/td&gt;
&lt;td&gt;동축 케이블&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;T&lt;/td&gt;
&lt;td&gt;트위스티드 페어 케이블&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;S&lt;/td&gt;
&lt;td&gt;단파장 광섬유 케이블&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;L&lt;/td&gt;
&lt;td&gt;장파장 광섬유 케이블&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;948&quot; data-origin-height=&quot;339&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/8dvj8/btsQNsYpB2Q/MAv3CqChLvoK5wdzRbcul1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/8dvj8/btsQNsYpB2Q/MAv3CqChLvoK5wdzRbcul1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/8dvj8/btsQNsYpB2Q/MAv3CqChLvoK5wdzRbcul1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8dvj8%2FbtsQNsYpB2Q%2FMAv3CqChLvoK5wdzRbcul1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;623&quot; height=&quot;223&quot; data-origin-width=&quot;948&quot; data-origin-height=&quot;339&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  이더넷 프레임&lt;/h2&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;1️⃣ (데이터 링크 계층) 이더넷 네트워크에서 주고 받는 프레임&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;캡슐화를 거쳐 송신됨 : 상위 계층 정보 + 헤더 + 트레일러
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;헤더 - 프리앰블, &lt;span style=&quot;color: #006dd7;&quot;&gt;&lt;b&gt;수신지 MAC 주소, 송신지 MAC 주소&lt;/b&gt;&lt;/span&gt;, 타입/길이&lt;/li&gt;
&lt;li&gt;페이로드 - 데이터&lt;/li&gt;
&lt;li&gt;트레일러 - FCS&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;역캡슐화를 거쳐 수신됨
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;헤더, 트레일러 제거 후 상위 계층으로 올려보냄&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;838&quot; data-origin-height=&quot;123&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/kHtzi/btsQM0VoJ0W/ojHkQUEh802OqMWqQrnHTK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/kHtzi/btsQM0VoJ0W/ojHkQUEh802OqMWqQrnHTK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/kHtzi/btsQM0VoJ0W/ojHkQUEh802OqMWqQrnHTK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkHtzi%2FbtsQM0VoJ0W%2FojHkQUEh802OqMWqQrnHTK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;681&quot; height=&quot;100&quot; data-origin-width=&quot;838&quot; data-origin-height=&quot;123&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 프리앰블(preamble)&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;이더넷 프레임의 시작을 알리는 8바이트(64비트) 크기의 정보&lt;/li&gt;
&lt;li&gt;첫 7바이트는 10101010 값을 가지고, 마지막 바이트는 10101011 값을 가짐&lt;/li&gt;
&lt;li&gt;송수신지 간의 동기화를 위해 사용되는 정보&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;778&quot; data-origin-height=&quot;154&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cjMQMa/btsQM9q7VMu/kQJwkJ9Edem4uPYcNVUTr1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cjMQMa/btsQM9q7VMu/kQJwkJ9Edem4uPYcNVUTr1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cjMQMa/btsQM9q7VMu/kQJwkJ9Edem4uPYcNVUTr1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcjMQMa%2FbtsQM9q7VMu%2FkQJwkJ9Edem4uPYcNVUTr1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;727&quot; height=&quot;144&quot; data-origin-width=&quot;778&quot; data-origin-height=&quot;154&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 수신지 MAC주소와 송신지 MAC주소&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&amp;lsquo;물리적 주소&amp;rsquo;라고도 불림&lt;/li&gt;
&lt;li&gt;일반적으로 고유하고, 일반적으로 &lt;b&gt;변경되지 않는 주소&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;MAC주소는 &lt;b&gt;네트워크 인터페이스마다 부여&lt;/b&gt;되는 6바이트(48비트) 길이의 주소
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;LAN내 송/수신지 특정&lt;/li&gt;
&lt;li&gt;일반적으로 NIC(Network Interface Controller) 장치가 네트워크 인터페이스 역할을 담당&lt;/li&gt;
&lt;li&gt;한 컴퓨터에 MAC주소도 여러 개 있을 수 있음.&lt;/li&gt;
&lt;li&gt;cmd &amp;rarr; ipconfig/all 하면 확인 ⭕&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 타입/길이&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;타입 혹은 길이 명시&lt;/li&gt;
&lt;li&gt;필드에 명시된 크기가 &lt;b&gt;1500(16진수 05DC) 이하&lt;/b&gt;일 경우 : 이 필드는 프레임의 크기(길이)&lt;/li&gt;
&lt;li&gt;필드에 명시된 크기가 &lt;b&gt;1536(16진수 0600) 이상&lt;/b&gt;일 경우 : 이 필드는 타입&lt;/li&gt;
&lt;li&gt;타입이란?
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;이더타입(ethertype)이라고도 함.&lt;/li&gt;
&lt;li&gt;&amp;lsquo;&lt;b&gt;어떤 정보를 캡슐화 했는지&lt;/b&gt;&amp;rsquo;를 나타내는 정보&lt;/li&gt;
&lt;li&gt;대표적으로 &lt;b&gt;상위 계층에서 사용된 프로토콜&lt;/b&gt;이 명시&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;타입 프로토콜&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;0800&lt;/td&gt;
&lt;td&gt;IPv4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;86DD&lt;/td&gt;
&lt;td&gt;IPv6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;0806&lt;/td&gt;
&lt;td&gt;ARP&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 데이터&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;페이로드, 상위 계층에서 전달받거나 전달해야 할 내용&lt;/li&gt;
&lt;li&gt;최대, 최소 크기 : 1500바이트, 46바이트
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;46바이트보다 작다면 크기 맞추기 용 데이터인 패딩이 채워짐 ( 보통 0으로 채워짐 )&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ FCS(Frame Check Sequence)&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;오류 검출용 정보 : FCS는 수신한 이더넷 프레임에 오류가 있는지 확인하기 위한 필드
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;이 필드에는 &lt;b&gt;CRC(Cyclic Redundancy Check&lt;/b&gt;)라는 오류 검출용 값이 명시됨.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</description>
      <category>CS/네트워크</category>
      <category>cs</category>
      <category>Ethernet</category>
      <category>네트워크</category>
      <category>연결매체</category>
      <category>이더넷</category>
      <category>프레임</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/264</guid>
      <comments>https://dimenshun.tistory.com/264#entry264comment</comments>
      <pubDate>Wed, 24 Sep 2025 11:38:50 +0900</pubDate>
    </item>
    <item>
      <title>네트워크 미시적으로 살펴보기 ( 프로토콜, 참조 모델, 캡슐화/역캡슐화 )</title>
      <link>https://dimenshun.tistory.com/263</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span&gt; &lt;/span&gt; 프로토콜&lt;/h2&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 택배로 책을 보내는 예시&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;멀리 떨어진 &amp;ldquo;&lt;b&gt;영수(수신지 호스트)&lt;/b&gt;&amp;rdquo; 에게 택배로 책을 선물
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;선물할 &lt;b&gt;책(페이로드)&lt;/b&gt;을 택배 상자에 넣기&lt;/li&gt;
&lt;li&gt;배송 주소 등 택배 기사가 읽을 &lt;b&gt;메시지(헤더)&lt;/b&gt;를 작성하고 첨부&lt;/li&gt;
&lt;li&gt;&lt;u&gt;&lt;b&gt;택배 기사(네트워크 장비)&lt;/b&gt;&lt;/u&gt;를 통해 발송&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;택배를 올바르게 주고 받으려면? &lt;b&gt;언어&lt;/b&gt;가 통해야 한다!
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&amp;lsquo;나&amp;rsquo;와 &amp;lsquo;영수&amp;rsquo;가 이해하는 언어&lt;/li&gt;
&lt;li&gt;&amp;lsquo;나&amp;rsquo;와 &amp;lsquo;택배 기사&amp;rsquo;가 이해하는 언어&lt;/li&gt;
&lt;li&gt;&amp;lsquo;택배 기사&amp;rsquo;와 &amp;lsquo;택배 기사&amp;rsquo;가 이해하는 언어&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;453&quot; data-origin-height=&quot;334&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/byIfN4/btsQJ0t5pOc/cm93Db4LLLSLRrK2lUITlK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/byIfN4/btsQJ0t5pOc/cm93Db4LLLSLRrK2lUITlK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/byIfN4/btsQJ0t5pOc/cm93Db4LLLSLRrK2lUITlK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbyIfN4%2FbtsQJ0t5pOc%2Fcm93Db4LLLSLRrK2lUITlK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;433&quot; height=&quot;319&quot; data-origin-width=&quot;453&quot; data-origin-height=&quot;334&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  네트워크 세상의 언어, 프로토콜&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;프로토콜(protocol) : 노드 간 정보를 올바르게 주고받기 위해 합의된 규칙이나 방법&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;812&quot; data-origin-height=&quot;391&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/YoWA6/btsQGqhi5qA/VmjYk1kMU6Mv7T0IKyDFJK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/YoWA6/btsQGqhi5qA/VmjYk1kMU6Mv7T0IKyDFJK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/YoWA6/btsQGqhi5qA/VmjYk1kMU6Mv7T0IKyDFJK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYoWA6%2FbtsQGqhi5qA%2FVmjYk1kMU6Mv7T0IKyDFJK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;579&quot; height=&quot;279&quot; data-origin-width=&quot;812&quot; data-origin-height=&quot;391&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;rarr; 통신 과정에서 일반적으로 여러 프로토콜을 함께 사용&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;프로토콜 학습의 중점, &lt;b&gt;목적&lt;/b&gt;과 &lt;b&gt;특징&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;IP는 패킷을 수신지까지 전달하기 위해 사용되는 프로토콜이다.&lt;/li&gt;
&lt;li&gt;ARP는 &lt;b&gt;192.168.1.1&lt;/b&gt;과 같은 형태의 &amp;lsquo;&lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;IP 주소&lt;/b&gt;&lt;/span&gt;&amp;rsquo;를 &lt;b&gt;A1:B2:C3:D4:E5:F6&lt;/b&gt;과 같은 형태의 &amp;lsquo;&lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;MAC 주소&lt;/b&gt;&amp;rsquo;&lt;/span&gt;로 대응하기 위해 사용되는 프로토콜이다.&lt;/li&gt;
&lt;li&gt;HTTPS(443)는 HTTP(80)에 비해 보안상 더 안전한 프로토콜이다.&lt;/li&gt;
&lt;li&gt;TCP는 UDP에 비해 일반적으로 느리지만, 신뢰성이 높은 프로토콜이다.&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;모든 프로토콜에는 목적과 특징이 있다.&lt;/h3&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  네트워크 참조 모델&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;통신이 이루어진 각 과정을 계층으로 나눈 구조&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;820&quot; data-origin-height=&quot;567&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bRdePy/btsQHt5oQdB/R8LK8GX3sqk0CBGbTWY5ek/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bRdePy/btsQHt5oQdB/R8LK8GX3sqk0CBGbTWY5ek/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bRdePy/btsQHt5oQdB/R8LK8GX3sqk0CBGbTWY5ek/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbRdePy%2FbtsQHt5oQdB%2FR8LK8GX3sqk0CBGbTWY5ek%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;539&quot; height=&quot;373&quot; data-origin-width=&quot;820&quot; data-origin-height=&quot;567&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span&gt;✅&lt;/span&gt; 네트워크를 통해 송수신하는 과정&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1094&quot; data-origin-height=&quot;500&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/HQAwX/btsQHDmzWNC/hEkQSpvlmPQb2WCSKVC1lK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/HQAwX/btsQHDmzWNC/hEkQSpvlmPQb2WCSKVC1lK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/HQAwX/btsQHDmzWNC/hEkQSpvlmPQb2WCSKVC1lK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHQAwX%2FbtsQHDmzWNC%2FhEkQSpvlmPQb2WCSKVC1lK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;593&quot; height=&quot;271&quot; data-origin-width=&quot;1094&quot; data-origin-height=&quot;500&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;정형화된 여러 단계가 있다.&lt;/li&gt;
&lt;li&gt;이 단계는 계층적으로 표현 가능&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 통신 과정을 계층적으로 나눈 이유&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;네트워크 구성과 설계가 용이&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span&gt;☕&lt;/span&gt; 대표적인 참조 모델&lt;/h3&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;576&quot; data-origin-height=&quot;345&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bZndV5/btsQIY4FuKS/fnQSiXWnSD4CnbcegkcjU0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bZndV5/btsQIY4FuKS/fnQSiXWnSD4CnbcegkcjU0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bZndV5/btsQIY4FuKS/fnQSiXWnSD4CnbcegkcjU0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbZndV5%2FbtsQIY4FuKS%2FfnQSiXWnSD4CnbcegkcjU0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;576&quot; height=&quot;345&quot; data-origin-width=&quot;576&quot; data-origin-height=&quot;345&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;⭐ OSI 모델 (7계층)&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;국제 표준화 기구 ISO에서 만든 네트워크 참조 모델&lt;/li&gt;
&lt;/ul&gt;
&lt;table id=&quot;275cef54-a356-80e4-842c-e6e7d309f2a9&quot; style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr id=&quot;275cef54-a356-8015-88b3-cd237c27267a&quot;&gt;
&lt;td id=&quot;uIyP&quot;&gt;7️⃣ 응용 계층&lt;/td&gt;
&lt;td id=&quot;qg:N&quot;&gt;사용자 및 사용자가 이용하는 응용 프로그램에 다양한 네트워크 서비스&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8093-92ae-e3c4d25f2d90&quot;&gt;
&lt;td id=&quot;uIyP&quot;&gt;6️⃣ 표현 계층&lt;/td&gt;
&lt;td id=&quot;qg:N&quot;&gt;문자가 &lt;b&gt;컴퓨터가 이해할 수 있는 코드(인코딩)&lt;/b&gt;로 변환하거나, 압축, 암호화&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8015-b302-f54f5aa39ef7&quot;&gt;
&lt;td id=&quot;uIyP&quot;&gt;5️⃣ 세션 계층&lt;/td&gt;
&lt;td id=&quot;qg:N&quot;&gt;세션(통신을 주고받는 호스트이 응용 프로그램 간 연결 상태)을 관리&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-80b7-935e-c04533b000d4&quot;&gt;
&lt;td id=&quot;uIyP&quot;&gt;4️⃣ 전송 계층&lt;/td&gt;
&lt;td id=&quot;qg:N&quot;&gt;신뢰성 있고, 안정성 있는 전송을 해야 할 때 필요한 계층&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8031-b122-ddc8ff9af6ec&quot;&gt;
&lt;td id=&quot;uIyP&quot;&gt;3️⃣ 네트워크 계층&lt;/td&gt;
&lt;td id=&quot;qg:N&quot;&gt;메시지를 (다른 네트워크에 속한) 수신지까지 전달하는 계층&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8017-be69-f3841d8c1793&quot;&gt;
&lt;td id=&quot;uIyP&quot;&gt;2️⃣ 데이터 링크 계층&lt;/td&gt;
&lt;td id=&quot;qg:N&quot;&gt;네트워크 내 주변 장치 간의 정보를 올바르게 주고받기 위한 계층&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-808e-968f-e47ab3c6fcb5&quot;&gt;
&lt;td id=&quot;uIyP&quot;&gt;1️⃣ 물리 계층&lt;/td&gt;
&lt;td id=&quot;qg:N&quot;&gt;OSI 모델의 최하단, 0과 1로 표현되는 비트 신호를 주고받는 계층&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;⭐ TCP/IP 모델 (4계층)&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;인터넷 프로토콜 스위트&lt;/li&gt;
&lt;li&gt;TCP/IP 프로토콜 스택&lt;/li&gt;
&lt;/ul&gt;
&lt;table id=&quot;275cef54-a356-80c6-808d-d3ad419cde6d&quot; style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr id=&quot;275cef54-a356-80c4-9768-c5ca5b3fddb1&quot;&gt;
&lt;td id=&quot;o@y\&quot;&gt;4️⃣ 응용 계층&lt;/td&gt;
&lt;td id=&quot;tolP&quot;&gt;OSI 모델의 세션+표현+응용 계층과 유사&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8081-8e86-c65bb11c05d5&quot;&gt;
&lt;td id=&quot;o@y\&quot;&gt;3️⃣ 전송 계층&lt;/td&gt;
&lt;td id=&quot;tolP&quot;&gt;OSI 모델의 전송 계층과 유사&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-80fc-9714-ca6c6aa2881d&quot;&gt;
&lt;td id=&quot;o@y\&quot;&gt;2️⃣ 인터넷 계층&lt;/td&gt;
&lt;td id=&quot;tolP&quot;&gt;OSI 모델의 네트워크 계층과 유사&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8090-9d34-e763d01d9fd0&quot;&gt;
&lt;td id=&quot;o@y\&quot;&gt;1️⃣ 네트워크 액세스 계층&lt;/td&gt;
&lt;td id=&quot;tolP&quot;&gt;(링크 계층, 네트워크 인터페이스 계층) OSI 모델의 데이터 링크 계층과 유사&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  캡슐화와 역캡슐화&lt;/h2&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 송신 과정에서 캡슐화, 수신 과정에서 역캡슐화&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;메시지는 송신지 입장에서 가장 높은 계층 &amp;rarr; 가장 낮은 계층 으로 이동&lt;/li&gt;
&lt;li&gt;메시지는 수신지 입장에서 가장 낮은 계층 &amp;rarr; 가장 높은 계층 으로 이동&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;861&quot; data-origin-height=&quot;427&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/puoMy/btsQJ26vePw/yqJbRqJi5QCnF7yvVpQM30/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/puoMy/btsQJ26vePw/yqJbRqJi5QCnF7yvVpQM30/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/puoMy/btsQJ26vePw/yqJbRqJi5QCnF7yvVpQM30/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpuoMy%2FbtsQJ26vePw%2FyqJbRqJi5QCnF7yvVpQM30%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;532&quot; height=&quot;264&quot; data-origin-width=&quot;861&quot; data-origin-height=&quot;427&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;⚡ 캡슐화&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;계층별 프로토콜의 목적과 특징에 부합하는 &lt;b&gt;헤더(+트레일러) 추가&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;상위 계층으로부터 내려받은 패킷을 페이로드 삼아, 프로토콜에 걸맞은 헤더(혹은 트레일러)를 덧붙인 후 하위 계층으로 전달&lt;/li&gt;
&lt;li&gt;상위 계층의 패킷은 하위 계층에서의 페이로드로 간주&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ceoapK/btsQJwNAgDA/yt9kO9dyXmHv7pmx0UdL1K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ceoapK/btsQJwNAgDA/yt9kO9dyXmHv7pmx0UdL1K/img.png&quot; data-origin-width=&quot;824&quot; data-origin-height=&quot;475&quot; data-is-animation=&quot;false&quot; style=&quot;width: 64.8141%; margin-right: 10px;&quot; data-widthpercent=&quot;65.58&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ceoapK/btsQJwNAgDA/yt9kO9dyXmHv7pmx0UdL1K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FceoapK%2FbtsQJwNAgDA%2Fyt9kO9dyXmHv7pmx0UdL1K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;824&quot; height=&quot;475&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bNds6D/btsQHibXjdh/84diFxhKy9NysTbrL5jU6K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bNds6D/btsQHibXjdh/84diFxhKy9NysTbrL5jU6K/img.png&quot; data-origin-width=&quot;703&quot; data-origin-height=&quot;772&quot; data-is-animation=&quot;false&quot; style=&quot;width: 34.0231%;&quot; data-widthpercent=&quot;34.42&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bNds6D/btsQHibXjdh/84diFxhKy9NysTbrL5jU6K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNds6D%2FbtsQHibXjdh%2F84diFxhKy9NysTbrL5jU6K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;703&quot; height=&quot;772&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt; ️ 역캡슐화&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;계층별 프로토콜의 목적과 특징 부합하는 &lt;b&gt;헤더 제거&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;618&quot; data-origin-height=&quot;404&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bXHXDG/btsQISJ5cVj/dLl0P96ayTSYdKDxZLaqP0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bXHXDG/btsQISJ5cVj/dLl0P96ayTSYdKDxZLaqP0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bXHXDG/btsQISJ5cVj/dLl0P96ayTSYdKDxZLaqP0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbXHXDG%2FbtsQISJ5cVj%2FdLl0P96ayTSYdKDxZLaqP0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;560&quot; height=&quot;366&quot; data-origin-width=&quot;618&quot; data-origin-height=&quot;404&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  PDU(Protocol Data Unit)&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;각 계층에서 송수신 되는 메시지 단위&lt;/li&gt;
&lt;li&gt;현재 계층의 PDU = 상위 계층 데이터 + 현재 계층의 프로토콜 헤더(및 트레일러)&lt;/li&gt;
&lt;/ul&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%; height: 157px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 29.186%;&quot;&gt;OSI 계층&lt;/td&gt;
&lt;td style=&quot;width: 70.6977%;&quot;&gt;PDU&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 21px;&quot;&gt;
&lt;td style=&quot;height: 21px; width: 29.186%;&quot;&gt;응용 계층&lt;/td&gt;
&lt;td style=&quot;height: 21px; width: 70.6977%;&quot; rowspan=&quot;3&quot;&gt;데이터(data)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 21px;&quot;&gt;
&lt;td style=&quot;height: 21px; width: 29.186%;&quot;&gt;표현 계층&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 21px;&quot;&gt;
&lt;td style=&quot;height: 21px; width: 29.186%;&quot;&gt;세션 계층&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 21px;&quot;&gt;
&lt;td style=&quot;height: 21px; width: 29.186%;&quot;&gt;전송 계층&lt;/td&gt;
&lt;td style=&quot;height: 21px; width: 70.6977%;&quot;&gt;세그먼트(segment), 데이터 그램(datagram)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 21px;&quot;&gt;
&lt;td style=&quot;height: 21px; width: 29.186%;&quot;&gt;네트워크 계층&lt;/td&gt;
&lt;td style=&quot;height: 21px; width: 70.6977%;&quot;&gt;패킷(packet)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 21px;&quot;&gt;
&lt;td style=&quot;height: 21px; width: 29.186%;&quot;&gt;데이터 링크 계층&lt;/td&gt;
&lt;td style=&quot;height: 21px; width: 70.6977%;&quot;&gt;프레임(frame)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 21px;&quot;&gt;
&lt;td style=&quot;height: 21px; width: 29.186%;&quot;&gt;물리 계층&lt;/td&gt;
&lt;td style=&quot;height: 21px; width: 70.6977%;&quot;&gt;비트(bit)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  OSI 7계층, TCP/IP 4계층은 사실 아무것도 해주지 않는다?&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;네트워크 지식 = 네트워크 참조 모델&lt;/b&gt; &lt;/span&gt;이라 오해하기 쉽다.&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;네트워크 참조 모델은 반드시 지켜져야 하는 규칙일까?&lt;/li&gt;
&lt;li&gt;모든 프로토콜이나 네트워크 장비가 반드시 특정 계층에 완벽히 대응될까?&lt;/li&gt;
&lt;/ol&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;둘다 NO! NO! 왜? 네트워크 &lt;span style=&quot;color: #ee2323;&quot;&gt;참조&lt;/span&gt; 모델이니까.&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;새로운 프로토콜과 네트워크 장비는 만들어지고 있고, 모든 프로토콜이 모든 모델의 특정 계층에 완벽히 대응되지는 않음.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;942&quot; data-origin-height=&quot;307&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/biPgm7/btsQJGoZDYt/E1rW5uPcokwSNf2IzYH7p1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/biPgm7/btsQJGoZDYt/E1rW5uPcokwSNf2IzYH7p1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/biPgm7/btsQJGoZDYt/E1rW5uPcokwSNf2IzYH7p1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbiPgm7%2FbtsQJGoZDYt%2FE1rW5uPcokwSNf2IzYH7p1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;556&quot; height=&quot;181&quot; data-origin-width=&quot;942&quot; data-origin-height=&quot;307&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;TCP 모델의 경우 전공 서적마다 자유롭게 기술&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;네트워크 참조모델&lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;에 속한 &lt;u&gt;프로토콜과 네트워크 장비&lt;/u&gt;&lt;/b&gt;&lt;/span&gt;가 네트워크를 작동 시키는 주체이다!!&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;➕ 트래픽과 네트워크 성능 지표&lt;/h2&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  트래픽(traffic)&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;네트워크 내의 정보량&lt;/li&gt;
&lt;li&gt;트래픽은 주로 노드에서 측정 : &amp;ldquo;특정 시점에 노드를 경유하는 정보량&amp;rdquo;&lt;/li&gt;
&lt;li&gt;과도한 트래픽이 야기하는 문제: 과부하(&lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;성능 저하&lt;/b&gt;&lt;/span&gt;) 발생&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  처리율(throughput)&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;단위 시간당 네트워크를 통해 실제로 전송되는 정보량&lt;/li&gt;
&lt;li&gt;표현 단위
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;bps(bit/s)&lt;/li&gt;
&lt;li&gt;Mbps(Mbit/s)&lt;/li&gt;
&lt;li&gt;Gbps(Gbit/s)&lt;/li&gt;
&lt;li&gt;pps(p/s)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  대역폭(bandwidth)&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;컴퓨터 영역에서의 정의 - 단위 시간 동안 통신 매체를 통해 송수신할 수 있는 최대 정보량&lt;/li&gt;
&lt;li&gt;&amp;ldquo;정보를 주고받을 폭&amp;rdquo;&lt;/li&gt;
&lt;li&gt;bps, Mbps, Gbps 단위 사용&lt;/li&gt;
&lt;li&gt;cf) 신호 처리 영역에서의 정의 : 주파수 범위&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  패킷 손실(packet loss)&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;송수신되는 패킷이 손실된 상황&lt;/li&gt;
&lt;li&gt;손실된 패킷 수, 전체 패킷 / 유실된 패킷 (백분위) 사용&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;643&quot; data-origin-height=&quot;215&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ca0AUl/btsQHB3nuNQ/fujaCj3KzvZyaCx6EeSH9k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ca0AUl/btsQHB3nuNQ/fujaCj3KzvZyaCx6EeSH9k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ca0AUl/btsQHB3nuNQ/fujaCj3KzvZyaCx6EeSH9k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fca0AUl%2FbtsQHB3nuNQ%2FfujaCj3KzvZyaCx6EeSH9k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;643&quot; height=&quot;215&quot; data-origin-width=&quot;643&quot; data-origin-height=&quot;215&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;</description>
      <category>CS/네트워크</category>
      <category>4계층</category>
      <category>7계층</category>
      <category>cs</category>
      <category>IP</category>
      <category>network</category>
      <category>OSI</category>
      <category>TCP</category>
      <category>네트워크</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/263</guid>
      <comments>https://dimenshun.tistory.com/263#entry263comment</comments>
      <pubDate>Mon, 22 Sep 2025 00:16:32 +0900</pubDate>
    </item>
    <item>
      <title>네트워크 거시적 살펴보기 (구조, 분류, 전송 방식)</title>
      <link>https://dimenshun.tistory.com/262</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;  네트워크 기본 구조&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;네트워크 구조 = 그래프&lt;/b&gt;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;그래프 : 노드와 노드를 연결한 간선(edge)로 이뤄진 자료 구조&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;428&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/8HWCB/btsQGlUsh6W/loc5vTXakZUAumqG0lQdK0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/8HWCB/btsQGlUsh6W/loc5vTXakZUAumqG0lQdK0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/8HWCB/btsQGlUsh6W/loc5vTXakZUAumqG0lQdK0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8HWCB%2FbtsQGlUsh6W%2Floc5vTXakZUAumqG0lQdK0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;426&quot; height=&quot;204&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;428&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;네트워크 구조 살펴보기&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;호스트&lt;/li&gt;
&lt;li&gt;네트워크 장비&lt;/li&gt;
&lt;li&gt;통신 매체&lt;/li&gt;
&lt;li&gt;메시지&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;1️⃣ 호스트&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;네트워크의 가장 자리 노드 ( &lt;span style=&quot;background-color: #f3c000;&quot;&gt;&lt;b&gt;PC, 휴대폰&lt;/b&gt;&lt;/span&gt; )&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;호스트 역할에 따른 구분
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;클라이언트(Client) - 서버에게 &lt;b&gt;요청&lt;/b&gt;을 보내는 호스트&lt;/li&gt;
&lt;li&gt;서버(Server) - 요청에 대한 &lt;b&gt;응답&lt;/b&gt;을 보내는 호스트&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;425&quot; data-origin-height=&quot;221&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bl8e1K/btsQI71o1J4/dZtwe4MYjvVnP8jjSaeyP0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bl8e1K/btsQI71o1J4/dZtwe4MYjvVnP8jjSaeyP0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bl8e1K/btsQI71o1J4/dZtwe4MYjvVnP8jjSaeyP0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbl8e1K%2FbtsQI71o1J4%2FdZtwe4MYjvVnP8jjSaeyP0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;425&quot; height=&quot;221&quot; data-origin-width=&quot;425&quot; data-origin-height=&quot;221&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;클라이언트가 서버에 대해 &lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;요청&lt;/b&gt;&lt;/span&gt;을 보내고, 서버는 클라이언트에 대해 &lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;응답&lt;/b&gt;&lt;/span&gt;을 보냄.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;2️⃣ 네트워크 장비&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;호스트 간 주고받을 정보가 거치는 &lt;b&gt;중간 노드&lt;/b&gt; (이더넷 허브, 스위치, 라우터, 공유기 등)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;호스트 간 주고받는 정보가 수신지까지 안정적이고 안전하게 전송&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;⛑️ 호스트(서버, 클라이언트), 네트워크 장비&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;역할/네트워크 구조에 따라 구분한 개념일 뿐, &lt;b&gt;완전히 배타적인 개념은 아님!&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;호스트로 동작하는 노드로 때로는 네트워크 장비 역할 수행 가능&lt;/li&gt;
&lt;li&gt;서버로 동작하는 노드로 때로는 클라이언트 역할 수행 가능&lt;/li&gt;
&lt;li&gt;클라이언트로 동작하는 노드로 때로는 서버 역할 수행 가능&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;3️⃣ 통신 매체&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;각 &lt;b&gt;노드를 연결&lt;/b&gt;하는 간선 (링크)&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;유선 매체&lt;/li&gt;
&lt;li&gt;무선 매체&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;708&quot; data-origin-height=&quot;427&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dJE2uy/btsQH02RtyK/kYiktU7bax1Q3Kzi9QuDg1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dJE2uy/btsQH02RtyK/kYiktU7bax1Q3Kzi9QuDg1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dJE2uy/btsQH02RtyK/kYiktU7bax1Q3Kzi9QuDg1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdJE2uy%2FbtsQH02RtyK%2FkYiktU7bax1Q3Kzi9QuDg1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;560&quot; height=&quot;338&quot; data-origin-width=&quot;708&quot; data-origin-height=&quot;427&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;4️⃣ 메세지&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;통신 매체로 연결된 노드가 주고받는 정보&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;웹 페이지, 파일, 메일 등&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;602&quot; data-origin-height=&quot;357&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bb2unA/btsQH7U7Xl8/m5ApehNdL4xIwYETrj9qQ0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bb2unA/btsQH7U7Xl8/m5ApehNdL4xIwYETrj9qQ0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bb2unA/btsQH7U7Xl8/m5ApehNdL4xIwYETrj9qQ0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbb2unA%2FbtsQH7U7Xl8%2Fm5ApehNdL4xIwYETrj9qQ0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;602&quot; height=&quot;357&quot; data-origin-width=&quot;602&quot; data-origin-height=&quot;357&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  네트워크 분류&lt;/h2&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;1️⃣ 범위에 따른 분류&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;LAN ( 근거리 통신망 )&lt;/b&gt; - 가까운 지역을 연결한 근거리 통신망&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;873&quot; data-origin-height=&quot;628&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ejeI8S/btsQJx6FcL6/LLaMxsjSAWClLzEH3F6PL1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ejeI8S/btsQJx6FcL6/LLaMxsjSAWClLzEH3F6PL1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ejeI8S/btsQJx6FcL6/LLaMxsjSAWClLzEH3F6PL1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FejeI8S%2FbtsQJx6FcL6%2FLLaMxsjSAWClLzEH3F6PL1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;420&quot; height=&quot;302&quot; data-origin-width=&quot;873&quot; data-origin-height=&quot;628&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;WAN ( 원거리 통신망 )&lt;/b&gt; - 먼 지역을 연결한 광역 통신망
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;인터넷이 WAN으로 분류&lt;/li&gt;
&lt;li&gt;다른 LAN에 속한 호스트와 메시지를 주고받아야 할때 필요&lt;/li&gt;
&lt;li&gt;ISP (Internet Service Provider)
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;사용자에게 인터넷과 같은 WAN에 연결 가능한 회선을 임대하는 등 WAN과 관련한 다양한 서비스를 제공&lt;/li&gt;
&lt;li&gt;국내의 대표적인 ISP는 KT, LG유플러스, SK브로드밴드&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;479&quot; data-origin-height=&quot;234&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dP8neh/btsQH4xmGjm/NDPPhBBikKGBO3RtN97j2K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dP8neh/btsQH4xmGjm/NDPPhBBikKGBO3RtN97j2K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dP8neh/btsQH4xmGjm/NDPPhBBikKGBO3RtN97j2K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdP8neh%2FbtsQH4xmGjm%2FNDPPhBBikKGBO3RtN97j2K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;479&quot; height=&quot;234&quot; data-origin-width=&quot;479&quot; data-origin-height=&quot;234&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;더 세밀하게 나눈다면,&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;359&quot; data-origin-height=&quot;371&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/buXvuU/btsQHGctxE4/axctx5U1y5781QXQrMQvmK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/buXvuU/btsQHGctxE4/axctx5U1y5781QXQrMQvmK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/buXvuU/btsQHGctxE4/axctx5U1y5781QXQrMQvmK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbuXvuU%2FbtsQHGctxE4%2Faxctx5U1y5781QXQrMQvmK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;282&quot; height=&quot;291&quot; data-origin-width=&quot;359&quot; data-origin-height=&quot;371&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;LAN(Local Area Network)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;CAN(Campus Area Network) - 학교 or 회사의 여러 건물 단위&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;MAN(Metropolitan Area Network) - 도시나 대도시 단위&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;WAN(Wide Area Network)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;2️⃣ 메시지 교환 방식에 따른 분류&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;회선 교환 방식으로 메시지를 주고받는 &lt;b&gt;회선 교환 네트워크&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;패킷 교환 방식으로 메시지를 주고받는 &lt;b&gt;패킷 교환 네트워크&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 회선 교환 방식(회선 교환 네트워크)&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;메시지를 주고받기 전 (메시지 전송로인) 회선을 설정한 뒤, 해당 회선을 통해 메시지를 주고받는 방식
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&amp;lsquo;회선을 성정한다&amp;rsquo;&lt;/li&gt;
&lt;li&gt;&amp;lsquo;두 호스트가 연결되었다.&amp;rsquo;&lt;/li&gt;
&lt;li&gt;&amp;lsquo;두 호스트를 연결할 전송로를 예약하였다.&amp;rsquo;&lt;/li&gt;
&lt;li&gt;&amp;lsquo;전송로를 확보하였다.&amp;rsquo;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;656&quot; data-origin-height=&quot;286&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cg4PPS/btsQHiCZpgF/K39t7p8OEk723l4WVCi6Bk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cg4PPS/btsQHiCZpgF/K39t7p8OEk723l4WVCi6Bk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cg4PPS/btsQHiCZpgF/K39t7p8OEk723l4WVCi6Bk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcg4PPS%2FbtsQHiCZpgF%2FK39t7p8OEk723l4WVCi6Bk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;555&quot; height=&quot;242&quot; data-origin-width=&quot;656&quot; data-origin-height=&quot;286&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;회선 스위치&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;호스트 사이에 1:1 전송로를 확보하는 네트워크 장비&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;특징&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;장점 : 두 호스트 사이에 연결을 확보한 후에 메시지를 주고받는 특성 덕분에 주어진 시간 동안 &lt;b&gt;전송되는 정보의 양이 비교적 일정&lt;/b&gt;함.&lt;/li&gt;
&lt;li&gt;단점 : &lt;b&gt;회선의 이용 효율&lt;/b&gt;이 낮아질 수 있음.
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;가능한 모든 회선에 끊임없이 메시지가 흐르고 있어야만 회선의 이용 효율이 높아짐&lt;/li&gt;
&lt;li&gt;메시지를 주고받지 않으면서 회선을 점유하는 것은 낭비&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;✅ 패킷 교환 방식(패킷 교환 네트워크)&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;메시지를 패킷(Packet)이라는 단위로 쪼개어 전송 &amp;rarr; 패킷 교환 네트워크상의 송수신 단위&lt;/li&gt;
&lt;li&gt;쪼개어 전송된 패킷들은 수신지에서 재조립&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;257&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bH7Boy/btsQI9ZfidY/K0SVlvw4vY1EgbSfCQdtuK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bH7Boy/btsQI9ZfidY/K0SVlvw4vY1EgbSfCQdtuK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bH7Boy/btsQI9ZfidY/K0SVlvw4vY1EgbSfCQdtuK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbH7Boy%2FbtsQI9ZfidY%2FK0SVlvw4vY1EgbSfCQdtuK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;545&quot; height=&quot;200&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;257&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;전송로의 이용 효율이 높아 회선 교환 방식의 문제점을 해결&lt;/li&gt;
&lt;li&gt;현대 인터넷은 대부분 &lt;b&gt;패킷 교환 방식&lt;/b&gt;을 이용&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;패킷 스위치&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;패킷의 송수신지를 식별, 패킷이 이동할&lt;b&gt; 최적의 경로&lt;/b&gt;를 결정&lt;/li&gt;
&lt;li&gt;&lt;u&gt;&lt;b&gt;라우터(router), 스위치(switch)&lt;/b&gt;&lt;/u&gt; 등&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  패킷&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;패킷은 &amp;ldquo; &lt;b&gt;소포, (선물) 꾸러미 &amp;ldquo; 라는 의미&lt;/b&gt;를 가짐.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;386&quot; data-origin-height=&quot;127&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/3dW21/btsQH3LZsyj/JKpkZnhP1DYDB73lcj9OnK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/3dW21/btsQH3LZsyj/JKpkZnhP1DYDB73lcj9OnK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/3dW21/btsQH3LZsyj/JKpkZnhP1DYDB73lcj9OnK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3dW21%2FbtsQH3LZsyj%2FJKpkZnhP1DYDB73lcj9OnK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;386&quot; height=&quot;127&quot; data-origin-width=&quot;386&quot; data-origin-height=&quot;127&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;패킷의 구조&lt;/h3&gt;
&lt;table id=&quot;275cef54-a356-8072-bd4b-fd62db9b9592&quot; style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr id=&quot;275cef54-a356-80a3-b813-f80342b98ec1&quot;&gt;
&lt;td id=&quot;iSSv&quot; style=&quot;text-align: center;&quot;&gt;패킷&lt;/td&gt;
&lt;td id=&quot;:EJc&quot; style=&quot;text-align: center;&quot;&gt;택배&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8035-ace8-dcb090c5459b&quot;&gt;
&lt;td id=&quot;iSSv&quot; style=&quot;text-align: center;&quot;&gt;페이로드(payload) - 전송하려는 데이터&lt;/td&gt;
&lt;td id=&quot;:EJc&quot; style=&quot;text-align: center;&quot;&gt;물품&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;275cef54-a356-8071-95ea-c8dd4bfcbbc8&quot;&gt;
&lt;td id=&quot;iSSv&quot; style=&quot;text-align: center;&quot;&gt;헤더(header), 트레일러(trailer) - 부가 정보 또는 제어정보&amp;nbsp;&lt;/td&gt;
&lt;td id=&quot;:EJc&quot; style=&quot;text-align: center;&quot;&gt;택배 송장&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span&gt; &lt;/span&gt; 주소&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;헤더에 담기는 대표적인 정보, 주소(address)&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;송수신지를 특정하는 정보
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;예) IP 주소, MAC 주소&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;주소가 있으면 &amp;ldquo;&lt;u&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;누구에게&lt;/b&gt;&lt;/span&gt;&lt;/u&gt; 전송할지&amp;rdquo;를 지정할 수 있음!
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;특정 기기 하나에 전송&lt;/li&gt;
&lt;li&gt;같은 네트워크 내 모든 기기로 전송&lt;/li&gt;
&lt;li&gt;같은 그룹에 속한 기기에 전송&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  송수신지 유형별 전송 방식&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;유니캐스트(unicast)&lt;/span&gt; ⭐&lt;/b&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;하나의 수신지에 메시지를 전송&lt;/li&gt;
&lt;li&gt;송신지와 수신지가 1:1로 메시지를 주고 받는 경우 ( 가장 일반적 )&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;브로드캐스트(broadcast)&lt;/span&gt; ⭐&lt;/b&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;네트워크상의 모든 호스트에게 전송&lt;/li&gt;
&lt;li&gt;브로드캐스트 도메인(broadcast domain) - 브로드캐스트가 전송되는 범위&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;멀티캐스트(multicast)
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;네트워크 내의 동일 그룹에 속한 호스트에게만 전송&amp;rsquo;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;애니캐스트(anycast)
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;네트워크 내 동일 그룹에 속한 호스트 중 가장 가까운 호스트에게 전송&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</description>
      <category>CS/네트워크</category>
      <category>cs</category>
      <category>network</category>
      <category>packet</category>
      <category>네트워크</category>
      <category>패킷</category>
      <author>dimenshun</author>
      <guid isPermaLink="true">https://dimenshun.tistory.com/262</guid>
      <comments>https://dimenshun.tistory.com/262#entry262comment</comments>
      <pubDate>Sun, 21 Sep 2025 16:31:48 +0900</pubDate>
    </item>
  </channel>
</rss>