Dito PriwantoSetelah sebelumnya kita belajar cara mengatur text formatting dengan CSS, dalam lanjutan series belajar CSS bagian 8 ini, kami akan membahas mengenai cara mengatur ukuran elemen dengan CSS.
Dalam pembahasan sebelumnya, kita sudah sering menentukan ukuran properti untuk setiap elemen yang digunakan. Pada series belajar CSS bagian 8 ini, kami akan lebih detail membahas tentang penggunaan satuan ukuran, yang memungkinkan pengembang web dapat menentukan dimensi dan proporsi elemen pada halaman web dengan presisi dan fleksibilitas.
Satuan Ukuran dalam CSS
Penggunaan satuan ukuran yang tepat adalah kunci dalam menciptakan pengalaman pengguna yang optimal. Dengan memahami perbedaan dan aplikasi praktis dari berbagai satuan ukuran ini, pengembang web dapat memastikan bahwa situs mereka tidak hanya terlihat baik tetapi juga berfungsi dengan baik di berbagai perangkat dan ukuran layar.
Menentukan ukuran elemen sangat penting dalam melakukan styling pada tampilan website yaitu ketika diakses menggunakan perangkat dengan layar lebar (desktop / pc / laptop), layar sedang (tablet), dan layar kecil (mobile) hal ini sering disebut dengan responsive.
Dalam mengatur ukuran dengan CSS, terdapat berbagai macam satuan ukuran yang dapat digunakan untuk mengatur ukuran elemen. Satuan-satuan ini secara umum dapat dibagi menjadi dua kategori yaitu:
- Satuan absolut
- Satuan relatif.
Mari kita bahas secara singkat penjelasan mengenai masing-masing satuan tersebut:
Satuan Absolut
Satuan absolut adalah satuan yang memiliki nilai tetap dan tidak berubah relatif terhadap nilai lain. Beberapa satuan absolut yang umum digunakan adalah:
Mengatur Ukuran dengan piksel (px)
Mengatur menggunakan ukuran px (pixel) adalah satuan paling umum digunakan untuk ukuran elemen yang tetap. Satuan piksel sering digunakan dalam menentukan ukuran di setiap elemen tertentu.
Contoh kode css:
.kotak-px {
width: 400px;
height: 200px;
}Mengatur Ukuran dengan cm, mm, dan inch
Mengatur menggunakan ukuran cm (centimeter), mm (milimeter), dan in (inch) adalah satuan panjang berdasarkan ukuran fisik.
Contoh kode css:
.kotak-cm {
width: 6cm;
height: 4cm;
}Mengatur Ukuran point (pt)
Mengatur menggunakan ukuran pt (point) adalah satuan umum dalam dunia percetakan, setara dengan 1/72 inci.
Contoh kode css:
.teks-pt {
font-size: 12pt;
}Mengatur Ukuran pica (pc)
Mengatur menggunakan ukuran pc (pica) adalah satuan umum dalam dunia percetakan, setara dengan 12 point.
Contoh kode css:
.teks-pc {
font-size: 12pc;
}Satuan relatif
Selanjutnya tentang satuan ukuran pada series belajar CSS bagian ke 8 adalah satuan relatif. Satuan relatif adalah satuan yang bergantung pada ukuran elemen lain atau ukuran viewport.
Viewport adalah area tampilan web yang terlihat oleh user. Ukuran viewport berbeda beda tergantung perangkat yang digunakan untuk menampilkan halaman web apakah menggunakan perangkat layar lebar (desktop). laptop, tablet, atau mobile
Beberapa satuan relatif yang umum digunakan adalah:
Mengatur Ukuran dengan % (persentase)
Mengatur menggunakan ukuran % (persentase) adalah ukuran yang mengacu pada ukuran elemen induk.
Contoh kode css:
.kotak-persen {
width: 50%;
height: 50%;
}Mengatur Ukuran dengan em
Mengatur menggunakan ukuran em adalah ukuran font elemen induk. 1em sama dengan ukuran font elemen induk.
Contoh kode css:
.teks-em {
font-size: 2em; /* 2 kali ukuran font elemen induk */
}Mengatur Ukuran dengan rem
Mengatur menggunakan ukuran rem adalah ukuran font elemen root (html).
Contoh kode css:
.teks-rem {
font-size: 1.5rem; /* 1.5 kali ukuran font elemen root */
}Mengatur Ukuran dengan vw dan vh
Mengatur menggunakan ukuran vw (viewport width) adalah ukuran pada 1% dari lebar viewport.
Contoh kode css:
.kotak-vw {
width: 50vw; /* 50% dari lebar viewport */
}Mengatur menggunakan ukuran vh (viewport height) adalah ukuran 1% dari tinggi viewport.
Contoh kode css:
.kotak-vh {
height: 50vh; /* 50% dari tinggi viewport */
}Mengatur Ukuran dengan vmin dan vmax
Mengatur menggunakan ukuran vmin adalah ukuran pada 1% dari nilai terkecil antara lebar dan tinggi viewport.
Contoh kode css:
.kotak-vmin {
width: 50vmin; /* 50% dari nilai terkecil antara lebar dan tinggi viewport */
}Mengatur menggunakan ukuran vmax adalah ukuran pada 1% dari nilai terbesar antara lebar dan tinggi viewport.
Contoh kode css:
.kotak-vmax {
width: 50vmax; /* 50% dari nilai terbesar antara lebar dan tinggi viewport */
}Contoh Penerapan mengatur ukuran elemen
Berikut adalah salah satu contoh kode lengkap yang dapat Anda gunakan untuk mengatur ukuran elemen dengan css :
<!DOCTYPE html>
<html>
<head>
<title>Contoh satuan ukuran CSS</title>
<style>
/*satuan relatif*/
.kotak-px {
width: 200px;
height: 50px;
background: yellow;
}
.kotak-cm {
width: 4cm;
height: 2cm;
background: aqua;
}
.teks-pt {
font-size: 12pt;
}
.teks-pc {
font-size: 2pc;
}
/*satuan absolut*/
.kotak-persen {
width: 50%;
height: 50%;
background: chartreuse;
}
.teks-em {
font-size: 2em; /* 2 kali ukuran font elemen induk */
}
.teks-rem {
font-size: 1.5rem; /* 1.5 kali ukuran font elemen root */
}
.kotak-vw {
width: 50vw; /* 50% dari lebar viewport */
background: cyan;
}
.kotak-vh {
height: 50vh; /* 50% dari tinggi viewport */
background: khaki;
}
.kotak-vmin {
width: 50vmin; /* 50% dari nilai terkecil antara lebar dan tinggi viewport */
background: yellow;
}
.kotak-vmax {
width: 50vmax; /* 50% dari nilai terbesar antara lebar dan tinggi viewport */
background: hotpink;
}
</style>
</head>
<body>
<h3>Satuan absolut adalah yang memiliki nilai tetap dan tidak berubah</h3>
<div class="kotak-px">
Kotak menggunakan ukuran 400 x 200 piksel (px)
</div>
<div class="kotak-cm">
Kotak menggunakan ukuran 6 x 4 cm (centimeter)
</div>
<div class="teks-pt">
Teks menggunakan ukuran 12 point (pt)
</div>
<div class="teks-pc">
Teks menggunakan ukuran 4 pica (pc)
</div>
<h3>Satuan relatif yang bergantung pada ukuran elemen lain</h3>
<div class="kotak-persen">
Kotak menggunakan ukuran 50 x 50 persen (%)
</div>
<div class="teks-em">
Teks menggunakan ukuran 2em
</div>
<div class="teks-rem">
Teks menggunakan ukuran 1.5rem
</div>
<div class="kotak-vw">
Kotak menggunakan ukuran 50vw
</div>
<div class="kotak-vh">
Kotak menggunakan ukuran 50vh
</div>
<div class="kotak-vmin">
Kotak menggunakan ukuran 50vmin
</div>
<div class="kotak-vmax">
Kotak menggunakan ukuran 50vmax
</div>
</body>
</html>
Ketika dicoba akses melalui browser tampilan layar lebar, tampilannya akan seperti screenshot berikut :
Ketika dicoba akses melalui browser tampilan layar kecil, tampilannya akan seperti screenshot berikut :
Dari screenshot diatas ada perbedaan dimana penggunaan ukuran absolut akan tetap sedangkan ukuran relatif mengikuti ukuran layar pengguna.
Mengatur Ukuran Elemen dengan tepat
Mengatur ukuran yang tepat menggunakan satuan dengan css dapat membantu dalam menyesuaikan tata letak yang responsif dan fleksibel.
Anda dapat menggunakan fitur Inspect element yang disediakan oleh browser yang digunakan. Anda dapat mempelajari penggunaan inspect element melalui link berikut : Inspect Element: Manfaat dan Cara Menggunakannya
Kesimpulan
Menggunakan ukuran satuan css yang tepat tergantung pada kebutuhan dan tujuan desain website yang akan dibangun oleh developer pengembangan website.
Ukuran satuan absolut memberikan ukuran yang presisi, sedangkan satuan relatif memberikan fleksibilitas yang lebih besar dan membantu dalam menyesuaikan tata letak yang responsif dan fleksibel di berbagai perangkat.
Menggabungkan kedua jenis satuan css dapat mempermudah developer pengembangan website untuk menciptakan desain web yang konsisten, responsif, dan user-friendly.
BACA JUGA: Belajar CSS Bagian 9: CSS Media Query Beserta Contohnya
Demikian series belajar CSS bagian ke 8 tentang mengatur ukuran elemen di CSS. Simak terus artikel belajar CSS dari Rumahweb Indonesia, untuk meningkatkan skill dan pemahaman CSS yang Anda kuasai. Semoga bermanfaat.
