CSS - Unit Pemukiran: Panduan Pemula
Hai sana, para ahli CSS masa depan! ? Selamat datang ke perjalanan magis kami ke dunia unit pemukiran CSS. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda melalui aspek penting desain web ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan memulai dari awal dan membangun pengetahuan bersama!
Unit Panjang: Blok Pembangunan Pemukiran CSS
Ayo mulai dengan dasar. Dalam CSS, kita menggunakan berbagai unit untuk menentukan ukuran elemen, margin, padding, dan lainnya. Picturkan unit ini sebagai pengukur dan pita ukur dunia digital. Mereka membantu kita menciptakan 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 praktek!
Unit Pemukiran CSS - Unit em
Unit 'em' adalah seperti kameleon - ia menyesuaikan diri dengan lingkungannya. Satu 'em' setara dengan ukuran font elemen saat ini. Hal ini membuatnya sangat berguna untuk menciptakan desain berskala.
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* Ini akan 24px */
margin-bottom: 1em; /* Ini juga akan 24px */
}Dalam contoh ini, ukuran font elemen .child akan 24px (1.5 * 16px), dan margin bawahnya juga akan 24px. Seperti elemen .child mengatakan, "Saya ingin 1.5 kali lipat lebih besar dari orang tua saya!"
Unit Pemukiran CSS - Unit ch
Unit 'ch' adalah seorang ahli tipografi. Itu berdasarkan lebar karakter '0' (nol) dalam font saat ini. Ini bisa sangat berguna untuk menciptakan layout yang konsisten, khususnya 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!
Unit Pemukiran CSS - Unit rem
Unit 'rem' adalah seperti orang tua bijak dalam keluarga CSS. Itu selalu merujuk ke ukuran font elemen root (biasanya tag <html>), mengabaikan ukuran font elemen orang tua.
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* Ini akan 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).
Unit Pemukiran CSS - Unit lh dan rlh
Unit 'lh' berdasarkan tinggi baris elemen, sedangkan 'rlh' berdasarkan tinggi baris elemen root. Ini adalah unit yang lebih baru dan sangat baik untuk menciptakan ritme vertikal dalam desain Anda.
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* Ini akan setara dengan tinggi baris */
}Ini menciptakan jarak konsisten antara paragraf berdasarkan tinggi baris.
Unit Pemukiran CSS - Unit vh dan vw
Sekarang kita masuk ke unit viewport - ini adalah favorit pribadi saya! 'vh' berarti tinggi viewport, dan 'vw' berarti lebar viewport. Mereka adalah persentase dari ukuran viewport total.
.hero-section {
height: 100vh; /* Tinggi penuh viewport */
width: 100vw; /* Lebar penuh viewport */
}
.half-width {
width: 50vw; /* Setengah lebar viewport */
}Unit ini sangat baik untuk menciptakan desain responsif yang menyesuaikan dengan semua ukuran layar. Saya pernah menggunakan mereka untuk menciptakan halaman landing fullscreen yang terlihat bagus pada semua perangkat, dari ponsel ke TV besar!
Unit Pemukiran CSS - Unit vmin dan vmax
'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 kecil viewport - bagus untuk menjaga rasio aspek!
Unit Pemukiran CSS - Unit vb
Unit 'vb' berdasarkan ukuran viewport dalam arah blok (biasanya tinggi dalam mode penulisan horizontal). Itu mirip dengan 'vh' tapi menyesuaikan dengan mode penulisan yang berbeda.
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* Tinggi penuh dalam mode penulisan vertikal */
}Ini sangat berguna untuk menciptakan layout yang bekerja baik dalam mode penulisan horizontal dan vertikal.
Unit Pemukiran CSS - Unit vi
Unit 'vi' adalah versi inline dari 'vb'. Itu berdasarkan ukuran viewport dalam arah inline (biasanya lebar dalam mode penulisan horizontal).
.horizontal-scroll {
width: 200vi; /* Dua kali lebar viewport */
overflow-x: scroll;
}Ini menciptakan elemen scroll horizontal yang 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 150px */
}Dalam ini, elemen .child selalu setengah lebar induknya. Seperti mengatakan elemen Anda, "Anda bisa memiliki setengah dari apa yang dimiliki orang tua Anda!"
Contoh - Angka
kadang-kadang, Anda akan melihat properti CSS dengan angka saja - tanpa unit. 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% opak */
}Dalam kasus ini, tinggi baris akan 1.5 kali ukuran font, menciptakan teks yang jaraknya nyaman, dan opacity akan membuat teks agak transparan.
Dan itu saja, teman-teman! Kita telah mengembara melalui tanah unit pemukiran CSS. Ingat, kunci untuk menguasai ini adalah praktek. Cobalah untuk mencampur dan mencocokkan unit ini dalam proyek Anda, dan Anda akan segera mengembangkan直觉 untuk menentukan kapan menggunakan yang mana.
Selamat berkoding, dan semoga layout Anda selalu sempurna! ?✨
Credits: Image by storyset