Box Model dan Typography

CSS Box Model

Setiap elemen di halaman web diperlakukan seperti sebuah kotak. Box model terdiri dari:

• Content: isi elemen (teks, gambar).
• Padding: jarak antara content dan border.
• Border: garis yang mengelilingi elemen.
• Margin: jarak antara elemen dengan elemen lainnya.

Ilustrasi:

+-----------------------+
|       Margin          |
|  +-----------------+  |
|  |     Border      |  |
|  |  +-----------+  |  |
|  |  |  Padding  |  |  |
|  |  | +-------+ |  |  |
|  |  | |Content| |  |  |
|  |  | +-------+ |  |  |
|  |  +-----------+  |  |
|  +-----------------+  |
+-----------------------+

Contoh pengaturan box model:

.project-card {
  margin: 10px;
  padding: 15px;
  border: 1px solid #ccc;
}

Untuk memastikan perhitungan lebar termasuk padding dan border, sering digunakan:

* {
  box-sizing: border-box;
}

Satuan CSS (Units)

Beberapa satuan yang sering dipakai:

• px: satuan absolut, berbasis pixel layar.
• %: persentase terhadap ukuran elemen induk.
• vh (viewport height): 1vh = 1% tinggi viewport.
• vw (viewport width): 1vw = 1% lebar viewport.
• rem dan em: relatif terhadap ukuran font.

Contoh:

.container {
  width: 80%;
  padding: 20px;
}
 
.full-height {
  min-height: 100vh;
}

Typography

Typography di CSS berkaitan dengan pengaturan teks.

Font Family

body {
  font-family: "Poppins", sans-serif;
}

Pada proyek portfolio, font diambil dari Google Fonts dan digunakan di seluruh halaman.

Font Size

.profile-title {
  font-size: 42px;
}

Ukuran font bisa menggunakan px, rem, dan lainnya.

Font Weight

h1 {
  font-weight: 600;
}

Nilai umum: 400 (normal), 500, 600, 700 (bold), atau kata kunci seperti normal, bold.

Text Alignment

.project-title,
.project-subtitle {
  text-align: center;
}

Nilai umum: left, right, center, justify.

Text Decoration

Biasanya dipakai untuk mengatur garis bawah pada link:

nav > a {
  text-decoration: none;
}

Dengan mengatur box model dan typography dengan baik, tampilan halaman menjadi lebih rapi dan mudah dibaca.