Dalam mendesain website Terkadang ada beberapa hal elemen yang ingin disembunyikan atau ingin tidak terlihat oleh pengguna pada suatu tampilan website. Seringkali digunakan hide/show suatu elemen untuk suatu interaksi-interaksi tertentu karena tidak memungkinkan untuk menampilkan semua informasi secara bersamaan dalam suatu tampilan.
Dalam hal ini diperlukan properti CSS yang dapat digunakan untuk menyembunyikan suatu elemen HTML dari tampilan. Ada dua properti CSS yang dapat diterapkan, yaitu display: none; atau visibility: hidden; maupun opacity:0
A. Display: none
Elemen yang memiliki display: none; tidak akan ditampilkan dalam halaman browser. Posisi atau tempat elemen tersebut akan digantikan oleh elemen selanjutnya. Sehingga, alur atau tata letak tampilan tidak akan berakibat pada elemen-elemen lainnya.
Display mempunyai 2 property yaitu :
- none (tidak kelihatan)
- block (kelihatan)
B. Visibility: hidden;
Suatu elemen yang memiliki nilai visibility hidden. Maka elemen tersebut akan hilang/disembunyikan dalam tampilan suatu website. Akan tetapi elemen tersebut tetap mengambil space(tempat) dari elemen tersebut. Jadi elemen tidak benar-benar hilang dari tampilan hanya tidak ditampilkan
visibility mempunyai 2 property yaitu :
- hidden (tidak kelihatan)
- visible (kelihatan)
C. Property Display
Syntax adalah aturan dasar penulisan Display agar menampilkan elemen sesuai keinginan dapat digunakan syntax sebagai berikut
selector {
display: value;
}- selector: bagian ini merupakan menentukan elemen HTML mana yang akan diatur tampilannya.
- value: bagian ini adalah value dari properti display yang ingin digunakan, seperti block, inline, flex, dll.
Display CSS: Inline
Tipe display inline membuat elemen ditampilkan sejajar dengan elemen lain atau dengan teks di sekitarnya, tanpa memulai baris baru. Menggunakan tipe display ini berguna saat ingin mengatur style untuk bagian tertentu dari teks atau elemen, tapi tidak ingin mengubah layout keseluruhan halaman web.
Beberapa tag seperti < span > juga menggunakan display inline sebagai default.
Karakteristik utama dari display inline adalah:
- Lebar dan tinggi: elemen dengan tipe display inline tidak bisa mengatur lebar dan tinggi. Lebar dan tinggi elemen akan otomatis disesuaikan dengan kontennya.
- Margin dan padding: elemen inline bisa memiliki margin dan padding, tetapi hanya pada sisi kiri dan kanan, bukan atas dan bawah.
- Baris baru: elemen inline tidak memulai baris baru pada halaman, sehingga elemen lain dapat diletakkan di sebelahnya.
<p>Ini adalah <span style="color:
red;">teks merah</span> di dalam paragraf.</p>Dalam contoh di atas, elemen span dipakai untuk mengubah warna teks menjadi merah, tanpa mengubah struktur atau layout dari paragraf tersebut. Elemen span tetap berada dalam baris yang sama dengan teks lain di sekitarnya.
Display CSS: Block
Tipe display CSS: block akan selalu memulai baris baru dan mengambil seluruh lebar yang tersedia pada container parent-nya. Tipe display ini berfungsi ketika ingin membuat struktur layout halaman web, seperti pembagian kolom, header, dan footer.
Hampir semua tag di HTML mempunyai display block sebagai default display-nya.
Berikut beberapa karakteristik dari tipe display block:
- Lebar dan tinggi: elemen block bisa mengatur lebar dan tinggi secara eksplisit. Jika tidak diatur, lebar elemen akan mengisi seluruh lebar container, sedangkan tingginya disesuaikan dengan konten di dalamnya.
- Margin dan padding: elemen block dapat memiliki margin dan padding di semua sisi, termasuk atas dan bawah.
- Baris baru: Elemen block selalu memulai baris baru, sehingga elemen lain tidak bisa diletakkan di sebelahnya pada baris yang sama.
<div style="background-color: lightblue; padding: 10px;">
Ini adalah elemen div dengan latar belakang biru muda.
</div>- Elemen HTML yang secara default merupakan tipe display block adalah div
- dalam menggunakan elemen div untuk membuat blok dengan background biru muda dan padding di sekelilingnya. Elemen div akan mengambil seluruh lebar yang tersedia dan memulai baris baru pada halaman web
Display CSS: Inline-Block
Tipe display inline-block dalam CSS adalah kombinasi unik dari karakteristik tipe inline dan block. Tipe ini memungkinkan elemen untuk diletakkan sejajar dengan elemen lain (seperti inline), namun tetap bisa mengatur lebar dan tinggi secara eksplisit (seperti block).
Berikut adalah beberapa karakteristik dari tipe display “inline-block”:
- Lebar dan tinggi: berbeda dengan inline, elemen ini dapat mengatur lebar dan tinggi secara eksplisit.
- Margin dan padding: Elemen inline-block bisa saja memiliki margin dan padding di semua sisi.
- Baris baru: seperti inline, elemen ini tidak memulai baris baru dan dapat diletakkan sejajar dengan elemen lain pada baris yang sama.
<div style="display: inline-block; background-color: peachpuff;
width: 200px; height: 100px; margin: 10px;">
Kotak 1
</div>
<div style="display: inline-block; background-color: lightcoral;
width: 150px; height: 150px; margin: 10px;">
Kotak 2
</div>- Dua elemen div dengan tipe display inline-block. Kedua elemen ini akan diletakkan sejajar dalam satu baris, namun dengan lebar, tinggi, dan warna background yang berbeda
Display CSS: None
Tipe display CSS: none memiliki fungsi yang sangat spesifik, yaitu menyembunyikan elemen dari halaman web. Ketika kamu mengatur nilai display suatu elemen menjadi none, elemen tersebut tidak akan terlihat oleh audiens dan tidak akan memakan tempat di layout halaman, seolah-olah elemen tersebut benar-benar dihapus dari DOM.
Ada beberapa kasus di mana kamu mungkin perlu menggunakan tipe display none:
- Konten kondisional: kamu mungkin memiliki konten yang hanya ingin ditampilkan dalam kondisi tertentu, misalnya pesan kesalahan atau informasi tambahan yang hanya perlu ditampilkan ketika audiens mengeklik tombol tertentu.
- Responsive design: pada desain yang responsif, beberapa elemen mungkin perlu disembunyikan di ukuran layar tertentu untuk meningkatkan pengalaman pengguna, misalnya menyembunyikan gambar besar atau teks tambahan pada tampilan mobile.
- Pengaturan layout: dalam beberapa kasus, kamu mungkin ingin sementara menyembunyikan elemen tanpa menghapusnya dari kode, misalnya saat melakukan testing atau debugging.
#elemenRahasia {
display: none;
}D. Contoh penggunaan dalam website
Berikut contoh penggunaan display dan hidden, yang dapat didownload filenya secara gratis
Leave a Reply