Apakah itu CSS Box Model? Untuk menjawab pertanyaan ini, pertama kita buka dahulu konten kita dari pelajaran sebelumnya. Ini adalah konten dari playlist Belajar CSS Lanjutan, namun seluruh kode CSS-nya sudah saya hapus. Nah, sekarang kita klik kanan dan pilih Inspect. Pastikan tab pada Chrome Developement Tools berada pada Elements. Lalu di sebelah kiri bawahnya kita bisa melihat kode HTML dari konten kita.

Misalkan saya arahkan mouse saya ke tag section dengan class Judul_utama. Perhatikan browser akan memberi highlight yang berbentuk kotak, dimulai dari judul Belajar CSS Lanjutan hingga kedua paragraf dibawahnya.

Kotak inilah yang dimaksud dengan CSS Box Model. Jadi setiap tag di dalam kode HTML kita adalah sebuah kotak, yang secara default ukuran dan posisinya diatur secara otomatis oleh browser. Sekarang kita klik ke tag Section untuk membuka isi dari tag tersebut. Dan apabila saya mengarahkan mouse saya ke atas tag h1, maka highlight browser akan berubah dan kotaknya akan menjadi lebih kecil. Highlight hanya menunjukkan kotak yang berhubungan dengan tag h1. Begitu juga yang terjadi apabila saya mengarahkan mouse saya ke atas tag p.

Nantinya di dalam playlist Belajar CSS Layout ini, kita akan mempelajari mengenai cara mengatur kotak-kotak di dalam CSS, agar tampilannya bisa sesuai dengan keinginan kita. Misalkan kita ingin agar paragraf pertama hanya menggunakan setengah layar. Lalu paragraf kedua menggunakan setengah layar juga namun berada di sebelah kanan paragraf pertama. Atau misalnya kita ingin memberikan jarak lebih dekat atau lebih jauh antara tag yang satu dengan tag lainnya. Atau mungkin kita ingin agar list item ini disusun ke samping, jangan kebawah seperti sekarang. Atau bisa juga kita membuat chat box yang selalu ada di bagian kanan bawah browser. Dan masih banyak hal menarik lainnya yang bisa kita lakukan dengan CSS.

Sekarang, untuk bisa melihat lebih jelas, bagaimana sih box model pada kode HTML kita? Kita buka kode CSS-nya. Pertama kita tambahkan selector *. Artinya semua style yang kita masukkan disini, akan digunakan pada semua tag. Kita tambahkan properti border dengan nilai 1px red solid.

Kita simpan dan refresh browser. Sekarang kita bisa melihat kotak-kotak pada seluruh tag HTML kita. Bisa dilihat pada paragraf pertama, bahkan link saja memiliki kotaknya sendiri ya.

Kalau kita lihat ke bagian Daftar Menu Restoran, kita bisa melihat bahwa bordernya lebih tebal ya. Artinya pada bagian ini ada banyak tag bertingkat. Pada kode HTML kita terdapat tag UL yang didalamnya ada tag LI, lalu didalamnya ada tag UL lagi dan diikuti LI lagi. Hingga 3 tingkat. Dan bordernya pun menjadi tebal.

Kita pun bisa melihat box model dari situs lainnya. Sebagai contoh saya buka situs Tokopedia. Nah, untuk menambahkan CSS-nya, kita bisa menggunakan Chrome Developer Tools. Kita klik kanan dan pilih Inspect. Pastikan tab pertama adalah Elements, dan pilih tab kedua adalah Styles. Lalu disebelah kanan dari Styles ada icon tanda Tambah. Kita klik icon tersebut untuk menambahkan CSS baru. Sama seperti sebelumnya, kita tambahkan selector * dengan isi boder : 1px red solid. Maka sekarang kita bisa melihat Box Model dari situs Tokopedia.

Perubahan yang kita lakukan pada Chrome Developer Tools hanya terjadi pada browser kita saja ya. Jadi apabila orang lain sedang mengakses Tokopedia, mereka tidak melihat kotak-kotak merah seperti yang kita lihat sekarang. Bahkan kotak yang kita lihat ini pun hanya berlaku saat ini saja ya, apabila kita merefresh browser atau mengakses halaman lain dari Tokopedia, maka kotak merahnya akan hilang. Apabila kita ingin melihat kembali box modelnya, kita harus membuka kembali Chrome Developer Tools dan menambahkan style * seperti tadi.

Ada cara lain yang lebih mudah untuk melihat Box Model, yaitu dengan menambahkan Chrome Extension. Perhatikan pada sebelah kanan dari Address Bar, kita bisa menemukan icon Extension. Kita bisa klik ke icon tersebut. Lalu pilih Manage Extensions. Disini kita bisa melihat daftar Extensions yang sudah dipasang pada Chrome kita. Klik ke icon menu pada sebelah kiri atas, dan klik Open Chrome Web Store.

Sekarang kita bisa mengakses ke semua extension yang bisa kita pasang ke browser Chrome kita. Lakukan pencarian dengan kata kunci Pesticide. Lalu kita klik ke hasilnya. Kita bisa menekan tombol Add to Chrome untuk memasang extension ini ke browser kita.

Nah sekarang kita bisa buka kembali situs Tokopedia. Lalu untuk melihat Box Modelnya, kita bisa klik ke icon Extension, lalu kita pilih Pesticide. Apabila kita mau lebih sering menggunakan Extension ini, maka kita bisa mengklik tombol PIN. Sehingga icon Pesticide akan muncul di sebelah kiri icon Extension. Jadi kita bisa dengan lebih mudah menghidupkan atau mematikan extension ini.

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.