Typography & Colors

1. text-align และ text-decoration คืออะไร

text-align ควบคุมการจัดแนวข้อความในกล่อง เช่น left, center, right text-decoration ควบคุมเส้นตกแต่งของข้อความ เช่น underline, none, line-through ทั้งสอง property ใช้กับข้อความโดยตรงและช่วยบอกความหมาย เช่น ลิงก์มักมี underline ส่วนราคาเดิมมักใช้ line-through

2. Mental model: วางข้อความบนป้าย

ถ้าข้อความคือคำบนป้าย text-align คือการเลือกว่าจะวางคำไว้ซ้าย กลาง หรือขวาของป้าย ส่วน text-decoration คือปากกาเส้นพิเศษที่ขีดใต้ ขีดทับ หรือเอาเส้นออก เพื่อช่วยบอกสถานะหรือความหมายของข้อความ

• center เหมาะกับข้อความสั้นที่อยากให้เป็นจุดสนใจ
• left เหมาะกับย่อหน้ายาว เพราะอ่านต่อบรรทัดได้ง่าย
• underline ช่วยบอกว่าข้อความเป็นลิงก์หรือมีการเน้น
• line-through มักใช้กับข้อมูลที่ถูกยกเลิกหรือราคาเดิม

3. ตัวอย่าง syntax

.hero-title {
  text-align: center;
}

.link {
  text-decoration: underline;
}

.old-price {
  text-decoration: line-through;
}

4. Recap

• text-align จัดแนวข้อความภายในพื้นที่ของ element
• text-decoration เพิ่มหรือลบเส้นตกแต่งของข้อความ
• อย่าใช้ center กับย่อหน้ายาวโดยไม่จำเป็น เพราะอ่านต่อบรรทัดยาก
• ลบ underline ของลิงก์ได้ แต่ต้องระวังไม่ทำให้ผู้ใช้มองไม่ออกว่าเป็นลิงก์

Lab 1: จัดหัวข้อให้อยู่กลาง

เป้าหมาย: ใช้ text-align เพื่อจัดแนวข้อความ โจทย์: 1. กำหนด .title ให้มี text-align: center

Lab 2: ลบเส้นใต้จากลิงก์

เป้าหมาย: ใช้ text-decoration เพื่อควบคุมเส้นตกแต่ง โจทย์: 1. กำหนด .plain-link ให้มี text-decoration: none

Lab 3: ใช้ line-through กับราคาเดิม

เป้าหมาย: ใช้ text-decoration เพื่อสื่อว่าข้อความนี้เป็นค่าเดิม โจทย์: 1. กำหนด .old-price ให้มี text-decoration: line-through