Dalam mengukur sesuatu tentu kita butuh satuan ukur bukan?
Contoh simple, misal beras 1 kg, beras 1 mangkok. Nah, 1 kg dan 1 mangkok itulah satuan ukurnya.
Ada banyak sekali satuan ukur yang ada, ada satuan ukur untuk massa seperti kg, ton, ons. Ada satuan ukur gempa yaitu skala richter, ada juga satuan ukur jarak seperti mil, km.
Dalam pengembangan web juga ada satuan ukurnya.
Mengapa penting?
Tanpa adanya satuan yang seragam dan disetujui bersama, maka website yang kita buat tentu tidak akan bisa seragam bentuknya.
Contoh, ukuran mangkok di Indonesia tentu beda dengan ukuran mangkok di Afrika.
Misal, kita pakai ukuran mangkok. Beras 1 mangkok deh, dan kita di Indonesia sudah biasa pakai ukuran segitu. Pas kita ke afrika, ternyata ukuran mangkoknya lebih besar. Tentu jadi terlalu banyak kan?
Karna itulah, dengan satuan yang seragam kita bisa menentukan takaran yang pas dimanapun berada. Misal, 1 kg di Indonesia ya sama aja 1 kg di Afrika, Eropa atau di belahan bumi manapun.
Penerapan di Web
Dalam desain html web, tentu ada banyak elemen yang diperlukan dalam membuat layout yang keren.
Ukuran tiap elemen pasti beda, misal ukuran untuk konten tentu lebih besar dibanding ukuran untuk sidebar. Contoh website ini:
Jika tidak ada ukuran pasti yang selaras seluruh dunia maka tampilan web ini tidak akan sama jika dibuka di komputerku dan komputermu.
Jenis satuan ukur
Menurut saya pribadi, ada dua jenis satuan ukur yang harus kamu pahami. Yaitu:
Satu, relative. Maksudnya disini ukurannya tidak pasti alias relative. Biasanya menggunakan persen %.
Contoh, 10% dari 100px adalah 10px. Tapi, 10% dari 1000px adalah 100px.
Dua, eksak. Nilai pasti, misalnya 10px, 10pt, 10cm. Tentu dimanapun kamu berada 10px di Indonesia ya sama dengan 10px di antartika.
Macam-macam measurement unit
Kalau istilah internasionalnya yaitu measurement (pengukuran) unit. Jadi, sebelum kamu belajar css lebih dalam, pastikan kamu tahu satuan yang digunakan.
| Satuan | Jenis | Keterangan | Contoh |
|---|---|---|---|
| ex | Relatif | Nilainya relatif berdasarkan tinggi-x (x-height) dari sebuah font. Karena tinggi setiap font itu beda-beda | p {font-size: 12pt; line-height: 3ex;} |
| em | Relatif | Nilainya relatif berdasarkan ukuran kali x default dari web tersebut. Misal default font 12pt, maka 1em = 12pt, 2em = 2pt. | p {letter-spacing: 2em;} |
| % | Relatif | Nilainya relatif, misal 10% dari 200px = 20px | div {height:80%} |
| px | Eksak | Satuan untuk screen / layar (laptop, hp, iphone, mac, dll) | p {margin: 20px} |
| pt | Eksak | Untuk mengukur titik (points = pt), 1 point = 1/72 inci | p {font-size: 14pt} |
| pc | Eksak | Ukuran dalam picas. 1 pica = 12 points | h1 {font-size:20pc} |
| mm | Eksak | Satuan dalam milimter | h2 {margin-botom:20mm} |
| in | Eksak | Satuan dalam inci, 1 inch = 2,54 cm = 96px | h3 {margin-top:1in} |
| cm | Eksak | Ukuran dalam cm | h4 {padding:10cm} |
Semoga kamu paham ya. Kalau ada yang salah dalam saya menulis satuan web css diatas. Mohon ingatkan lewat kolom komentar ya.