Mengenal Display None dan Visibility Hidden
Juni 07, 2021 • •Pada latihan CSS kali ini, kita akan belajar mengenai perbedaan display:none dan visibility:hidden. Disini kita siapkan satu container sebagai "parent" dan 3 buah kotak sebagai "child" dengan keterangan satu, dua dan tiga. Selanjutnya kita akan memberikan nilai CSS pada kotak atau child nomor dua.
satu
dua
tiga
Percobaan pertama kita akan menggunakan attribut CSS visibility:hidden.
visibility: hidden;
satu
tiga
Dengan menggunakan visibility: hidden; posisi kotak/child nomor dua hanya disembunyikan namun area masih tetap ada. Jika di ibarakan rumah, rumah ini masih tetap ada, namun penghuninya kosong.
Selanjutnya kita akan mencoba menggunakan attribut CSS display:none.
display: none;
satu
tiga
Dengan menggunakan display: none; posisi kotak/child nomor dua hanya benar-benar dihilangkan dari area sehingga kotak/child nomor 3 menempati kotak/child nomor dua yang sudah dihilangkan. Jika di ibarakan rumah, rumah ini sudah di hancurkan.
