3I_WTL_2025/04_layout

04 - CSS Layout

🎯 Co se naučíte

V této lekci se naučíte vytvářet layout (rozvržení) webové stránky pomocí CSS.

📚 Témata lekce

• Box Model (margin, padding, border)
• Display property (block, inline, inline-block)
• Float (obtékání elementů)
• Clear (ukončení obtékání)
• Width a Height (šířka a výška elementů)
• Základní layouty (dvousloupcový, třísloupcový)

📂 Soubory v projektu

• index.html - HTML struktura s layoutem
• style.css nebo css/ složka - CSS styly pro layout

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Prozkoumejte CSS - zaměřte se na vlastnosti float, clear, width
3. Použijte Developer Tools (F12) a vyzkoušejte Box Model vizualizaci
4. Zkuste změnit šířky sloupců a sledujte, jak se mění layout

💡 Tip pro studenty

• Box Model: margin (vnější odsazení) ≠ padding (vnitřní odsazení)
• Float je starší technika - dnes se používá spíše Flexbox nebo Grid
• Nezapomeňte používat clear: both; po float elementech
• Developer Tools (F12) jsou váš nejlepší přítel pro debugování layoutu

⚠️ Důležité poznámky

• Float-based layout je starší přístup
• V moderních projektech se používá Flexbox (lekce 10) nebo Grid (lekce 12)
• Tato lekce je důležitá pro pochopení starších projektů

🔗 Související lekce

• Předchozí: 03_css_uvod - základy CSS
• Další: 10_flex - moderní flexbox layout
• Související: 12_grid - CSS Grid systém