CSS - Unit Measure: Panduan untuk Pemula
Halo sana, para ahli CSS masa depan! ? Selamat datang ke perjalanan magis kami ke dunia unit measure CSS. Sebagai guru komputer tetangga yang ramah, saya sangat senang untuk memandu Anda melalui aspek esensial dari desain web ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya – kita akan mulai dari awal dan membangun pengetahuan kita bersama!
Unit Panjang: Fondasi CSS Measurement
Ayo kita mulai dengan dasar-dasar. Dalam CSS, kita menggunakan berbagai unit untuk menentukan ukuran elemen, margin, padding, dan lainnya. Picturkan unit ini seperti pengukur dan tapak ukur di dunia digital. Mereka membantu kita membuat website yang terlihat bagus pada semua perangkat, dari smartphone kecil hingga monitor desktop besar.
Berikut adalah tabel unit panjang CSS yang paling umum:
| Unit | Deskripsi | Contoh |
|---|---|---|
| px | Pixel | 16px |
| em | Relatif ke ukuran font elemen | 1.5em |
| rem | Relatif ke ukuran font elemen root | 2rem |
| % | Persentase | 50% |
| vw | Lebar viewport | 100vw |
| vh | Tinggi viewport | 50vh |
Sekarang, mari kita masuk lebih mendalam ke setiap unit ini dan lihat bagaimana mereka bekerja dalam tindakan!
CSS Measurement Units - em Unit
Unit 'em' seperti seekor kameleon – dia menyesuaikan diri dengan lingkungannya. Satu 'em' adalah sama dengan ukuran font elemen saat ini. Hal ini membuatnya sangat berguna untuk menciptakan desain yang dapat skala.
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* Ini akan menjadi 24px */
margin-bottom: 1em; /* Ini juga akan menjadi 24px */
}Dalam contoh ini, ukuran font elemen .child akan menjadi 24px (1.5 * 16px), dan margin bawahnya juga akan 24px. Seperti elemen .child mengatakan, "Saya ingin 1.5 kali lipat lebih besar dari induk saya!"
CSS Measurement Units - ch Unit
Unit 'ch' adalah seorang ahli tipografi. Dia didasarkan pada lebar karakter '0' (nol) dalam font saat ini. Ini bisa sangat membantu untuk menciptakan layout yang konsisten, terutama dengan font monospace.
.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* Lebar 40 karakter '0' */
}Ini akan menciptakan kotak yang tepat 40 karakter lebar – sempurna untuk menampilkan snippet kode!
CSS Measurement Units - rem Unit
Unit 'rem' seperti sang paman bijak dari keluarga CSS. Dia selalu mengacu ke ukuran font elemen root (biasanya tag <html>), mengabaikan ukuran font elemen induk.
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* Ini akan menjadi 24px, berdasarkan ukuran font html */
}Dalam kasus ini, meskipun .container memiliki ukuran font yang berbeda, paragraf di dalamnya masih akan 24px (1.5 * 16px dari root).
CSS Measurement Units - lh dan rlh Unit
Unit 'lh' didasarkan pada tinggi baris elemen, sedangkan 'rlh' didasarkan pada tinggi baris elemen root. Ini adalah unit yang lebih baru dan sangat cocok untuk menciptakan ritme vertikal dalam desain Anda.
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* Ini akan sama dengan tinggi baris */
}Ini menciptakan jarak yang konsisten antara paragraf berdasarkan tinggi baris.
CSS Measurement Units - vh Unit dan vw Unit
Sekarang kita masuk ke unit viewport – ini adalah favorit saya pribadi! 'vh' adalah singkatan dari viewport height, dan 'vw' adalah viewport width. Mereka adalah persentase dari ukuran viewport keseluruhan.
.hero-section {
height: 100vh; /* Tinggi keseluruhan viewport */
width: 100vw; /* Lebar keseluruhan viewport */
}
.half-width {
width: 50vw; /* Setengah lebar viewport */
}Unit ini sangat bagus untuk menciptakan desain responsif yang menyesuaikan dengan semua ukuran layar. Saya pernah menggunakan mereka untuk menciptakan halaman landing berukuran penuh yang terlihat fantastis pada semua perangkat, dari ponsel ke TV besar!
CSS Measurement Units - vmin dan vmax Unit
'vmin' dan 'vmax' adalah pasangan dinamis unit viewport. 'vmin' menggunakan dimensi yang lebih kecil viewport, sedangkan 'vmax' menggunakan dimensi yang lebih besar.
.square {
width: 50vmin;
height: 50vmin;
}Ini menciptakan kotak yang selalu 50% dimensi yang lebih kecil viewport – sangat cocok untuk menjaga rasio aspek!
CSS Measurement Units - vb Unit
Unit 'vb' didasarkan pada ukuran viewport dalam arah blok (biasanya tinggi dalam mode tulisan horisontal). Itu mirip dengan 'vh' tapi menyesuaikan dengan mode tulisan yang berbeda.
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* Tinggi penuh dalam mode tulisan vertikal */
}Ini sangat berguna untuk menciptakan layout yang bekerja baik dalam sistem tulisan horisontal dan vertikal.
CSS Measurement Units - vi Unit
Unit 'vi' adalah versi inline dari 'vb'. Dia didasarkan pada ukuran viewport dalam arah inline (biasanya lebar dalam mode tulisan horisontal).
.horizontal-scroll {
width: 200vi; /* Dua kali lebar viewport */
overflow-x: scroll;
}Ini menciptakan elemen yang menggulung secara horizontal dan selalu dua kali lebar viewport.
Contoh - Persentase
Persentase dalam CSS selalu relatif kepada sesuatu. Untuk lebar, mereka biasanya relatif kepada lebar elemen induk.
.parent {
width: 300px;
}
.child {
width: 50%; /* Ini akan menjadi 150px */
}Dalam hal ini, elemen .child akan selalu setengah lebar induknya. Seperti mengatakan elemen Anda, "Anda bisa memiliki separuh dari apa yang dimiliki induk Anda!"
Contoh - Angka
kadang-kadang, Anda akan melihat properti CSS dengan tidak ada unit sama sekali – hanya angka. Ini biasanya digunakan untuk properti unitless seperti line-height atau opacity.
p {
line-height: 1.5; /* 1.5 kali ukuran font */
opacity: 0.8; /* 80% terlihat */
}Dalam kasus ini, tinggi baris akan 1.5 kali ukuran font, menciptakan teks yang jaraknya bagus, dan opacity akan membuat teks agak transparan.
Dan itu adalah nya, teman-teman! Kita telah menjelajahi negeri unit measure CSS. Ingat, kunci untuk menguasai ini adalah praktik. Cobalah untuk mencampur dan menyesuaikan unit ini dalam proyek Anda, dan Anda akan segera mengembangkan kepekaan untuk menggunakan yang mana saja.
Selamat mengoding, dan semoga layout Anda selalu sempurna! ?✨
Credits: Image by storyset