CSS - Unit Pemukuran

Hai sana, para desainer web masa depan! Hari ini, kita akan melangsungkan perjalanan yang menarik melalui dunia unit pemukuran CSS. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda melalui aspek penting dari desain web. Jadi, ambilkan ruler virtual Anda, dan mari kita ukur beberapa CSS!

Unit Panjang

Dalam CSS, kita memiliki berbagai cara untuk mengukur dan menentukan ukuran. Itu seperti memiliki kotak peralatan penuh dengan ruler yang berbeda, masing-masing cocok untuk tugas-tugas tertentu. Mari kita mulai dengan dasar-dasar:

Unit Panjang Absolut

Ini adalah yang paling jelas, seperti inci di ruler Anda:

Unit	Deskripsi
px	Pixel
in	Inci
cm	Sentimeter
mm	Milimeter
pt	Poin
pc	Pica

Berikut adalah contoh sederhana:

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

Dalam kode ini, kita menciptakan kotak yang 100 pixel lebar, 2 inci tinggi, dengan margin 10 milimeter di sekelilingnya. Itu seperti membangun kotak karton kecil dan presisi!

Unit Pemukuran CSS - em Unit

Sekarang, mari bicarakan unit 'em'. Itu adalah unit relatif, berdasarkan ukuran font elemen. Pihak Anda berpikir seperti kameleon yang mengubah ukurannya berdasarkan lingkungannya.

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* Ini akan 24px */
padding: 2em;     /* Ini akan 48px */
}

Dalam contoh ini, ukuran font anak adalah 1,5 kali ukuran ortunya, dan paddingnya adalah dua kali ukuran fontnya sendiri. Itu seperti boneka Rusia yang saling berisi ukuran!

Unit Pemukuran CSS - ch Unit

Unit 'ch' berdasarkan lebar karakter '0' (nol). Itu sangat berguna untuk menciptakan tata letak kolom dalam font monospace.

.code-block {
width: 80ch;
font-family: monospace;
}

Ini menciptakan blok kode yang 80 karakter lebar, sempurna bagi yang nostalgia untuk hari-hari terminal 80-kolom!

Unit Pemukuran CSS - rem Unit

'rem' singkatan dari "root em". Itu mirip dengan 'em', tetapi selalu relatif terhadap elemen root (biasanya

), bukan parent.

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* Selalu 24px, tanpa menghiraukan parent */
padding: 2rem;     /* Selalu 32px */
}

Ini sangat baik untuk menjaga ukuran konsisten sepanjang dokumen Anda, seperti memiliki blueprint master untuk keseluruhan website Anda.

Unit Pemukuran CSS - lh dan rlh Unit

'lh' singkatan dari "line height" elemen, sedangkan 'rlh' adalah "root line height". Unit ini adalah yang baru, cocok untuk ritme vertikal dalam tipografi.

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

Ini mengatur margin di bawah paragraf menjadi tepat satu tinggi baris, menciptakan ritme vertikal yang harmonis. Itu seperti mengkonduksi orkestra teks!

Unit Pemukuran CSS - vh Unit dan vw Unit

'vh' dan 'vw' mewakili "tinggi viewport" dan "lebar viewport" masing-masing. Mereka adalah unit persentase berdasarkan ukuran viewport.

.hero {
height: 100vh;
width: 100vw;
}

Ini menciptakan section hero yang selalu mengisi keseluruhan layar, tanpa menghiraukan ukuran perangkat. Itu seperti memiliki billboard responsif yang selalu cocok sempurna!

Unit Pemukuran CSS - vmin (viewport minimum) dan vmax (viewport maximum) Unit

Unit ini berdasarkan dimensi yang lebih kecil atau lebih besar viewport, tergantung yang cocok.

.square {
width: 50vmin;
height: 50vmin;
}

Ini menciptakan kotak yang sempurna yang selalu setengah ukuran dimensi viewport yang lebih kecil. Itu seperti memiliki kotak yang berubah bentuk yang selalu tampak proporsional!

Unit Pemukuran CSS - vb Unit

'vb' singkatan dari "viewport block size". Itu mirip dengan 'vh', tetapi menghormati mode tulisan dokumen.

.sidebar {
width: 20vb;
}

Ini menciptakan sidebar yang selalu 20% dari dimensi blok viewport, yang sangat baik untuk situs berbahasa berbeda dengan arah tulisan yang berbeda.

Unit Pemukuran CSS - vi Unit

'vi' adalah "viewport inline size". Itu seperti 'vw', tetapi lagi, menghormati mode tulisan.

.header {
height: 10vi;
}

Ini menciptakan header yang selalu 10% dari dimensi inline viewport, menyesuaikan dengan mode tulisan secara mulus.

Contoh - Persentase

Persentase dalam CSS selalu relatif terhadap sesuatu. Mari lihat mereka dalam aksi:

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

Di sini, wadah adalah 80% lebar parentnya, dikelilingi oleh margin otomatis. Anak adalah setengah lebar wadah, dengan padding 5% lebar wadah. Itu seperti boneka Rusia, tetapi dengan kotak tak terlihat!

Contoh - Angka

kadang-kadang, properti CSS tidak memerlukan unit sama sekali. Mari lihat beberapa contoh:

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

Di sini, opacity adalah nilai antara 0 dan 1, line-height adalah pengganda ukuran font, dan z-index adalah angka untuk urutan stacking. Itu seperti memiliki tombol volume, pemisah teks, dan pengurut lapisan semua dalam satu!

Dan itu adalah dia, teman-teman! Kita telah menjelajahi negeri unit pemukuran CSS, dari pixel yang familiar hingga unit viewport yang eksotis. Ingat, memilih unit yang tepat adalah seperti memilih alat yang tepat untuk pekerjaan - itu bisa membuat hidup Anda lebih mudah dan desain Anda lebih kokoh. Jadi, maju dan ukur dengan tanggung jawab!

Credits: Image by storyset