บทที่ 4: HTML & CSS

“ก่อนตกแต่งภายใน ต้องมีโครงสร้างที่แข็งแรงก่อน”

The Blueprint (พิมพ์เขียว)

ลองนึกถึงบ้านเปล่าที่เพิ่งสร้างเสร็จ:

มีเสา มีผนัง มีประตูหน้าต่าง (โครงสร้าง)
แต่ยังไม่มีสี ไม่มีเฟอร์นิเจอร์ ไม่มีการตกแต่ง

HTML = โครงสร้างบ้าน (เสา ผนัง ประตู หน้าต่าง) CSS = การตกแต่งภายใน (สี เฟอร์นิเจอร์ ผ้าม่าน)

The Construction Site (หน้างานก่อสร้าง)

🏗️ HTML — โครงสร้างบ้าน

<!DOCTYPE html>
<html>
  <head>
    <title>บ้านของฉัน</title>
  </head>
  <body>
    <!-- หลังคาบ้าน -->
    <header>
      <h1>ยินดีต้อนรับ</h1>
      <nav>เมนู</nav>
    </header>

    <!-- ห้องหลัก -->
    <main>
      <section>ห้องนั่งเล่น</section>
      <section>ห้องนอน</section>
    </main>

    <!-- ฐานบ้าน -->
    <footer>ข้อมูลติดต่อ</footer>
  </body>
</html>

🎨 Semantic HTML — ตั้งชื่อห้องให้ถูกต้อง

Tag	หน้าที่	เปรียบเทียบ
`<header>`	ส่วนหัว	หลังคา/ป้ายบ้าน
`<nav>`	เมนูนำทาง	ทางเดินในบ้าน
`<main>`	เนื้อหาหลัก	ห้องหลัก
`<section>`	ส่วนย่อย	ห้องต่างๆ
`<footer>`	ส่วนท้าย	ฐานบ้าน

🎨 CSS — ตกแต่งภายใน

/* เลือกทั้งบ้าน */
body {
  font-family: 'Sarabun', sans-serif;
  background-color: #f5f5f5;
}

/* ตกแต่งห้องหลัก */
.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4rem;
  border-radius: 16px;
}

/* เมื่อ Hover */
.button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

📦 Box Model — กล่องที่วางซ้อนกัน

┌─────────────────────────────────┐
│            Margin               │
│  ┌───────────────────────────┐  │
│  │         Border            │  │
│  │  ┌─────────────────────┐  │  │
│  │  │      Padding        │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │    Content    │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Material Selection (เลือกสเปกวัสดุ)

🌬️ Tailwind CSS — แค็ตตาล็อกตกแต่งบ้าน

<div class="bg-gradient-to-r from-purple-500 to-pink-500
            p-8 rounded-2xl shadow-xl hover:scale-105
            transition-transform">
  <h1 class="text-4xl font-bold text-white">Hello!</h1>
</div>

ข้อดี:

เขียนเร็ว ไม่ต้องตั้งชื่อ class
Design System ในตัว
Responsive ง่าย (md:, lg:)

📐 Flexbox & Grid

/* Flexbox - เรียงของในแนวเดียว */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid - จัดห้องแบบตาราง */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Architect’s Note (บันทึกสถาปนิก)

⚠️ ข้อควรระวัง

ใช้ Semantic HTML — <div> ไม่ได้บอกความหมาย ใช้ <nav>, <main> แทน
Mobile First — ออกแบบมือถือก่อน แล้วค่อยขยาย
Accessibility — ใส่ alt ให้รูป, ใช้สีที่ Contrast ดี

💡 Best Practices

ใช้ CSS Variables สำหรับ Design System
ใช้ rem แทน px เพื่อ Accessibility
Responsive: min-width ดีกว่า max-width