Satuan Ukuran di HTML dan CSS

Dipublikasikan oleh Muhammad Zen pada

Halo teman-teman semua. apa kabarnya. mudah-mudahan dalam keadaan sehat dan bahagia. Kali ini kita akan membahas satuan ukuran di html dan css. Sebelumnya, jika teman-teman ingin mengikuti materi dari awal. Silahkan kunjungi menu kursus.

Apa Pentingnya Menentukan Satuan Ukuran?

Sebelumnya kita lihat terlebih dahulu pentingnya menentukan ukuran elemen. Secara umum jenis ukuran terbagi dua. Yaitu absolut dan relatif. Ukuran absolut artinya ukuran di layar komputer dengan mobile sama. Bahkan tidak terpengaruh terhadap ukuran layar apa pun. Sedangkan ukuran relatif bisa menyesuaikan lebar layar. Yang dikenal dengan istilah responsif terhadap layar. Lalu mana yang harus dipilih?. Jawabannya keduanya digunakan.

Contoh Penggunaan Ukuran

Banyak sekali implementasi atau penggunaan ukuran di halaman web. Baik secara langsung menggunakan atribut serperti widht dan height. Maupun menggunakan style atau css. Berikut contoh elemen yang diatur ukurannya.

  • Gambar
  • Text
  • Layout
  • Dan Lain-lain

Ukuran Absolut

Ukuran absolut tidak terpengaruh ukuran layar. Ukuran ini mudah diperhitungkan dan dibuat. Tetapi tidak responsif. Ukuran Absolut menggunakan satuan px.

<div style="background-color: green; width:50px;height:50px;">
</div>

Ukuran kotak sebesar 50 pixel baik ukuran komputer, maupun mobile. Untuk membuktikan silahkan kecilkan ukuran browser. Ukuran akan tetap 50×50 piksel.

Ukuran Relatif

Ukuran ini mendukung responsif layar. Namun perlu perhitungan yang baik untuk menggunakannya. Berikut ini contoh ukuran relatif menggunakan %.

<div style="background-color: green; width:50%;height:50%;">
</div>

Tag div merupakan tag yang tidak berfungsi apa pun jika tidak disertai css. Tag ini bersifat jatuh ke bawah.

Ukuran 50% dari lebar dan tinggi layar yang sedang digunakan. Untuk membuktikan silahkan kecilkan ukuran browser. Ukuran akan menyesuaikan lebar layar.

Satuan Ukuran Relatif Untuk Font

  • % ukruan relatif terhadap parent elemen.
  • em ukuran relatif terhadap ukuran huruf saat ini.
  • rem ukuran relatif terhadaf ukuran huruf root.
  • dan lain-lain

Sekian untuk materi kali ini semoga bermanfaat. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *