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. OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.
slides/223015c/assets/demos/osi-tcpip-diagram.html
+55 -32
View File
@@ -6,47 +6,70 @@
<style> <style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; } html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px 40px; display: inline-block; } body { padding: 30px 40px; display: inline-block; }
.wrap { display: flex; gap: 36px; align-items: flex-start; } .headers {
.col { display: flex; flex-direction: column; gap: 4px; } display: grid;
h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; } 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 { .box {
border: 2px solid #4a4a6a; border: 2px solid #4a4a6a;
padding: 10px 20px; border-radius: 4px;
min-width: 230px;
font-size: 0.95rem;
background: #f3f4f6;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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; } .osi {
.tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; } background: #dbeafe;
.tcpip .app { min-height: 126px; } border-color: #1e40af;
.tcpip .trans { min-height: 40px; } color: #1e3a8a;
.tcpip .net { min-height: 40px; } }
.tcpip .link { min-height: 82px; } .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> </style>
</head> </head>
<body> <body>
<div class="wrap"> <div class="headers">
<div class="col osi"> <h3>OSI (7 Schichten)</h3>
<h3>OSI (7 Schichten)</h3> <h3>TCP/IP (4 Schichten)</h3>
<div class="box">7. Anwendung</div> </div>
<div class="box">6. Darstellung</div> <div class="grid">
<div class="box">5. Sitzung</div> <div class="box osi o7">7. Anwendung</div>
<div class="box">4. Transport</div> <div class="box osi o6">6. Darstellung</div>
<div class="box">3. Vermittlung</div> <div class="box osi o5">5. Sitzung</div>
<div class="box">2. Sicherung</div> <div class="box osi o4">4. Transport</div>
<div class="box">1. Bitübertragung</div> <div class="box osi o3">3. Vermittlung</div>
</div> <div class="box osi o2">2. Sicherung</div>
<div class="col tcpip"> <div class="box osi o1">1. Bitübertragung</div>
<h3>TCP/IP (4 Schichten)</h3>
<div class="box app">Anwendung</div> <div class="box tcpip t-app">Anwendung</div>
<div class="box trans">Transport</div> <div class="box tcpip t-tra">Transport</div>
<div class="box net">Internet</div> <div class="box tcpip t-net">Internet</div>
<div class="box link">Netzzugang</div> <div class="box tcpip t-link">Netzzugang</div>
</div>
</div> </div>
</body> </body>
</html> </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