Pada video sebelumnya kita telah mempelajari mengenai CSS Box Model, yaitu setiap tag dalam kode HTML akan ditampilkan oleh browser dalam bentuk kotak. Dalam video ini dan beberapa video berikutnya, kita akan mempelajari lebih lanjut mengenai gimana sih detilnya CSS Box Model tersebut. Dan bagaimana cara mengaturnya.

Kita bisa melihat pada gambar, bahwa kotak pada CSS Box Model terdiri dari 4 bagian. Bagian paling luar yang berwarna orange adalah margin. Margin berfungsi untuk memberikan jarak antara tag satu dengan tag lainnya.

Kemudian setelah margin adalah border, pada slide menggunakan warna hitam. Properti border digunakan untuk memberikan garis tepi pada kotak tag. Kita telah mempelajari mengenai cara mengatur border pada playlist sebelumnya, jadi pada playlist ini kita sudah tidak membahas mengenai border lagi.

Selanjutnya di dalam border ada properti lagi yang namanya padding, yang digambarkan menggunakan warna hijau. Padding ini fungsinya adalah untuk memberikan jarak antara garis tepi dengan konten.

Sedangkan bagian paling dalam dari CSS Box Model adalah kontennya itu sendiri, yang digambarkan menggunakan warna biru.

Dalam video ini, kita akan mempelajari mengenai cara mengatur lebar dari CSS Box Model. Kita bisa menggunakan properti width untuk mengatur lebar kotak, dan kita bisa menggunakan properti height untuk mengatur tinggi kotak. Ingat bahwa nilai yang kita atur di dalam properti width dan height ini hanya mempengaruhi ukuran kotak kontennya saja ya, sedangkan padding, border dan margin tidak terpengaruh oleh width dan height. Sekarang kita akan mulai praktek coding.

Kita buka kembali kode dari playlist sebelumnya. Namun disini kita menggunakan semua style default dari browser ya, karena kita telah menghapus seluruh kode CSS-nya. Judulnya saya ganti dahulu ya, menjadi Belajar CSS Layout, karena kita sudah memasuki playlist baru.

Pertama, kita coba atur terlebih dahulu ukuran lebar dari paragraf pertama. Kita lihat pada kode HTML, paragraf pertama berada di dalam section dengan class “judul_utama”. Jadi untuk mengambil paragraf pertama, kita bisa menggunakan selector .judul_utama spasi p lalu diikuti dengan tanda titik dua dan first-of-type. Kita tambahkan properti width. Lalu kita beri nilai misalnya 200 pixel.

Kita simpan dan refresh browser. Sekarang paragraf pertama kita sudah berukuran 200 pixel. Kita bisa klik kanan pada paragraf tersebut dan pilih inspect. Kita arahkan cursor ke kode HTML paragraf, dan Chrome akan memberikan warna background biru pada konten paragraf kita. Kita bisa melihat bahwa Chrome memberikan ukuran dari konten adalah 200x108 pixel.

Pixel ini adalah satuan yang paling sering digunakan sebagai satuan absolute. Apakah itu pixel? Nah, sebenarnya apa yang kita lihat pada tampilan komputer ataupun smartphone kita, semuanya diatur dari pixel yang disusun secara berurutan. Berapa jumlah pixel pada layar, itu bergantung dari resolusi yang sedang kita gunakan. Layar yang sedang saya gunakan sekarang adalah resolusi Full HD. Pada layar ini, kalau kita menghitung dari paling kiri hingga ke paling kanan layar, maka kita akan mendapatkan 1.920 buah pixel. Sedangkan dari atas ke bawahnya terdiri dari 1.080 pixel. Jadi kalau kita kalikan, maka pada layar ini terdapat lebih dari 2 juta pixel.

Resolusi Full HD ini adalah resolusi yang paling umum digunakan untuk layar desktop dan notebook pada saat video ini dibuat. Dan hasil rekaman dari layar saya ini pun menjadi video yang menggunakan resolusi Full HD juga. Jadi jumlah pixel yang saya lihat pada layar sekarang ini, akan sama persis dengan jumlah pixel pada hasil rekamannya.

Selain pixel, kita juga bisa menggunakan beberapa satuan lain sebagai satuan absolute. Ada beberapa satuan yang sesuai dengan satuan pada dunia nyata, misalnya mm milimeter, cm centimeter, in inch, pt point, dan pc pica. Misalkan width ini saya ganti menjadi 50mm atau 50 milimeter, maka hasilnya seperti ini. Dan kalau saya ganti menjadi 5cm, maka hasilnya tetap sama ya. Satuan-satuan seperti ini digunakan apabila kita hendak membuat halaman web yang akan dicetak, misalnya seperti laporan. Nantinya teman-teman dapat mencoba sendiri satuan-satuan ini.

Sekarang kita akan melihat bagaimana behaviour dari satuan absolute ini. Misalkan saya ingin agar paragraf ini menggunakan setengah dari layar saya. Ukuran lebar layar saya adalah 1.920 pixel, maka kita masukkan nilai separuhnya yaitu 960 pixel. Kita simpan dan refresh browser.

Nah sekarang kalau saya maximize browser saya, maka bisa dilihat bahwa ukuran paragraf pertama adalah separuh dari lebar layar saya. Sebagai perbandingan, saya tambahkan dahulu konten dari paragraf kedua ya. Misalkan saya copy dan paste lagi sebanyak 2 kali. Sekarang bisa dilihat bahwa paragraf pertama menggunakan setengah layar, sedangkan paragraf kedua menggunakan satu layar penuh.

Behaviour pertama yang perlu kita sorot disini adalah ukuran dari paragraf ini selalu tetap, tidak peduli berapapun lebar dari browser yang sedang kita gunakan. Misalkan browser saya resize menjadi lebih besar ataupun menjadi kecil, kita bisa melihat pada paragraf lainnya bahwa browser akan secara otomatis mengubah ukuran konten agar seluruh teks pada paragraf tetap terbaca.

Namun hal ini tidak terjadi pada paragraf pertama. Pada saat kita menggunakan browser dengan lebar lebih kecil dari 960 pixel, maka browser akan memunculkan scroll bar horizontal. Sehingga apabila kita hendak membaca konten paragraf pertama yang tidak kelihatan pada layar, kita harus menggeser scroll bar ke kanan. Rancangan situs seperti ini akan membuat pengunjung merasa tidak nyaman, terutama pengunjung yang menggunakan layar kecil seperti smartphone.

Behaviour kedua yang perlu kita perhatikan adalah, apakah yang akan terjadi apabila kita melakukan zoom in atau zoom out pada browser? Pertama saya maximize terlebih dahulu browser, sehingga paragraf pertama menempati tepat separuh dari browser. Nah, sekarang saya akan menekan tombol Ctrl+ untuk melakukan zoom in pada browser. Perhatikan lebar dari paragraf pertama.

Nah, setelah saya zoom in browser ke ukuran 150%, ternyata ukuran lebar dari paragraf pertama juga ikut berubah ya. Yang tadinya separuh lebar browser, sekarang menjadi sekitar tiga per empat dari lebar browser. Namun apabila kita melakukan inspect, browser tetap melaporkan bahwa ukuran lebar dari paragraf tetap 960 pixel. Kita biarkan posisi zoom tetap pada 150% agar konten pada browser lebih gampang dilihat pada video ini.

Selanjutnya kita akan membahas mengenai satuan relatif. Yang paling sering digunakan adalah persentase. Kita akan mengubah lebar dari paragraf kedua menjadi 50%.

Pertama kita buka kembali kode CSS kita. Kita tambahkan selector .judul_utama p:nth-of-type(2). Lalu kita tambahkan properti width : 50%.

Kita simpan dan refresh browser.

Sekarang paragraf kedua kita akan memiliki lebar 50% dari lebar browser. Perhatikan pada saat saya merubah ukuran browser, lebar paragraf kedua akan menyesuaikan menjadi 50% dari lebar browser yang baru.

Sekarang kita maximize browser. Dan saya akan mencoba untuk zoom out dengan cara menekan tombol Ctrl -. Perhatikan lebar pada paragraf pertama dan paragraf kedua. Pada saat saya zoom out, maka lebar paragraf pertama akan ikut mengecil. Sedangkan lebar pada paragraf kedua tetap sama. Perhatikan lagi karena saya akan kembali zoom in ke 150%.

Yang perlu diperhatikan lagi disini adalah lebar 50% pada paragraf kedua dihitung dari mana? Nah, disini saya jelaskan agar jangan salah ya. Lebar 50% pada paragraf kedua sebenarnya bukan dihitung dari lebar browsernya. Tadi saya bilang 50% dari lebar browser agar lebih mudah dalam penyebutannya. Yang sebenarnya terjadi adalah lebar paragraf kedua dihitung 50% dari lebar tag parentnya, kalau kita lihat pada kode HTML, parentnya adalah tag section dengan class=”judul_utama”. Kebetulan kita belum mengubah width dari tag parent, sehingga nilainya adalah 100% atau sama dengan ukuran lebar browser. Jadinya lebar paragraf kedua seolah-olah adalah 50% dari lebar browser.

Sekarang kita tambahkan selector baru yaitu .judul_utama dan kita atur agar lebarnya menjadi 50%. Nah, sekarang jadinya parent dari paragraf kedua berukuran 50% dari layar, sedangkan ukuran paragraf kedua adalah 50% dihitung dari 50% layar, atau akan menjadi 25% dari layar. Kita simpan dan lihat hasilnya pada browser. Perhatikan bahwa pada saat saya membesarkan atau mengecilkan browser, maka ukuran paragraf kedua akan menyesuaikan menjadi 25% dari ukuran browser yang baru.

Yang perlu diperhatikan disini adalah satuan width pada parent tidak harus relative ya. Bisa saja parent menggunakan satuan absolute seperti paragraf pertama. Sebagai contoh, kita ganti nilai 50% menjadi 500px. Kita simpan dan refresh browser.

Kita bisa klik kanan dan pilih Inspect. Lalu kita lihat ke paragraf kedua. Browser akan memberitahukan bahwa lebar dari paragraf kedua adalah 250 pixel. Kalau kita hitung dari CSS kita, 50% dari 500 pixel adalah 250 pixel.

Perhatikan kalau saya menggeser browser untuk membesar dan mengecil, ternyata lebar paragraf kedua tetap sama di 250 pixel. Lebar paragraf kedua berubah menjadi absolute. Jadi kalau kita menggunakan satuan relatif terhadap parent yang menggunakan satuan absolute, maka kita akan mendapatkan hasil absolute.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.