public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

223015c 02: osi/tcp-ip-grafik korrekt gemappt + headline-umbruch fix

Browse Source
This commit is contained in:
libretech
2026-06-17 10:39:08 +02:00
parent 2658251bcb
commit 613f37983e
3 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015c/02-netzwerke-protokolle-css.md
+2 -2
View File
@@ -538,9 +538,9 @@ SPEAKER NOTES:
---
# Exkurs: OSI vs. TCP/IP
# OSI vs. TCP/IP
![bg right:50% fit](./assets/demos/osi-tcpip-diagram.png)
![bg right:48% fit](./assets/demos/osi-tcpip-diagram.png)
OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.
slides/223015c/assets/demos/osi-tcpip-diagram.html
+52 -29
View File
@@ -6,47 +6,70 @@
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px 40px; display: inline-block; }
.wrap { display: flex; gap: 36px; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 4px; }
h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
.headers {
display: grid;
grid-template-columns: 240px 240px;
column-gap: 36px;
margin-bottom: 10px;
}
.headers h3 { margin: 0; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
.grid {
display: grid;
grid-template-columns: 240px 240px;
grid-template-rows: repeat(7, 48px);
column-gap: 36px;
row-gap: 6px;
}
.box {
border: 2px solid #4a4a6a;
padding: 10px 20px;
min-width: 230px;
font-size: 0.95rem;
background: #f3f4f6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 0.95rem;
text-align: center;
padding: 0 12px;
}
.osi .box { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; }
.tcpip .app { min-height: 126px; }
.tcpip .trans { min-height: 40px; }
.tcpip .net { min-height: 40px; }
.tcpip .link { min-height: 82px; }
.osi {
background: #dbeafe;
border-color: #1e40af;
color: #1e3a8a;
}
.tcpip {
background: #fce7d6;
border-color: #c2410c;
color: #7c2d12;
font-weight: 600;
}
/* OSI: column 1, one box per row */
.o7 { grid-area: 1 / 1; } .o6 { grid-area: 2 / 1; } .o5 { grid-area: 3 / 1; }
.o4 { grid-area: 4 / 1; } .o3 { grid-area: 5 / 1; } .o2 { grid-area: 6 / 1; }
.o1 { grid-area: 7 / 1; }
/* TCP/IP: column 2, each block spans its OSI equivalents */
.t-app { grid-area: 1 / 2 / 4 / 2; } /* OSI 5-7 */
.t-tra { grid-area: 4 / 2 / 5 / 2; } /* OSI 4 */
.t-net { grid-area: 5 / 2 / 6 / 2; } /* OSI 3 */
.t-link { grid-area: 6 / 2 / 8 / 2; } /* OSI 1-2 */
</style>
</head>
<body>
<div class="wrap">
<div class="col osi">
<div class="headers">
<h3>OSI (7 Schichten)</h3>
<div class="box">7. Anwendung</div>
<div class="box">6. Darstellung</div>
<div class="box">5. Sitzung</div>
<div class="box">4. Transport</div>
<div class="box">3. Vermittlung</div>
<div class="box">2. Sicherung</div>
<div class="box">1. Bitübertragung</div>
</div>
<div class="col tcpip">
<h3>TCP/IP (4 Schichten)</h3>
<div class="box app">Anwendung</div>
<div class="box trans">Transport</div>
<div class="box net">Internet</div>
<div class="box link">Netzzugang</div>
</div>
<div class="grid">
<div class="box osi o7">7. Anwendung</div>
<div class="box osi o6">6. Darstellung</div>
<div class="box osi o5">5. Sitzung</div>
<div class="box osi o4">4. Transport</div>
<div class="box osi o3">3. Vermittlung</div>
<div class="box osi o2">2. Sicherung</div>
<div class="box osi o1">1. Bitübertragung</div>
<div class="box tcpip t-app">Anwendung</div>
<div class="box tcpip t-tra">Transport</div>
<div class="box tcpip t-net">Internet</div>
<div class="box tcpip t-link">Netzzugang</div>
</div>
</body>
</html>
slides/223015c/assets/demos/osi-tcpip-diagram.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 63 KiB