dalam judul diatas kita kali ini akan mencoba panjang dan lebar atau width dan height di css. kita juga akan mencoba memahami bagaimana kinerja properti width dan height ini dalam css, namun sebelumnya izinkan diri ini untuk mengucapkan
Salam sobat semua
Alhamdulillah atas segala nikmat yang sudah Allah berikan kepada diri ini, dan nikmat bisa menulis dan berbagi lagi dengan kalian.hanya dengan izin-Nya lah kita bisa melakukan sesuatu yang baik ini.
dalam kesempatan kali ini kita akan mencoba properti yang namanya width dan height. pastilah bagi kalian yang paham dan bisa bahasa inggris bisa langsung menebak fungsi dari dua properti tersebut. ya benar untuk properti width fungsinya untuk mengatur lebar dan height untuk mengatur tinggi.dan untuk nilai atau value dari properti tersebut kita bisa menggunakan pixel (px), em atau persen (%).
1. langsung saja buka file yang kemaren atau bisa juga buat file lagi kawan. dan ketikkan atau copy paste kode berikut dalam file css nya
#main{border:7px solid blue;width:750px;}
dan dalam file html bisa di ketik atau copy paste seperti berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<p>Ini adala isi dari main content yang akan saya buat sebagai website pertama saya</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat website prtama saya</p>
</div>
</body>
</html>
maka dari kode diatas jika kita benar dan tepat maka akan diperoleh hasil seperti berikut
2. jika kita lihat dari hasil diatas maka kita akan memperoleh suatu penafsiran bahwa lebar dari selector main menjadi selebar 750px. dan sekarang kita coba ubah nilai dari width tersebut dengan persen sehingga menjadi seperti berikut
#main{border:7px solid blue;width:100%;}
maka dari kode tersebut menghasilkan seperti berikut.
tampak jelas sekali hasil diatas ukuran lebar selector main jadi penuh karena kita memakai nilai 100%. dan ketika kita memakai persen maka untuk ukuran lebar tersebut akan mengikuti lebar dari browser, jadi ketika browser mengecil maka selector main akan juga mengecil. sekarang kita coba dan akan menghasilkan seperti berikut.
#main{border:7px solid blue;width:100%;height:550px;}
maka kode diatas akan menampilkan seperti berikut
4. selain itu saya juga kadang sering menggunakan properti max-width dan min-width. max-width ini berfungsi untuk mengatur batas paling tinggi ukuran lebar suatu selector kawan, jadi meskipun browser atau konten membesar maka selector akan membesar sampai batas nilai max-width. sekarang kita coba kode berikut
#main{border:7px solid blue;max-width:550px;width:100%;}
maka hasil kode diatas akan didapatkan hasil seperti berikut
jika browser kita kecilkan maka akan didapat spserti berikut
5. dan min-width digunakan untuk mengatur batas paling rendah untuk ukuran lebar suatu selector, jadi meskipun browser atau konten mengecil maka selector akan mengecil sampai batas nilai min-width. sekarang kita langsung coba biar lebih jelas dan paham kode berikut.
#main{border:7px solid blue;min-width:550px;width:100%;}
dari kode diatas akan dihasilkan seperti berikut
dan jika browser atua konten kita kecilkan maka akan sperti berikut
Comments
Post a Comment