Tutorial Belajar CSS Part 10 – Mengenal Satuan Nilai di CSS

bySetyo Wibowo ID - 0

Pada beberapa tutorial sebelumnya kita telah belajar mengenai peran css dalam memanipulasi object web yang kita buat, nah dalam tutorial ini kita akan belajar mengenai satuan nilai(value) di CSS.





Satuan nilai ini sangatlah penting untuk anda ketahui, karena dengan mengenai satuan nilai di CSS, anda dapat menentukan nilai atau value dari property yang ditulis di CSS.





Satuan yang dimiliki oleh CSS itu bisa bernilai positif dan negatif, dapat berupa bilangan bulat, hingga angka desimal dan masih banyak lagi jenisnya, disini warung belajar akan membahas beberapa jenis satuan nilai di CSS.





Nilai Absolut





Nilai absolut adalah satuan nilai di CSS yang tidak dipengaruhi kondisi tag induknya (parent), satuan nilai ini akan didasarkan pada ukuran yang sebenarnya di media printing.





Jika anda belum mengetahui istilah parent, bisa melihat pada tutorial sebelumnya Mengenal Sifat Penurunan di CSS (Inheritance)





Satuan nilai yang termasuk dalam nilai Absolut adalah :





  • Milimeter (mm)
  • Centimeter(cm)
  • Inchi(in)
  • Pica(pc)
  • Point(pt)




Satuan nilai diatas termasuk dalam nilai absolut karena satuan nilai tersebut berasal dari media percetakan.





Milimeter (mm) Pastinya anda sudah mengetahui satuan milimeter, 10 Milimeter adalah 1 centimeter





Centimeter (cm) ini juga pasti anda juga sudah mengenai 100 centi meter adalah 1 meter hehe





Inchi (in) Jika Milimeter dan Centimeter sudah sering digunakan, jika Inchi mungkin jarang, 1 inchi adalah sekita 25,4 mm atau 2,54 cm





pica (pc) satuan nilai ini juga tidak terlalu familiar untuk anda dan saya, 1 pc setara dengan 12 pt





point (pt) Satuan point (pt) sering digunakan untuk media cetak offline, contohnya dalam Microsoft Word satuan point(pt) digunakan untuk menentukan ukuran dari font, lalu sebagai perbandingan 1 inchi = 72 pt, biasanya sebuah dokumen menggunakan ukuran font sebesar 12 pt ya kurang lebih adalah 1/8 inchi.





Beberapa nilai absolut diatas jarang sekali digunakan karena kesulitan untuk melakukan konversi dari ukuran perhitungan kita ke dalam media yang digunakan untuk menampilkan yaitu monitor.





Saat ini monitor banyak sekali ukurannya sehingga 1 cm di satu monitor dengan monitor yang lain pasti juga akan berbeda, karena itu dengan menggunakan satuan nilai ini akan sulit untuk melakukan design dengan kode css, karena ukurannya akan sulit untuk sama dengan ukuran aslinya.





nah untuk memperjelas ukuran dari satuan ini, perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<title>Nilai Absolut</title>
<style type="text/css">
.pertama
{
	font-size:10mm;
}
.kedua
{
	font-size:1cm;
}
.ketiga
{
	font-size:0.5in;
}
.keempat
{
	font-size:1pc;
}
.kelima
{
	font-size:12pt;
}
</style>
</head>
<body>
<p class="pertama">Paragraf pertama</p>
<p class="kedua">Paragraf kedua</p>
<p class="ketiga">Paragraf ketiga</p>
<p class="keempat">Paragraf keempat</p>
<p class="kelima">Paragraf kelima</p>
</body>
</html>




semisal kita simpan dengan nama satuan_absolut.html, lalu silahkan buka dibrowser :









maka hasilnya adalah seperti gambar diatas, penjelasannya sebagai berikut :





  1. paragraf pertama ditampilkan dengan ukuran 10 mm ya kurang lebih dalah 1 cm
  2. paragraf kedua ditampilkan dengan ukuran 1 cm sehingga ukurannya sama dengan paragraf pertama
  3. paragraf ketiga ditampilkan dengan ukuran 0.5 in berarti sekitar 12.7 mm
  4. paragraf keempat ditampilkan dengan ukuran 1 pc
  5. paragraf kelima ditampilkan dengan ukuran 12 pt sehingga ukurannya sama dengan paragraf keempat




Nilai Relatif





Jika sebelumnya kita telah membahas mengenai nilai absolut yang tidak dipengaruhi oleh tag induknya (parent), Nilai relatif akan dipengaruhi oleh nilai induknya (parent).





Beberapa satuan nilai relatif yang akan kita bahas antara lain :





Pixel :





Pixel adalah unsur gambar atau representasi sebuah titik terkecil dalam sebuah gambar grafi yang dihitung per inchi.(wikipedia)





Satuan pixel termasuk dalam nilai relatif karena tidak terkait dengan perbandingan media tertentu.





perhitungannya seperti ini :   1 px = 0,26 mm atau sekitar 1/96 inci





tetapi biasanya browser akan menghitung 1 pixel adalah 1 pixel pada monitor yang digunakan.





Em





Satuan EM adalah satuan ukuran yang digunakan untuk mempermudah pembuatan responsive pada font ataupun elemen lain di halaman web.





1 em ukurannya akan sama dengan ukuran induk (parent) yang membungkusnya.





Semisal pada tag body kita deklarasikan font-style adalah 14 pt, maka tag <p> yang berada dalam tag <body> akan mendapatkan sifat turunan (inheritance) dari tag <body>, maka ketika kita set font-size di tag <p> nilainya 1 em, maka 1 em tersebut nilainya sama dengan 14 pt.





Jadi intinya nilai em ini akan menirukan ukuran yang telah dideklarasikan didalam tag induknya (parent).





Satuan ex





satuan ex berasal dari tinggi sebuah karakter x pada sebuah font, tetapi hanya beberapa font yang mendukung hal ini, setelah mencari di beberapa sumber didapatkan bahwa 1 ex = 0.43056 em





agar anda dapat lebih memahami satuan relatif ini, silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<title>Nilai Relatif</title>
<style type="text/css">
body
{
	font-size:30pt;
}
.pertama
{
	font-size:16px;
}
.kedua
{
	font-size:1em;
}
.ketiga
{
	font-size:2.322556670382757ex;
}
</style>
</head>
<body>
<p>Paragraf Tanpa Class</p>
<p class="pertama">Paragraf pertama</p>
<p class="kedua">Paragraf kedua</p>
<p class="ketiga">Paragraf ketiga</p>
</body>
</html>




semisal kita simpan dengan nama satuan_relatif.html, lalu silahkan dibuka di browser :









Maka hasilnya seperti gambar diatas, penjelasannya sebagai berikut :





  1. Paragraf tanpa class mendapat effect css dari selector body karena memang tidak menggunakan class sebesar 30 pt
  2. Paragraf pertama ukuran fontnya adalah 16 px
  3. paragraf kedua ukuran fontnya adalah 1 em maka ukurannya sama seperti paragraf tanpa class karena sifat dari satuan em akan meniru ukuran dari induknya. sehingga ukurannya sama seperti 30 pt
  4. paragraf ketiga ukuran fontnya kurang lebih sama dengan paragraf kedua karena nilai yang digunakan adalah 2.322556670382757ex maka jika dihitung sekitar 1 em, karena 1 ex adalah 0.43056 em




Nilai Presentase





Satuan Presentase adalah satuan dengan nilai per seratus (100%) dari suatu property yang relatif terhadap induk (parent) tag tersebut.





Semisal dalam sebuah kode css kita mendeklarasikan tag <body> menggunakan font-size adalah 10 pt, dan kita set tag <p> font-size adalah 140% maka ukuran font yang ada di tag <p> adalah 14 pt.





Untuk lebih memahami konsep dari nilai presentase, perhatikan contoh dibawah ini :





<!DOCTYPE html>
<html>
<head>
<title>Satuan Presentase</title>
<style type="text/css">
body
{
	font-size:30pt;
}
.pertama
{
	font-size:100%;
}
.kedua
{
	font-size:200%;
}
</style>
</head>
<body>
<p>Paragraf Tanpa Class</p>
<p class="pertama">Paragraf pertama</p>
<p class="kedua">Paragraf kedua</p>
</body>
</html>




semisal kita simpan dengan nama satuan_presentase.html, lalu kita buka di browser.









nah yang tampil akan seperti gambar diatas, penjelasannya adalah sebagai berikut :





  1. Paragraf tanpa class berukuran 30 pt, karena mendapatkan ukuran dari selector <body>
  2. Paragraf pertama yang memiliki nilai 100% maka ukuran textnya sama dengan bagian selector <body> yaitu 30 pt
  3. Paragraf kedua yang memiliki nilai 200% maka ukuran textnya adalah 60 pt, hasil dari 2 x 30 pt




Nilai ViewPort





satuan ini disebut sebagai viewport, satuan ini juga bisa digunakan sebagai elemen responsif.





Konsep dari satuan ini sama dengan presentase namun pada presentase tidak bisa menentukan height, nah anda dapat menentukan height dengan menggunakan satuan vw, dan vh, satuan vw adalah viewport width, dan vh adalah viewport height.





Satuan vw dan vh akan tergantung dengan induk(parent) elemennya. Semisal induknya memiliki ukuran 600px x 800px maka 1 vh adalah 800 * 1/100 = 8 px.





Maka jika 100 vh maka heightnya akan memiliki nilai 100% dari height induknya, hal ini juga berlaku untuk perhitungan vw.





<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Satuan Viewport</title>
  <style>
     body
    {
	height: 100%;
        width:100%;
    }
    #pertama 
    {
	height: 75vh;
        width: 50vw;
	border: 1px solid black; 
	background-color:red;
    }
  </style>
</head>
<body>
  <div id="pertama">Box 1
  </div>
</body>
</html>








semisal kita dengan nama satuan_viewport.html, lalu kita buka di browser, maka hasilnya adalah sebagai berikut :









hasilnya seperti gambar diatas, penjelasannya sebagai berikut :





  • Pada bagian tag <body> kita set height= 100% dan width= 100%
  • Pada bagian id pertama kita set untuk ukuran height=75vh dan width=50vw, maka tingginya dari objek berwarna merah tersebut adalah 75 % dari keseluruhan halaman, dan ukuran lebarnya adalah 50% dari keseluruhan halaman
  • Jadi bisa disimpulkan untuk ukuran 1vw ataupun 1vh adalah 1% dari ukuran tag <body> yang merupakan keseluruhan halaman web.




Jadi kurang lebih seperti beberapa satuan nilai di css yang bisa anda gunakan untuk memberikan nilai pada property css, jika ada yang ingin didiskusikan silakan di kolom komentar, sekian dulu tutorial kali ini, sampai jumpa ditutorial css berikutnya.


Tags:

Post a Comment (0)

Lebih baru Lebih lama